How to find the width of your blog Header, sidebar and main column

Got a question from a blog reader about how to go about finding the width of the blog Header, so I thought I might as well make a post to let more people know about it.

To get the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the relevant blog, click LAYOUT, then click EDIT TEMPLATE. This will open the template editor window. Search through the templates for the following:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

These codes are from the template of this blog. The first block of codes tells me that the width of the Header is 750 pixels. The second block says the main column width is 400 pixels. The last two block of codes tells me that both the sidebars are of width 150 pixels.

What is a Linkbar?

Linkbar is just a menu of links at the top of your blog, usually near your Blog Title. Come to think of it, it's better if I just call it Menubar. I don't know why I call it Linkbar in the first place, but I'll just stick to that name because I've used it so many times in my post and my templates.

Below are some example pictures of where the Linkbar is in the blog page, and how you can add links to the Linkbar in the Settings page.

Moving the 'Blog Title & Description' Location

This guide is meant to be used with the Ourblogtemplates.com designs.

You may see that you have to move the location of your Blog Title & Description (BTD), relative to the header borders or image. For example, if you're using a header image smaller that what was designed for the template and the BTD doesn't appear because it's way down at the bottom of the header border, you then have to move the BTD up. To do this, search for this code:

#header h1 {
display: block;
margin: 0px 0px 0px 0px;
padding: 130px 30px 0px 20px;
color: $blogTitleColor;
font: $blogTitleFont;
text-align: left;
}

To move the BTD up or down, change the number in red accordingly. The smaller the number, the higher the BTD location is on the header, relative to its borders and/or header image.

This is just a basic instruction to play around with the BTD location. If you're more familiar with CSS, than this obviously is just a piece of cake :)