Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Customizing WordPress: Edit Theme Style Sheets

Last updated Oct 17, 2003.

By Miraz Jordan

If you want your blog to have a unique look, you must learn how to customize themes. A theme changes the look, layout, and even the content of your WordPress blog. There are many different ways to customize themes, but this article will get you started by explaining how you can edit the Kubrick theme’s CSS file to change the appearance of text in your blog.

Why Kubrick? The standard WordPress install includes the Classic and Default (Kubrick) themes. While Kubrick isn’t the most streamlined theme around, it’s a useful place to start.

WordPress Fundamentals

Before you start customizing themes, it's helpful to understand how WordPress works. WordPress is a system of four major components that work together to create your web site.

  1. You create posts or pages, using HTML markup to structure the text. The posts and pages are stored in a MySQL database on the server.
  2. When a visitor calls up your site, the WordPress theme’s files use PHP "intelligence" to select appropriate content from the database ...
  3. ... and display it inside HTML "containers" as pages for the visitor to read. The HTML/PHP files link to ...
  4. ...CSS files that control how the pages are displayed including layout, color, fonts, and so on.

Find The Theme

The "themes" folder lives inside the "wp-content" folder. Figure 1 shows my example site open in an FTP browser’s column view. The "default" theme resides inside the "themes" folder in the "wp-content" folder.

How Themes Work

Although most themes consist of a half dozen files or more, each theme has at least two files that determine the content and layout of your blog: an index.php template file and a CSS file—style.css—that includes a standard header.

The index.php file includes HTML and PHP coding that extract information, such as posts and pages, from the MySQL database and display it in a web page. The index.php file links to the CSS file that brings in instructions about how the content should be displayed.

The CSS file typically contains rules to influence colors, fonts, layout, and graphic elements, such as background images, borders, and margins.

View Source For Guidance

Style sheets interact with the HTML---you must be able to relate a specific CSS rule to a specific part of the rendered page. Sometimes the easiest way to understand what a CSS selector, such as ".post," applies to is to visit your blog and View Source. Save that HTML into a reference file so you can easily match up CSS selectors and HTML elements.

Instant Help through Temporary Colors

To help identify an element try setting a temporary distinctive background color on it. Then refresh your page to see what’s changed.

For a dramatic example, try adding ’background-color: red;’ to the #content selector in style.css.

The CSS File’s Header

Remember: It’s a good idea to back up a theme before you start modifying it.

The CSS file, style.css, must begin with a standardized header that contains information about the name of your theme, its version number, author details, and so on.

Figure 2

Figure 2. The default Kubrick theme is available in the WordPress Dashboard.

Figure 3

Figure 3. The header for the default Kubrick theme lists its name, version number, author, and description, as well as other details.

If you remove the header, then WordPress has no way of recognizing your theme, so it may not show up in the Presentation section of the Dashboard. If you edit the existing style.css, don’t remove that header.

Modify the Theme’s CSS File

Change the CSS rules to give your blog its own color scheme and layout, or just tinker with the fonts, as we’re doing in this article.

Left Justify Text

Fully justified text on web pages can make reading harder, and can also cause strange spacing between words. The first thing to check and change in any CSS file is text justification. Centered text is also not the best. In general, stick to left justified, also known as ragged right.

Figure 4

Figure 4. The default Kubrick theme fully justifies the text of blog posts. This can lead to some very strange spacings.

Open style.css in your text editor and search for the text ’text-align: justify;’. You should find it twice: at lines 253 and 500. The first instance justifies text in blog posts, while the second justifies text in comments. Change both to ’text-align: left;’.

Save the file and refresh your blog to see the difference. Your readers will thank you.

Figure 5

Figure 5. With left justified text the blobs of white in the middle of some lines have gone.

Increase Line-Height

Many themes don’t give the lines of text much room to breathe. Until you increase the line-height, you don't realize how cramped this makes things feel.

Use your text editor to search style.css for ’line-height’. You should find four instances at lines 56, 60, 81, and 149.

The first two are for posts. Try increasing each a little, say, by 0.2em to 1.6em for the first and 1.8em for the second. Save the file, refresh your blog, and look at the front page.

Figure 6

Figure 6. Additional line height eases the text so it feels a little more spacious and relaxed.

Change Text Color

At line 27, as part of the ’body’ rule, the text is set to #333. That’s not as dark as black (#000) and works quite well. But if you want the base text to be green, blue, or some other color, that’s the place to change it.

Try changing the color, then view the page to see what’s different. You’ll quickly see that not all text changes to the new color.

On my demo blog, for example, block quotes didn’t inherit the change. That’s because the blockquote selector sets a specific color at line 166.

Before you make dramatic color changes to any one element you need to work out an entire color scheme for the whole page, and then change everything to match.

Change Font

Similarly, you can change the font-family for the body selector, but you may find that other selectors later on specify their own fonts. Just search the CSS file for ’font-family’ to find the other instances.

Obviously, this article just scratches the surface of what you can do with a WordPress theme. But changing font size, family, and color are fairly straightforward modifications that are easy enough to undo again. That makes them a good entry point for getting to know a theme.