Blogware comes with a number of built-in "themes" which define the font and color scheme of your blog. Some of them are quite nice. Others don't really appeal to me.
If you're a do-it-yourself type of person who also has a Blogware blog, you'll eventually want to create your own custom "look" for your blog. That's what the next few Blogware Mechanic articles will be about. By the end of this series, you should be quite comfortable with making changes to the look and feel of your blog by making changes to the style template.
In this first article, I'm going to skip the customary introduction to CSS and its concepts and dive right into making changes. Later on, I'll step back and cover CSS in a little more detail, but for now, 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
Blogware's 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 Blogware 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 Blogware's 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 Blogware 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. Over the next few articles, we'll cover the styles associated with several elements of Blogware blogs and show you how they can be changed.
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;
}
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;
}
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.