Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Tuesday, August 15, 2006

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.

14 comments:

Pamela J Weatherill said...

Great site - useful info. Thanks.

Paul Sutherland said...

Thanks for your useful tips, Pam. Actually you can upload your background image to Blogger. Just create a new post as usual and upload an image there. In html mode, you will see the code for your image placement appear in the text box. Simply cut and copy the http://etc bit that shows the address for the image. You can then discard the post and paste the image location into the template within the code as you specify in your blog.

Pam said...

Great tip, Paul. I am going to post an update on this, quoting your instructions exactly, so everyone will be sure to see it.

Thanks!

thebookmann said...

Pam I not too sure if you are aware of how your new page looks in explorer, the side bar is below the post.

thebookmann

Pam said...

Yes, I just realized yesterday that I'm getting wrapping at 1024x768. Working to straighten it out. Bloody IE.

Thanks for the heads-up.

Craftybernie said...

Hi Pam - I like the new look. Very fresh. Nothing quite like a bit of colour! Best wishes...Bernie

Pam said...

Hi Bernie. Thanks!

John Maddon said...

Yo Pam, great work on the 3 column site. I have been struggling for awhile on a new blogger site that I am making and I wanted 3 columns but all my work failed. Then I stumbled upon your great site, and I was relived to find your useful code! Thank-you! I also wanted to let you know that I put your site in my favorites so I can check up for more tips later on. The world needs more bloggers like you who can find these hacks. Thank-you again.

Pam said...

Thanks for the kind words folks. I especially appreciate the links from your blogs. (And I'll get that link back to you fixed asap, Jay!)

Anonymous said...

Great look...

Pam said...

Thanks Q :-)

Kristine said...

Hi Pam. It's good to know that there are some peeps like you who like to help other bloggers with their blog's template. I really appreciate your posts. It's worth it and it helped me succeed in changing my blogger getup. When it comes to html problems, I can count this blog. :) More power & God Bless.

Pam said...

Thanks so much Dana. Glad to help.

Anonymous said...

Hi Pam,

I made a blog on Spam Emails hoping that It will prevent others from being a victim of Spammers. I want to have a background with my own graphic design but I don't know exactly where to insert the image url so that it will appear as my background.Pls Advice.

Thank you.