Needcoffee.com
PLEASE NOTE: “As an Amazon Associate, [Need Coffee] earns from qualifying purchases." You know we make money from Amazon links,
and I know you know this, but they make us say it anyway. More info, click here.

How to Make Those Stubborn Left-Justified Themes Go Center

Yes, friends, you might have noticed that WordPress is on the center of your screen when it comes to Needcoffee. Finding out how was an absolute bitch.

Here’s the details:

Basically there’s lots of float this and align this that you might find here and there. There was even one that said to center everything on the page and override it for each normal text bit so that they wouldn’t be centered–which sounded silly. Anywhere, here’s the tip. And I wish I could credit this to wherever I found it but believe me, I went to so many sites looking: my apologies if this was you. I simply lost track. So not original to me, but here was the fix.


In your style.css (or whatever your css file is called), there’s probably a setup called BODY. It looks like this:

body {
background-image: url("http://needcoffee.cachefly.net/newcupojoe.gif");
}

Or whatever yours is. What’s there is just telling the browser to use our background image. Which it did and does.

But to center my theme here, I just made it look like this:

body {
background-image: url("http://needcoffee.cachefly.net/newcupojoe.gif");
width:1000px; margin-left:auto; margin-right:auto;}
}

My theme is about 1000 pixels wide, so what I’m doing there is telling the BODY that it’s only 1000 pixels wide, and oh, by the way, automatically gauge the margins on either side. Bang. Slap in the middle. So make that width the same width as your theme is and you’re in business.

Now, some tweaking in the theme itself might be in order. Somehow I had told some of the tables on the right hand side of the page (the footer.php) that they should be centered, but centering them within their area when the whole thing was centered made them slightly off. I highly recommend the usage of Firebug, a Firefox add-on tool. It lets you inspect your layout and find that pesky DIV or CLASS or whatever which is throwing you off. I know some coding people scoff at such tools because they use divine providence to smell wonky code from fifty paces, but it works just fine for the rest of us.

As always, FYI, FWIW, YMMV.