Aligning the Header Image

In a previous post I talked about how the Blogger’s header image gets resized depending on the size of the image, the available space in the header and the configuration of the header widget. In this one, I will answer another question I get so often from my readers; “How can I center the header image?" This handy tip will help you not only to center align the header image, but also to right align it, if required.

First add the header image as you would normally do it. Then, to center Blogger’s header image, simply add the following CSS snippet to your template’s skin. (Read this to learn more about the Blogger template structure)

For placement “Behind title and description” add:

#header-inner {
margin-left: auto;
margin-right: auto;
}

For placement “Instead of title and description” add:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

You can add it anywhere inside the skin. But, to keep all header related styles close apart, add it after a style such as the #header-wrapper or #header.

To right align the header image, simply remove the “margin-right: auto;” statement from the above block.

This trick has been tested on Denim, Denim Stretch, Rounders and Scribe templates. (Minima has it by default). But it should work on all other default Blogger templates. If it doesn’t work on a particular template, please let me know.

Variable for File Host Location

This post explains how you can add a template variable to define a third party file host location. The file host defined here will be used to host all the custom images provided free with The Blogger Guide's various popular HOWTOs such as the three column and wider two column template conversions.

Go to Layout -> Edit HTML mode and add the variable as described below.

The template variable we add here is of type automatic. To incorporate it, simply add the code shown in red below, right to the end of your template's Variable declaration section. (Usually, the last variable on a default Blogger template is the endSide variable)

<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
<Variable name="imageHost" description="Image Host Location"
type="automatic" default="http://idssl.fileave.com/tbg"
value="http://idssl.fileave.com/tbg">

*/

To learn more about Blogger template variables, read the article shown in Related Posts below.

Related Posts

• Blogger Template Variables

Screen Resolution and Template Size

What is the best screen resolution to target a web site template design? This is an important question for those who are interested in designing templates and also who customize templates. That is because the screen resolution is a determining factor when it comes to what your website’s visitors see and don’t see.

Firstly, what is screen resolution? In simple terms, it is the number of pixels (or dots) that make up your entire screen. It is usually expressed as the number of pixels horizontal in to number of pixels vertical. For example, a screen resolution of 1024 x 768 means that a screen can display 1024 pixels across and 768 pixels down. The total number of dots that make up your entire monitor is the multiplication of those two numbers.

It is difficult to pick one right resolution to target your template’s size. Monitors used by Internet users around the world range in resolutions from 640 x 480 (very rare now) to 1600 x 1200 or higher. Further, as technology advances and hardware becomes cheaper, more and more people will move in to high resolution monitors. According to w3schools.com, in January 2009, 96% of its visitors had resolutions of 1024 x 768 or higher. The flip side is that 4% still has 800 x 600 resolutions.

Some time ago, websites were designed targeting an 800 x 600 resolution. But now that the share of that resolution has gone down significantly, the current practice is to optimize a website design for 1024 x 768, a fact even recommended by Jakob Nielsen, the web usability guru, back in 2006.

So what’s the use of this knowledge for the regular blogger? Well, if you want to use a custom third party template or go for a modification of the existing template by adding a new column or increasing its width, check whether the resulting template fits within the 1024 x 768 resolution. You should worry more about the horizontal resolution than the vertical one. Generally, if your custom or modified template has a width of less than 1000 pixels then you can safely assume that a very large percentage of your readers can see the entire width your site without having to scroll horizontally.