Friday, December 26, 2008

Using your own header

You wish to get rid of those boring default header? Easy, just upload your own pics. But needless to say, there are still some who doesn't do it very well, and they end up with a misaligned blog. Here's to do it step by step:

First of all, you must know the dimension of your pic (is it, 1200x550, 445x755, etc). Usually you can use Microsoft Paint find out.

Next, upload your pic. Go to Dashboard > Layout and click edit on the header, browse and locate the pic and upload it. Choose whether it will be placed 'Behind the Title and Description' or 'Instead of the Title and Description'. Choose 'behind' if you want to keep the blog title visible, or 'instead' to get it overlapped.

Now the real problem began. You get a misaligned look of the blog. Some have their pic surrounded by white box, others get it covering their post, the question is 'How to fix this catastrophe?"

The dimension of the image is very important (that is, the info you must have before uploading the pic). To align the pic correctly, go to Dashboard > Layout > Edit html. Find the tag:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
This is taken from the Minima Template (the first one on the list), your template values may be different. To align the header image correctly, change the width value, in this case its 660. If say I have an image that have the width of 735 pixels, I will change the values like this:
#header-wrapper {
width:735px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Save the template. Check your blog if the width already matches. If not, try changing the values again to suit the layout of your blog.

No comments: