March 14, 2008

Styling Sections of your Blogger Blog with Borders and Backgrounds

Using borders and backgrounds for the main areas of your blog are simple techniques which can achieve dramatic stylistic effects.

Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar.

Most importantly, backgrounds and borders don't require you to have extensive knowledge and skill with creating and using images. Instead you can use simple colors, or generate tiled backgrounds to create a completely unique template for your blog.

Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

The border and background colors are varying shades of the same palette: subtle changes in color add depth to each element of this theme.

After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.

The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.

For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:

#main-wrapper {border: 3px solid #000000;
[other properties here]
}

This will reproduce a 3 pixel wide, solid black border, like this:

A section with a solid black border, three pixels wide

Using this example, you could also change the color, and width of the border, like this:

A section with a solid red border, five pixels wide

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:

Dottedborder: 3px dotted #000;

Dashedborder: 5px dashed green;

Doubleborder-style: double; border-color: blue;

Outsetborder-style: outset; border-color: #404040;

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).

Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.

The style properties for these sections in your template would probably look like this:

Header Section - #header-wrapper or #header-wrap

Main Posts Section - #main-wrapper, #main-wrap or #main

Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar

Footer Section - #footer-wrapper, #footer-wrap or #footer

If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!

Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.

Experiment with different styles!

Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.

Here are some useful resources to help you use borders and background images in your own Blogger template designs:

Find us on Facebook

Follow by Email

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog: