Category: Blogger CSS

Jul 08 2009

Managing Bloggers CSS

CSS is short for Cascading Style Sheet and the CSS code is responsible for controlling the look and feel of almost every web site, including blogger.

Blogger however uses a more advanced type of style sheet than most web sites. The CSS is included in the head (the head is the space between the <head> and </head> tags) of each page in two parts.
The first part is the Variable definitions and looks like this:

/* Variable definitions
====================

<variable name=”mainBgColor” description=”Main Background Color” type=”color” default=”#fff” value=”#ffffff”>

This line of code tells the style sheet what color to make the Main Background. The colors are defined in hex values, where FFFFFF is white and 000000 is black. And any combination between FFF and 000 will be some color. For a more details on HTML color code you can check out w3schools HTML color names and code.

The second part of the blogger css is the actual css code and it looks like this:

*/
body {
background:#123;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}


By adding the css code to the head of the page, it allows blogger templates to easily be maintained and edited.

If you take a look at the blogger HTML located at Edit HTML tab under the Layout tab you will see that most of the HTML is the CSS. At this point you can begin to make small incremental changes. But before you make any changes, back up your current template and save it on your computer. In the event you bugger things up you can fix it using the blogger restore feature by uploading the template you download before you started! You may also want to keep incremental template backups if you are planning on making a more than just a few simple changes.

Another more advanced option to having the CSS in the head of the page, is to have the css in it’s own file and let the page pull in the file remotely. This is more the standard for your typical web site. The advantages to having a remote css file is that it is easier to manage the css and makes your template much smaller making the template easier to manage. The down side is that you have to have your own web site to host the css file since blogger does not offer this option. To implement this option all you need to do is to remove all the css code from your template and add the following line in the head of your template.

<link rel=”stylesheet” type=”text/css” href=”http://YourWebSite.com/YourCssFile.css” />

This line will tell the browser to pull in your css file and use it to display the page. To build the css file you can use a css editor and paste in the second part of the css code from your template. Do not include the Variable definitions in your css file and you will need to replace any value that starts with a $ with the actual value. For example:

a:link {
color: $mainLinkColor;
}

You will need to change the $mainLinkColor with the actual value i.e. #0000A0 for light blue

Next you will want to remove both parts of the css code (the variable definitions and the actual css code) from your template.

Make any additional changes you want and save the css file back to your web server. Now when you want to make a change to the look and feel of your blog you can do it without having to edit your template.

Cascading Style Sheet are very powerful and can be very complex. At times you may wounder why a change you made is not taking effect. Blogger may add in additional external css code when you publish your blog. If you want a quick fix you can use inline css which will cut off most other styles from controlling the element you want to change. For example the if you had paragraph that you wanted to change you could use something like this:

<p style=”background: blue”>; color: white;”>A royal blue background and white font color with inline CSS</p>

A royal blue background and white font color with inline CSS

If you want to make a few small changes or redefine your blog, CSS will do the trick. You may need to do a little homework, but once you get started you will find the task is not too difficult to customize your blog.

WordPress Themes