How to Create a WordPress Theme – Part 7, Margins & Font Settings

I discovered the problem with IE was that it was not handling the CSS float on the left column correctly. By supplying explicit top margin settings, it is now usable. Here’s what the design looks like in IE:

[image no longer available.]

As you can see, the corners are square since it doesn’t understand CSS3 border-radius. I may go back later and do the graphic based rounding, but it’s so much more trouble than CSS. At least the tabs are accessible now. You may note if you look closely, that the top of the first post is no ligned up with the top of the sidebar… I’m going to have to fix that. I just noticed it as I took this screen shot. Here’s how it should look in Firefox:

[image no longer available.]

Much nicer if I do say so myself! I decided to change the background to the entire page to the dark green rather than the light green with dark borders. The light green seemed to be giving the tan background a greenish cast visually. I know it’s just my eyes due to the colors being adjacent, but I didn’t like it. I’m still not quite happy with the shade of the tan I’m using, but I’m working on it. My target is something I would call ‘sand’. Mary Carter at eFuse has written a nice description of the adjacent color phenomenon.

I’ve also made a change in how the <code>blocks will appear:

[image no longer available.]

Using CSS the property overflow: auto, I’m able to let wide sections scroll, while the narrower ones don’t have scroll bars. If you use overflow: visible, it will show scroll bars even when they are not needed. Auto works much nicer. I’ve changed the background color as well as set the font to monospace for <code> as well.

Finally, I customized the footer, giving myself credit for the theme! I’m calling it ‘Earthy’. Tweaked the spacing at the bottom as well to not waste so much space.

[image no longer available.]

Behind the scenes, I also tweaked the Feeds to exclusively use my FeedBurner account so my statistics stay correct, as well as offering all three kinds of major feeds, RSS, RSS2 & Atom. Plus a Comments Feed.

Next step is replicating any specifics to the auxiliary pages, like the single post display & archives. Then the selection of plugins & configuration should be all that is left!