Template Background Hacks and Generator Tools

Random Bytes has had a facelift. For those who have been here before, the new look may be a bit of a surprise. If you popped by yesterday afternoon, my apologies. This blog's look and feel was evolving minute by minute, as I experimented with colours and backgrounds.

I think I've got something I like now, though, so it shouldn't change too much more. I felt it was time for a fresh look, especially since the old look and feel has been propagated through the blogosphere with the growing popularity of my three-column template.

For the new design, I wanted to focus on simplicity and readability. The first priority was eliminating the background mouse graphic, which had cluttered up the design and drawn some negative feedback for slowing page loads.

Creating Background Colours and Patterns

In choosing a color palette, I opted for a monochrome colour scheme, staying with green to tie into WebLens (albeit subtlly). I wanted the blog contents to display against a background colour or pattern, and found Rails2U's Background Image Maker indispensable. This useful tool allows you to generate any size background rectangles for tiling. You can specify desired color by dragging sliders or entering a hex code. The tool allows you to choose between stripes, dots, and gradients, and supports full PNG transparency.

There are also plenty of free online sources of background rectangles for tiling, such as the collection at GRSites. (If you use these, be careful of placing text directly against a busy background. Place a white or coloured background behind the text first, as I have done here.)

Adding Backgrounds to Your Blog

You can use the images produced by the tools mentioned above as your blog's main background as I have done here, or place them behind various CSS elements, as you seen in the sidebars and post titles of this blog. For this re-design, I finally settled on a striped green background for the main page and a subtle green gradient to use for emphasis and visual interest.

To add a background pattern to your blog

1. Open your template and locate the CSS for the body tag.
2. Between the opening { and closing } parentheses, add a background declaration pointing to where the background image is hosted, as in
   background: url("http://your-domain-and-filename.png") repeat;
   (Note that you will need to host these images elsewhere, as you can't upload them to Blogger.)

The repeat attribute controls tiling, telling Blogger to replicate the graphic both horizontally and vertically, as I have done in the main background here. To repeat only horizontally, as in this blog's post headings, change the repeat attribute to repeat-x. (For vertical repeats, it would be repeat-y.)

To add background tiles to post headings

1. Open your template and locate your blog's CSS post declaration.
2. Add the above code, but with repeat-x. Note: you may need to move the opening post div tag above the date header, to get the background behind everything. Depends on the effect you want.

To add background tiles to sidebar elements

In this blog, I could have placed a background gradient or texture behind the entire sidebar, but I wanted to use them to emphasize certain sidebar contents. To do this:

1. Create a style specifying the desired formatting, such as
   .BlueGradient { background:url("http://your-
   domain-and-filename.png") repeat-x; padding-top:2px;}
2. In the HTML, locate each set of sidebar elements you wish to emphasize, and enclose each within your new div, as in this example:
   
   <div class="BlueGradient ">
   <h2>Archives</h2>
   <ul class="archive-list">
   <BloggerArchives>
   <li>
   <a href="<$BlogArchiveURL$>">
   <$BlogArchiveName$>
   </a></li>
   <BloggerArchives>
   </ul>
   </div>
3. Save your changes and view your blog. You may need to adjust margins or padding to get the effect you desire.

For more on adding backgrounds to your blog, see this earlier post. Hope this information helps, and let me know what you think of the new design.