Blogger Hacks: Uploading Template Backgrounds

In my previous post, I stated that, if you wish to use images in your template's background, you'll need to host them elsewhere since there's no way to upload them directly to Blogger for this purpose. Reader Paul Sutherland quickly set me straight, outlining a clever trick I'd never thought of but which — on reflection — is at obvious as the nose on your face.

As we all know, Blogger allows you to upload images for use in individual posts. Paul's hack takes advantage of this ability. Here's how it's done:

1. Create a new post as usual.
2. Upload an image to your new post (click the Add Image button).
3. While still in post edit mode, switch to HTML view (click the Edit HTML tab).
4. Find the code for your image.
5. Copy the image address (it starts with http://).
6. Return to the main Post screen and discard the temporary post.
7. Open your template and paste the image address into the appropriate spot, as per the instructions in the previous post.
8. Save your template and publish.

Thanks Paul! Great tip.

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.

The Web's Most Useful Site?

I may have just stumbled across the Internet's most useful site — for webmasters at least. The Scrutinizer is a single page from which you can run dozens of different tests on the content of any page in your site. Available tests run the gamut from HTML and CSS validation and link popularity and rank checks to pings and traceroutes, plagiarism checks, site speed tests, and more.

Just enter your URL, select the test(s) you want, and click Go. Great resource.

Tips for Photoshop Memory Management

I feel like I've won the lottery! My laptop computer is the happy recipient of 1.5 GB of additional memory, bringing the total RAM available from 512 MB to 2 GB. I resorted to this move (reluctantly, and at considerable expense) after tiring of sluggish performance, overheating, and frequent crashing when using Photoshop and other memory-intensive applications. The hard drive churned like a demon constantly as Photoshop paged out what it couldn't handle in memory to the swap file. It was even worse with fractals. The screen refresh rate was slow and it took many hours to render complex images to disk because of limited memory.

The additional RAM has turned my humble little laptop into a powerhouse, virtually solving all my Photoshop performance issues overnight. If you are experiencing similar problems and you don't have the luxury of adding 2 GB of RAM, there are some things you can do to boost Photoshop's memory handling. For a good discussion of this topic, see the MacWorld article, Optimizing Photoshop CS2.

The tips provided in this article improved the situation considerably in the lengthy interim before I finally bit the bullet and sprang for more RAM. Among the things I learned was that I had been allocating too much memory to Photoshop. This caused long delays — and even crashing — when saving, as Windows and CS2 duked it out for the tiny amount of available RAM.