51 Styling Sections of your Blogger Blog with Borders and Backgrounds March 14, 2008 /

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:

Pro Blog Design

This is this excellent design exemplifies the theme of this post perfectly. Thick borders and simple backgrounds immediately convey which areas are important.

Mimbo Pro

Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

Options Theme (By Justin Tadlock)

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:

Dotted
border: 3px dotted #000;

Dashed
border: 5px dashed green;

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

Outset
border-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:

#sidebar-wrapper {

background: #ffcc00;

[other style properties here]

}

To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:

#sidebar-wrapper {

background: url(http://imagehost.com/yourimage.jpg);

[other style properties here]

}

You can also combine color and image background properties, like this:

#sidebar-wrapper {

background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;

[other style properties here]

}

The example above would feature an image at the top left of the sidebar, while all other space would be yellow.

You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.

By combining

A wide grey border

With...

A Paler Grey Background

You can create an effect like this:

A stylish section for your blog!
border: 5px solid #666666;
background: #333333;

You could even add a background image, repeating across the whole section, like this:

Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

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:

• CSS Border Properties: Learn more about using borders
• Web Color Calculator: Find the hex values of your favorite colors
• Color Blend: Find the perfect color scheme for your blog design
• Stripe Generator: Create striped backgrounds
• Squidfingers: My favorite resource for tiling image backgrounds

I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments below.