Background Colour of TicTac Template

This guide shows you how to change the background color of the Blog Posts or Sidebar in a TicTac Template. Changing the background color of a Blogger template is not difficult. You can follow our guide at Background Image for Blogger Template which discusses as well the way to add a background color to the entire Blog, Blog Posts or Sidebar. While this works in most of the Blogger templates, you will not see a change in others. This is because what you see as a background in some templates are actually the result of a background image created by the designer of the template.

One good example is the TicTac Template. What you see as a white background and a grey sidebar is due to this image located in your template:-

#outer-wrapper { background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y; }

If you enter that image URL into a browser, this is the picture you see that is repeated vertically.



To have a different background color to the Blog Posts, you would have to edit this image. Save this image into your computer. Open an image editor software - Photoshop, Paintshop Pro, or download free ones from the net. Open the image file, select the white area and use the Paint Bucket tool to change it to another color.



After editing the image, upload it onto a free image server. You can use free hosts like Google Page Creator and Google Groups or look up our rather comprehensive list of free Image Hosts and File Hosting Services in the article on Manage Blogger Image Storage Space. Find a site that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.

Next, go back to the template code at Template -> Edit HTML. Look for this:-

#outer-wrapper { width: 847px; margin: 0px auto 0; text-align: left; font: $bodyfont; background: url(http://www.blogblog.com/tictac/tile.gif) repeat-y; }

Change the background image url to the new IMAGE URL that you have just uploaded.

#outer-wrapper { width: 847px; margin: 0px auto 0; text-align: left; font: $bodyfont; background: url(IMAGE URL) repeat-y; }

Preview the Template. From a white background like this:-



You will now see a colored Blog Posts background in the TicTac Template like this:-



Should you want to change the TicTac sidebar color, use the same method but select instead the grey portion to the right side of the image. Change that color using an image editor and upload it onto a free server. Insert this new IMAGE URL into the template as shown above.

If you are satisfied with the new background color of the TicTac Template, save the template and refresh your Blog.

© Tricks for New Bloggers