Minima template header tutorial (Part 1)

If you want to quickly give your Blogger blog a distinctive look then the header section is a great place to start. Here’s how you go about customising the header of the Blogger Minima template…

Firstly, in order to customise the Minima header section you have to understand what’s it’s actually comprised of – here’s a quick rundown.

Default CSS header divisional elements of Minima template

1. #outer-wrapper – This is the divisional (div) container which surrounds your entire Blogger blog. As you’d expect, all of the header section components sit inside this #outer-wrapper.
2. #header-wrapper – This is the outermost div container in your Minima header section which is itself contained within the #outer-wrapper of your template. In the default setting the #header-wrapper has a 1px border around it.
3. #header – This is the 2nd div container in your header section and it sits inside the #header-wrapper. In the default minima Template setting this div also has a 1px border around it.
4. #header-inner – This div sits inside the #header container and has no border around it.

Div layout of Minima header section

So essentially the Blogger Minima template header section consists of a box within a box within a box within a box – we have a kind of Russian doll thing happening here ;)

CSS style rules of Minima template

1. #header h1 - If you chose to have your blog title display as text in the header then this style rule governs the style of that blog title text.
2. #header a – This style rule controls the appearance of any links you may have in your header section.
3. #header a:hover – This style rule controls what happens when people hover the cursor over a link in the header section.
4. #header .description – This CSS class governs the appearance of any blog description text you may have elected to include in the header section.
5. #header img – If you put a logo image in the header section then this rule controls how it will be displayed.

How to center header elements

The most common questions I get are: “How do I center my logo or blog description or blog title text…”

Probably the simplest way to center things using CSS is to set the element’s right and left margins to “auto.”

So if I wanted to center my blog logo I’d edit the Blogger Minima template to include:

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

If I wanted to center my blog description text I’d edit the Blogger Minima template to include:

#header .description {
margin-right: auto;
margin-left: auto;
}

You get the idea. Of course this won’t work if containing elements or the elements themselves have conflicting padding or text-align settings.

So if you find yourself having problems, backup your template and tinker with the relevant CSS until your div element centers. Start by removing any padding.

In the next part of this “Customise your header” series I’ll examine how to pull off some fancier stuff like multiple images and flash logos.