BlogHarbor.Com Demo :: Customize the Look and Feel of Your Blog With CSS

Customize the Look and Feel of Your Blog With CSS

January 6, 2007 08:41PM (EST) | Permanent Link

A variety of Color Schemes are available which allow you to alter the look of your blog, its colors and fonts. If you're a do-it-yourself type, you'll eventually want to create your own custom "look" for your blog.

This article will skip the customary introduction to CSS and its concepts and dive right into making changes. I think you might find it more satisfying if you can start making changes to your blog's look by the end of the article.

For the technically inclined: This series of articles will cover editing the Style template of our template system. The Style template defines the CSS styles used by a blog.

Getting to the "Edit CSS" Page

Before you can start changing the look of your blog, you've got to be able to get to the page which allows you to do so. This page is called the Edit CSS page, and it allows you to define the CSS styles which determine the colors and fonts used in various elements of your blog.

Log into the Publisher Control Panel for your blog. You need to go to the Look and Feel section, which you can do by clicking on the Look and Feel tab of the navigation bar:

The Look and Feel section has three subsections: Colors, Layout and Templates. We want to go to the Templates page, so click on Templates in the Navigation Bar:

The Templates page lists all the templates for your blog. The templates are guides that tell our servers how to assemble your blog. You should be able to guess what some of the templates do just by their names; for example, you might have guessed (correctly) that the article template has got something to do with the way an article looks.

The template we're interested in is the style template. It appears second last in the list. We want to edit it, so click its Edit link.

You'll be taken to the Select Style page, which lets you choose one of the built-in styles or customize an existing one. This is the top portion of the page:

We're more interested in the bottom portion of the page, where you'll find a button marked Customize at the very bottom. Click this button.

You will now be on the Edit CSS page.

The Edit CSS Page

The Edit CSS page is split into three parts. Here's the top, which shows you what the current them is and allows you to select a new one. You can use our built-in themes as a springboard for your own theme designs.

The middle portion contains the Current CSS text box, which contains the definitions for the current theme. You can't change this text; you can only read and copy it.

At the bottom of the page is the Custom CSS text field. This is where you enter the information for customizing your blog's theme.

Now for the fun part: the customizing!

Customizing the Look of Your Articles

If you use a word processor or desktop publishing software often, you're familiar with styles, which let you define a whole set of properties for text all at once: font, size, bold/italic/underline, color and so on. CSS stands for "Cascading Style Sheets", and the "style" in CSS is similar to styles in word processors and desktop publishing software, but it's for web pages.

Many elements of BlogHarbor blogs have a style associated with them. The style determines the look of the element; change the style, and you change that look. That's exactly what we're going to do today.

In order to make such changes, you need to know which styles are associated with which elements. Since articles tend to make up the lion's share of blogs, we'll experiment with changes to the look of article elements; these should produce some dramatic changes.

Let's take a look at some articles on the main page of a blog. In the picture below, the blog is using the built-in "Simply Red" theme. The styles associated with various elements of an article are pointed out:

Let's take a closer look at the styles and their corresponding elements:

Style	Element
postDate	The date appears before any article or group of articles published on the same day. This style defines the look for that date.
articleTitle	Defines the look for the title of the article.
articleAuthor	Defines the look for the line that specifies the author of the article and when the article was published.
articleBody	Defines the look of the text making up the body of the article.
articleMore	With articles that make use of excerpts, only an excerpt of the article appears on the main page. The reader has to click the "more" link to read the whole article. This style defines the look of that "more" link.
articleStats	Defines the look of the statistics that list the number of comments and trackbacks the article received.

Changing the Article Body Font

Let's make some changes to those styles. The easiest way to do so is to copy the existing styles and then modify them.

You'll find all the styles for your blog in the Current CSS text box. If you scroll through this text box, you will find the definitions for the various styles that control the look of the elements of an article.

Let's take a look at the articleBody style. For a blog whose theme is currently "Simply Red", the style is defined by the following lines:

.articleBody {
   font-size: 11px;
   line-height: 150%;
   clear: both;
}

Suppose we want to change the typeface of the body text of articles to Georgia, 12 pixels high. The first step is to copy the style definition for articleBody from the Current CSS text box and paste it into the Custom CSS text box:

You make the changes within the Custom CSS box. The font-family property specifies a typeface for the style, and the font-size property specifies the size of the text. To specify 12-pixel Georgia, the style should be changed to this (changes are shown in bold red text):

.articleBody {
   font-family: Georgia;
   font-size: 12px;
   line-height: 150%;
   clear: both;
}

Once you have made these changes, click the Save CSS button near the bottom of the page to save them:

Here's what the blog looks like now:

Changing the Article Title Font

The articleTitle style defines the look of ther article title font. Changing it involves the same process as changing the article body font. First, copy the style from the Current CSS textbox. For a blog using the "Simply Red" theme, the articleTitle style looks like this:

.articleTitle {
    font-size: 12px;
    font-weight: bold;
    clear: both;
    line-height: 135%;
}

Let's say we want to change the typeface to 18 point Trebuchet MS bold. To do this, we set the font-family property to "Trebuchet MS" and the font-size property to "18px". The font-weight property is already bold, so we don't need to touch it. Here is the resulting style (changes are in bold red text):

.articleTitle {
    font-family: "Trebuchet MS";
    font-size: 18px;
    font-weight: bold;
    clear: both;
    line-height: 135%;
}

The Custom CSS text box should look something like the picture below.

Click the Save CSS button to view your changes...

And there you have it!

Try making similar changes to the other article styles.

Posted to:

How To