CSS Layout Version of W3Schools.com

Its been my practice every time I stumble on a website to check if the design especially the layout is in CSS. One morning around 1am I was looking for some tutorials when I landed at W3Schools. Although CSS controls much of the presentation, it still uses tables for laying out their columns. Not concerned what time it was I decided to strip those table tags and overhaul it with CSS. Here’s the W3Schools CSS Version in case you’re eager to check out the final result. Read more

Scenery CSS Tweak

I want to share this to everyone who’s using the “Scenery” theme so you won’t be kicking yourself in the end.

It all began in my homepage. I’m a little OC so I started noticing that my entry paragraphs didn’t look like normal paragraphs. I wanted my entries to have a top and bottom margin. So I checked my WP editor and for countless times modified my article, put line break and paragraph tags in the code view and eventually re-installed everything! After all of the work the line breaks still wasn’t showing.

I then decided to take a look at the theme from the theme viewer and saw that the paragraphs didn’t have the top and bottom margins as well. It was all the template’s fault! hahaha. I checked the structure and of course the stylesheet. There was this little CSS rule:

p { margin:0; padding:0; }

As you can see this was the rule that’s been giving me the trouble. I then decided to edit the rule by turning it into:

p { line-height:1.5em; margin-top:1.5em; margin-bottom:1.5em; }

This rule based on an article by Richard Rutter did all the trick! The paragraphs were styled according to my liking but there was one minor catch. It also affects the date styling for an entry! So I’m forced to switch back to the previous CSS for paragraphs and added a new rule instead:

#right-column .box .entry p {
line-height:1.5em;
margin-top:1.5em;
margin-bottom:1.5em;
}

I decided to forcibly apply a rule to target the paragraph entry and lucky for me it didn’t explode in IE! Hope this article will somewhat ease the burden when trying to modify the Scenery theme or any stylesheet in general that you’re dealing with. Of course comments and reactions are welcome. Thanks for reading.