Unveiling Blog Design Makeover

I decided to do another fast forward in the Template Makeover Series. Take a look at the slide show to see where we started! The recent steps of the makeover have been recorded. We’ll update this post later for readers who want to tweak their own Blogger design. The html code included adding a gray background image in the side and post columns and a starry background for the content wrapper. The new header is defined as a background image to allow flexible shrinking of the stretch style columns in this Sand Dollar Template. The header has ample space for a much needed menu bar. The RSS feed and search box can also be moved later to the top of the header.

– Click dialog icon for captions

I used the colorblind filter tool to check for sufficient contrast for anyone who may be colorblind. The page looked fine since the purple images become dark blue against gray. Contrast of text is even more important for the visually impaired (who may put the monitor in black and white mode, creating shades). There is an excellent readibility tool that tests specific text and background colors for contrast. This section is in Spanish, but just select your colors, press the big gray (comprobar) button and you see your score versus the minimum requirement. Hey, great time to learn another language!

Results compare the brightness (brillo) and color differences between the two elements.
e.g. for black text on white you would get
Bien” class=”ico”> La diferencia en el brillo es 255. Debe ser superior a 125.
Bien” class=”ico”> La diferencia de color es 765. Debe ser superior a 500.

The tool flagged the purplish link color on the gray background, but after checking, the score was okay: brightness of 158 which is higher than the 125 minimum, color of 392 lower than 500. If I change it to a dark blue #341473 then the difference is 458, much better.

Next we’ll use the Blogger Fonts & Colors for text size and links — not as straightforward as you might think. Some sidebar definitions are in the template only and some were overridden in previous posts. If you move a widget like “Popular Post” from the sidebar to the bottom of the Posts column, it retains the sidebar fonts but takes on the larger post title size … More adventures!

Although this was a great learning experience, it further shows the importance of choosing your template wisely from the outset!

What do you think of the revisions? Any further suggestions? Is anyone really interested in seeing the html steps?

If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


  1. I don’t know why exactly, but on Firefox 3 the content is full width while the heading image is 1001 pixels wide, leaving an area of about 300×300 pixels empty on the right side of the heading image. To my eye it would be better that the heading image is as wide as the content is, whether it is full width or a set width. It might be because of FF3, which has done some weirdo tricks on me as well for no particular reason… And I am seriously thinking about going back to IE because of it. 🙂

  2. The backgrounds are always a bit of a worry. I use a massive background image on my blog which is not really the perfect way of doing it, but I just don’t like the tiling effect on some backgrounds. I tried to make the file size as small as possible so it wouldn’t slow things down too much, and divided edges of the background with some creative patch work. 😉 If anyone is interested, check the way my background is made by right clicking on it and selecting “view background image” or something similar depending on the browser.

  3. @Sebastyne – The background loads very fast, in fact the pale colors in the sidebars are what’s taking so long to ‘paint’ — if you page down quickly to the bottom you see the ‘top speakers’ without a pale background sitting directly on your cloth image. Later it paints in fine! Not a problem if visitor is reading at the top anyway!
    Thanks for your input.

Comments are closed.