Oct 3, 2008

Add Color To Sidebar Background

The easiest Blogger template to modify and style to fit your needs is called Minima. It comes in a few basic colors but the sidebar, headers, footer and main blog area are all the same color. A simple modification you can do to your template to make it look less like all the other garden blogs using Minima is to add a different color to your sidebar. Say you're using the white Minima template but you'd like your sidebar to have an ochre color (or any color you'd like) to make it stand out. You can do achieve this in two simple steps.

Step #1: Backup & Save
The first thing you should always do when modifying your template is to download a copy of your template in the event that anything should go wrong. If you do something that you don't like or know how to fix you can always upload your template and go back to how you originally were. To do this go to Layout> Edit HTML then click Download Full Template. My favorite option is to create a test blog where you can perform these modifications first and then do them to your garden blog once you feel comfortable enough with the process. If you do something you can't recover from you can always delete your test blog and start over, an option that isn't really available with your real garden blog.

Step #2: Locate Sidebar
In the same page where you downloaded your template scroll down until you find this section of your blogger template:

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


The only thing we need to add some text to dictate what color the background of the sidebar should be displayed as.

Step #2: Add Color
As I said above in this example the background color is white but I want an ochre color for my sidebar so I just add the section in red:

#sidebar-wrapper {
width: 220px;
background: #DDDD99;
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 */
}

Hit preview and if you like what you see go back and save your template and your done. If like me little things bother you then you may notice that the text in your sidebar is really close to the edge of the color you added. When your sidebar and background color are the same you don't see this but when you add a color it becomes obvious and a little annoying. All we have to do is add another line that dictates the padding between the text and the edges where the color begins and ends. Again, find the same section of your template by scrolling down and add the section in red:

#sidebar-wrapper {
width: 220px;
background: #DDDD99;
padding: 6px;
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 */
}


Hit preview and if you're happy with this hit save. By adding padding: 6px; we've given the text in the sidebar six pixels of breathing room from the edge of the colors. You can add more if you like but I find this to be a good starting point.

Choosing colors
Like I said above you can add whatever color you like I chose ochre just as an example. There is a lot of information available on picking colors or places where you can get color codes. So as not to confuse you I'll make a separate post on that and just show you a simple way I like to find color codes. This is where having a test blog where you can experiment comes in handy. In your test blog go to Layout>Fonts and Colors and play around with the color chart. There you'll find the colors used in your template along with suggestions for colors that match your blog. Experiment with the Page Background Color and find a color you like from the suggested colors or from the color chart. Keep in mind that a color that looks garish as your whole background color may look pretty good just as the sidebar color, just like in the garden what we're doing is picking an accent color. As you play around with the colors of your page background write down the color hex code of colors you do like. For example #ffdfbf is pink, #cc6600 is a orange.

1 comment:

  1. Thank a lot....i've tried your this.. it's really worked!!!! TQ so much.....

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.