Saturday, August 23, 2008

Improving blogger template style - Sand Dollar

There is something what I don't like on my currently selected blogger template style - the Sand Dollar. It spans all available screen real estate from left to right. I would like to make it fixed-width and centered. To achieve this, I've changed the '#outer-wrapper' part of the template by adding 'width: 980px;'. This makes the rendered web page stay only 980 pixels wide which should be enough even on 1024 pixel wide common displays.
To center web page contents, just add 'margin: 0 auto;' to the same section. This means in english: top and bottom margins are zero, left and right margins are set by browser (which means content will be centered). You can find the specifications of the margin command here.

The entire outer-wrapper section now looks like this:

#outer-wrapper {
font:$bodyfont;
width: 980px;
margin: 0 auto;
}

No comments: