WordPress Zen: Tightening the Wrench on the Equilibrium Theme

Equlibrium: WordPress ThemeI’ll admit, I really have a man-crush on themes like Made by On‘s Equilibrium WordPress Theme. They are so open and fresh and so easily readable. With ton’s of white-space, this theme really let’s a LOT of fresh air into the page.

And then… I start to hate it. :(

One of my personal pet-peeves with websites (in general) is the amount of scrolling that a user has to perform in order to peruse the entire site. My finger gets tired… and easily. OK. I’ll be honest. I do most of my development on a G4 Titanium Powerbook. It’s a widescreen, baby… I don’t have ALL of that vertical real-estate… like all you Microsoft Junkies do. :) So, if you really like the Equilibrium WordPress Theme, then here are a few of my recommendations…

One Row for Featured Content

That’s right. We’ll attempt to remove as much vertical white-space as possible… without intruding upon the designers original concept and intentions. The first thing you’ll have to decided is: What is the most important Category for your blog. What is it? WordPress? Technology? Photography? LOLCATS? Which is it? Figure it out… and we’ll squish that content into a sing line.

Now, Equilibrium offers several points in the index.php file to choose the “Featured” content. For this exercise, we’ll use both lines in the index.php file and we’ll choose ONLY three (3) posts.

[!-- Edit Below --]
[?php query_posts('cat=X&showposts=1'); ?]
[!-- Edit Below 2 --]
[?php query_posts('cat=X&showposts=2&offset=2'); ?]

Change the “X” to your main category. Change the “offset” to whatever trips-your-trigger. As long as it captures your main website content. Now, we’ll attempt to squeeze some real-estate from the style.css file. :) Of course, it seems intuitive that we should simply select three (3) for the first edit and leave the following “showposts=0″. Yeah. Don’t do that. Setting the WP hook, showposts, as equal to 0… is akin to saying “show all”… and that is NOT what we want to do. :) Of course, we could “comment out” the 2nd edit, but that really messes with the developers intent… and I hate doing that. Let’s work “within” the realm of the developer. Cool?

Squish that Header

Next, we’ll move onto the style.css file and see if we can shrink the vertical space between content…

body{...margin:0px auto 0px; ...} -80px for the bottom margin... c'mon...
#page-wrap{...margin:0px auto 0px; ...} AGAIN... -80px for the bottom-margin? Get real!
h4, h2{...margin-top:5px; margin-bottom:5px;...}
#top{margin-top:5px;...} 55px seems a LITTLE too much...
#nav{...margin-top:.6em} 1.2em seems bit too much... and why the change to em's?

That takes care of that… now, for some more fun. :)

Squish Those Posts

It was at THIS point where I realized what had initially been going wrong… the “Featured” rows were not aligning properly. They were all shifted left and right. I drove me up the wall. So, instead of changing those .front-post margins… I should have been clipping my Post Excerpts to five (5) lines or less. Yes. Manually determining the Excerpts.

.front-post{...margin-left: 8px; margin-right:9px;...} margin-right: 25? no margin-left?

Here’s another tip for you WP Theme developers… don’t mess with the “defaults.” Most of the WP bloggers will be USING those defaults. Don’t make us have to manually change them. It’s not cool. Unless it is ultimately mandatory. Then, we’ll forgive you. Here, it’s not such a stretch to alter the theme design to encompass the Excerpts that already exist.

So, we’ll continue with the edits…

#front-bottom{margin-top:1px} there really is no need for so much vertical separation...
#footer{...margin:20px auto 0;...} Yes, 150px for the top-margin is a bit too much...

One of the things that glared most out at me as I was “tweaking” this theme, was the sporadic use of px and em’s. Now, there ARE times when it is certainly more convenient to express CSS items in px and em’s, but the Equilibrium Theme seems to play fast-and-loose with those conventions… and it’s not entirely consistent.

Last of the Edits

I soon noticed that any “smileys” I added tended to wrangle the last line in a paragraph… which is where I typically put them. :) So, I made the following alteration at the end of the “Posts” section of the style.css file…. just after the “block quote” css style.

img.wp-smiley {margin: 0;}

Then, there is the nagging aspect of all my “code” segments being far too small. To fix that, let’s change the “preformatted” code to something a little bigger.

pre {font-size: 1.5em; line-height: 1.5em} /* pre is TOO small */

However, Equilibrium is a beautiful looking WordPress Theme… Clean, Tons of white-space… and I raise my glass to Made by On for putting this one together. Well played, sir (although a bit inconsistent)… well played. :)

3 Comments on “WordPress Zen: Tightening the Wrench on the Equilibrium Theme”

  1. sam

    hi, thanks for the post! I’m a total wordpress noob and i’m trying to tweak the Equilibrium theme. I’d like to have many more posts displayed on the front page (the default number is 8 I guess). Do you think it’s possible?

Leave a Reply

Your email address will not be published. Required fields are marked *

XHTML: You can use these tags <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>