jump to navigation


CSS Paragraph Display - Tweaking Your WordPress Theme Pt 1 April 12, 2006

Listen to this article (Listen to article)

If you’re not happy with the WordPress theme that you currently have, there are a lot of great themes summarized over at BloggingPro. They don’t create the themes; they just point to some nice ones. There are also generic designs over at OSWD, which are also free. The drawback with the latter is that you will have to do some coding to import them into WordPress (or whatever).

I’ve downloaded a lot of nice themes, all of which I tweak slightly before using. Tweaking the design a bit makes it a touch more unique. The beauty of most WordPress themes is that majority of visual tweaking can be done from the WordPress Theme Editor, within a single file, usually labelled “Stylesheet”, or some filename with a “.css” extension, typically style.css.

One problem I’ve commonly found is that the paragraph display in some themes causes pagraphs to be crammed together one after another, with no space in between. If you have a theme whose paragraph display isn’t quite right, you can fix this in just a single step. It should be easy even for those of you who do not have any programming experience. None needed, as it’s all done in CSS (Cascading StyleSheet). You don’t even have to have any CSS experience, as I’ll show you how right now.

From your WordPress blog’s control panel, make sure that you have selected the WP Theme that you want to tweak. Then click on the “Theme Editor” setting. If you are not already viewing the “Stylesheet” or “style.css” file, select it from the list at right. Skim over the CSS code that you see. If the CSS code is well written/ organized, you should see a “body” section, followed soon after by a “p” (paragraph) section. This is what you want to focus on. Your current “p” section may look something like this: 

p {
	margin: 0;
	padding: 5;
}
That may not be exact, but what it’s lacking is some vertical spacing command. Back up the file before changing it, then add a margin-top clause like so: 
p {
	margin: 0;
	padding: 5;
        margin-top: 5px;
}
The order of the clauses don’t matter in this case. The margin-top clause simply says that at the top of each paragraph of text displayed in the body of a post, insert 5 pixels of vertical space first. That gives you just enough space between paragraphs to make them more readable. This may just make the difference between a visually-okay theme and a nice theme that’s easy to read. Play around with the spacing until you’re happy with it. If you accidentally changed some other clause, replace the stylesheet with the backup version.

One thing to keep in mind is that not all web browsers properly support CSS-P (positioning) clauses. The worst culprit is IE (Internet Explorer), although maybe IE 7.0 will take care of some of the problems. So you’ll probably want to check your site in several different browsers including Mozilla, Firefox, Opera, and IE. (I’ll soon post a page with links to the latest versions of these browsers.)

Technorati Tags: , , , , ,



Comments»

1. Jen - December 28, 2007

Just the info I needed at 2 a.m. to get my blog finally right! It worked like a charm and I can finally get some rest. Thanks for the help!