How to add color behind your sidebar wrappers:

Today we’re going to be adding colors behind the text on our blog as seen here. It’s a nice way to draw attention and give emphasis to your blog content. 

NOTE: This tutorial works with BLogger’s ’06 minima template.

1.To get started, locate this section of this code in the <:b:skin>: section.

#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 */
}

Note:If you cannot find this exact code on your template, search #sidebar-wrapperinstead.

2.To put a color on your sidebar, simply add this line colored inred. You can change the hex color values of your choice. I just used #ffffcc as an example.

#sidebar -wrapper {
background: #ffffcc;
margin -$endSide: 2%;
width: 25%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

3.To put a color behind your main wrapper, simply add the same line of code under the main wrapper section too!

Here is a nice color chart you can use color codes from.

 

Have fun!

NOTE: you can play around with blogger’s new template designer and also getcolor behind your sidebars there. See Below:

2 Comments

  1. This Blogger FAQs are helpful. There’s also a lot of work invelvod. I wanted to add a tab below my header (the photo with the blog title and description on it). This is where I can add tabs according to topic such as HOME ABOUT RECIPES, etc. People click their mouse on it. I couldn’t find the tutorial for this.

    • Hi John, I will work on doing a tutorial on how to add pages to your blog. For now you can go to the ‘Pages’ tab and click on ‘New page’. Add whatever pages you want and make show next to ‘Show pages as’ it says ‘Top Tabs’. Hope this helps:) –Becky

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>