Customize your Blogger Template for a Cleaner Look

Well dear readers, here's a new one for ya.

One of my readers, Aaron Delp who's a fellow geek, has asked me to give him a few tips in the comments on how to change his Blogger layout in order to make it similar to Wowalone's new look. Since there's quite a bit to explain, especially since I'm trying to make sure non-techies will understand it, he gave me the great idea to write a how-to article instead of cramming all of it in the comments where it would probably be lost to many visitors.

I realize that not everyone is a programming guru so I will try to make this easy to follow. Personally I am a web developer though I mostly do server-side programming. In the past I have worked as both programmer and designer and I am very proficient in HTML and CSS but I'm not very good at actual graphic design.

Before I start, I will make a disclaimer. I started modifying the Minima Black default Blogger template. I don't remember if that's THE template you start out with but it's the most common dark-themed one that you can pick. One other thing is that even though I will try to make this as accessible as possible, nothing beats actual knowledge of CSS. A CSS tutorial is beyond the scope of this article but if you are interested in learning a bit of CSS, Google is your friend. Finally, don't blame me if you mess up your template. Below, you will read about how to make a backup copy of your existing template.

You should also be aware that Blogger has a guide-of-sorts for modifying the layout, here. I suggest you read through that carefully. Also, I'm sure others have posted guides out there and I haven't bothered to look. What I will show you here is how to specifically get where Wowalone is currently in terms of layout and design. There are doubtless many other ways in which to customize the layout but I haven't gone so far yet and I'm not certain I will.

While modifying the Blogger template, you will be working under Layout > Edit HTML. For this guide, I will stay away from the HTML elements and focus only on the CSS.

The first thing you should do is to save your existing template by using the "Download Full Template" link. The template is saved as a text file with an .xml extension. You can restore it at any time you wish. In fact, as you work, I recommend you make regular backups with the various states through which the layout evolves.

The Edit HTML page has several links and buttons but also a large area for editing the HTML/CSS text directly. I haven't used all the options yet so I will talk only about the ones I have.

There are 3 buttons below the text area:

• Clear Edits - clears any edits you have performed since the last time you saved the template. Useful if you messed up something and don't know where, but haven't saved yet, or if you simply wish to discard the latest changes.
• Preview - a very useful function that lets you visualize how the blog will look, before saving any changes. It basically creates a snapshot of the site that you can't interact with. Beware that you won't see the comments section in the preview window. If you need to see how the comments look, you will have to actually save the template and open the blog itself.
• Save Template - this saves any changes made to the template.

There's a checkbox above the text area called "Expand Widget Templates". This is a very interesting function that I have just discovered and essentially allows you to customize the "widgets" that appear on your page (such as categories, pages of interest, ads, etc.) in great detail. Since I haven't attempted any of that yet, I won't go into it for now.

"Revert widgets template to default" I'm assuming will roll back any changes you have made to those widgets.

"Revert to Classic Template" will revert to Blogger's original template, the one that you started from.

"View Classic Template" brings up a window with the HTML/CSS for the original template. Useful for comparing changes.

Moving on to the actual coding, you should know how to add comments to your CSS code. A comment is a piece of text that won't be executed by the parser, i.e. it will be ignored. Comments in CSS start with /* and end with */. Examples:

/* one line comment */

/*
comment spanning several lines
*/

The reason I'm bringing up comments is because I advise you to put a comment at the end of every line of code that you've changed or added. This way, you will always know that it was you who made that change and it's very easy to find those changes.

To edit the code, we will focus only on the stuff between the "<b:skin><![CDATA[" and "]]></b:skin>" tags. In fact, this is a big old piece of XML data containing the CSS code that we need to modify but we don't need to get into too much detail at this point.

Before the CSS starts, there are a few XML variable declarations that you will want to modify. They come in 3 flavors and look like this:

For various colors:

<Variable name="bgcolor" description="Page Background Color" type="color" default="#000" value="#111111">

For various fonts:

<Variable name="bodyfont" description="Text Font" type="font" default="normal normal 105% 'Lucida Grande',Helvetica,Arial,Sans-serif" value="normal normal 105% 'Lucida Grande',Helvetica,Arial,Sans-serif">

For positioning (you don't need to fiddle with these):

<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" value="left">

These are used as global variables for often-used values inside the CSS. If you want, you can create your own variables but then we are moving into XML territory and I'm trying to keep this simple. Basically this section is where you can easily change colors and fonts for the most important page elements. You will notice, for example, that for this variable

<Variable name="bgcolor" description="Page Background Color" type="color" default="#000" value="#111111">

I have changed the initial value of the site's backgorund color to #111111 (very dark grey). Though I haven't commented under this section, I know the original value was #000 (same as #000000) (black) because the attribute default="#000" tells me so. I won't go into more detail regarding how color values are formed but W3CSchools has a nice primer on the subject.

I've also made changes to the following color variables:

pale yellow for links:

<Variable name="linkcolor" description="Link Color" type="color" default="#9ad" value="#FFD363">

no change here since I'm not using a text for the blog title:

<Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#ccc" value="#d8e2ff">

no change here since I'm not using a text blog description:

<Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#777" value="#99aadd">

light green for post titles:

<Variable name="titlecolor" description="Post Title Color" type="color" default="#ad9" value="#66dd99">

a very light grey (almost white) for the main titles in the sidebar; also sets the color for the timestamp of each post:

<Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#777" value="#eeeeee">

a standard grey for visited links:

<Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#a7a" value="#cccccc">

For the font variables unfortunately I haven't kept the default values. Essentially what I did was change the default font to Lucida Grande and I also played around with font sizes until I got something that felt right.

I like to use sans-serif fonts because I feel they are more legible on the screen, as opposed to printed media where serif fonts are usually used.

You should know that you can't just use any font that's installed on your computer. If other computers don't have that font installed, their browsers won't be able to display it and the site will look different than you intended. A list of "browser safe" fonts can be found here.

You should specify more than one font ('Lucida Grande',Helvetica,Arial,Sans-serif) in case the browser can't display your first choice for some reason. It will move to the next font on the list. If it reaches the end and still can't find a similar font, it will try to use the closest matching sans-serif font (in this example).

Some of my changes include the following:

<Variable name="bodyfont" description="Text Font" type="font" default="normal normal 105% 'Lucida Grande',Helvetica,Arial,Sans-serif" value="normal normal 105% 'Lucida Grande',Helvetica,Arial,Sans-serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 78% 'Lucida Grande',Helvetica,Arial,Sans-serif" value="normal bold 78% 'Lucida Grande',Helvetica,Arial,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 200% 'Lucida Grande',Helvetica,Arial,Sans-serif" value="normal bold 200% 'Lucida Grande',Helvetica,Arial,Sans-serif">

I have used Lucida Grande as my first choice because it's a very delicate and pleasant font. For the main article body I've increased the font size slightly so it's more readable.

Breaking this variable apart, here's what the values of the "value" or "default" attributes represent:

value="normal bold 200% 'Lucida Grande',Helvetica,Arial,Sans-serif"

The "normal" refers to whether the text is italicized or not. Values can be "normal" or "italic".
The "bold" refers to whether the text is italicized or not. Values can be "normal" or "bold".
The "'Lucida Grande',Helvetica,Arial,Sans-serif" refers to the font style. Make sure you close single and double quotes properly, otherwise you could have some nasty surprizes. For font names formed from 2 words such as Lucida Grande you need to put them inside single quotes: 'Lucida Grande'.
The 105% and 78% give the size of the font relative to its default size. Font sizes can be specified in different ways. Blogger uses the "em" size consistently and this is what I also used. "em" units are relative to the size of the font used. "px" units are relative to the display (usually your screen).

Now that I have exhausted the color, font and positioning variables, let me move on to the actual CSS code. I'll move through this in the order the code is typed rather than the order I made the changes.

#header-wrapper {
width:660px;
margin:0 auto 15px; /* changed by me */
/*border:1px solid $bordercolor;*/ /* changed by me */
}

This refers to the box that goes around the blog title. In my case I don't have a title but instead I'm using an image. I wanted to get rid of the border around the image so I commented this line out, essentially removing it from the code:

/*border:1px solid $bordercolor;*/ /* changed by me */

I also increased the margin between the header image and article box slightly from about 10px to 15px:

margin:0 auto 15px; /* changed by me */

The next 3 pieces go together:

#outer-wrapper {
width: 860px; /* changed by me */
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px; /* changed by me */
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background-color:#191919; /* added by me */
padding:0 10px 0 10px; /* added by me */
border:1px solid #222; /* added by me */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

You can visualize these pieces as 3 boxes.
#main-wrapper is the box containing the main article column.
#sidebar-wrapper is the box containing the right sidebar.
#outer-wrapper is the box that contains both.

I kept the sidebar the way it was but increased BOTH the main and outer wrappers by 200 pixels. Remember, if you make changes to #main-wrapper, you also need to make a corresponding change in #outer-wrapper. When the inner box expands, the outer containing box must also expand. For the future I'm also considering expanding the #header-wrapper to the same 860px as #outer-wrapper but I will only do that if I create a bigger header image.

Notice these lines:

background-color:#191919; /* added by me */
padding:0 10px 0 10px; /* added by me */
border:1px solid #222; /* added by me */

These were added by me and allowed me to make the article column (#main-wrapper) stand out by adding a lighter grey background (background-color:#191919;), a 10-pixel padding on the left and right (padding:0 10px 0 10px;) and a subtle border around the whole thing (border:1px solid #222;). Note: "padding:0 10px 0 10px;" is same as "padding:0 10px;".

I added the following piece of code under the Headings section:

#sidebar h2 { margin-top:0; background-color:#191919; padding:5px; border:1px solid #222; } /* added by me*/

This handles how the titles for "Categories" and the other widgets is displayed. It has the same border and background as the main column but with a 5px padding. I also zeroed out the top margin so that the top-most title aligns with the main column.

To change how quoted text is displayed I added the following lines in the corresponding section, which adds a dotted border, a grey background and some padding:

.post-body blockquote {
line-height:1.3em;
padding:10px; /* added by me */
border:1px dotted #333; /* added by me */
background-color:#222; /* added by me */
}

Under the Comments section I made more extensive changes:

#comments-block .comment-author {
margin:.5em 0;
font-size: 1em; /* added by me */
}

#comments-block .comment-author a{
font-weight: bold; /* added by me */
font-size: 1.3em; /* added by me */
} /* added by me */

#comments-block .comment-body {
margin:.25em 0 0;
padding:10px; /* added by me */
border:1px dotted #333; /* added by me */
background-color:#222; /* added by me */
}

#comments-block .comment-footer {
/* margin:-.25em 0 2em; */
margin:0 0 2em; /* added by me */
font-size:.7em; /* added by me */
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;

Essentially I separated each comment by putting it inside its own box with a lighter grey background and a dotted border this time. This part does it:

padding:10px; /* added by me */
border:1px dotted #333; /* added by me */
background-color:#222; /* added by me */

I also added this bit:

#comments-block .comment-author a { ...

which makes the comment's author stand up more. This code will apply only to authors names in the form of a hyperlink. Anonymous users and such won't be highlighted in this manner.

Moving on, I made the sidebar normal text a bit smaller by adding this line:

.sidebar span { font-size:.8em; } /* added by me */

It took me a while to figure out that the thicker links in the sidebar pointing to other sites of interest are controlled thus:

.blog-title a { font-size:.9em; } /* added by me */

What I did there was to make them smaller than the default.

So here I am at the end of this tutorial. I hope you got at least a small idea of how to modify your layout. I will admit that some of my additions aren't perhaps the most brilliant way to add CSS but they seem to work and I will leave it at that. Remember, you need at least some knowledge of CSS and HTML but it's very easy to experiment as long as you save your initial layout and use the Preview function. Then, if you don't like the changes you made, you can always discard them and try again.

You can also try to use my layout if you like it but you will learn more by branching out on your own and coming up with your own designs. If you do, please shoot me a comment so I can check out your creation.

I have probably omitted a few things here and there and if I have, please point them out in the comments section. Now boldly go forth and modify!