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.

565 with a Wider Post Area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the 565 template by a desired amount. If you need to upload images/embed videos etc that are wider than the default width of the post column, this modification will give you more room in your posts.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main-wrapper CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 660 by adding 200 to the default width of 460 pixels.

#main-wrapper {
width: 660px;
...
}

3) Increase the width of the outer wrapper to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Expand its width property by the same amount of pixels selected in step (1)

#outer-wrapper {
width: 744px;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

Header Image in Widened Blogs

This is a question I get from time to time from the people who have widened their blog by following one of the three column conversion or wider post column guides. This post is an answer to that question.

The header image is uploaded via the Header element in the Layouts -> Page Elements section.


The available size for this image depends on the size of you header. For example, in the Minima template, it is the width of the #header-wrapper CSS selector. If the image you upload is smaller than this maximum available size, Blogger will upload it as it is. But if the image you upload has a higher width than the available size, Blogger's action will depend on whether you've selected the Shrink to fit option in the Configure Header dialog box. If that option is selected, the width of the image you upload will be resized to the maximum possible size. (The height of the image will also be adjusted to the same scale to avoid distortion. But the reference dimension is the width). If Shrink to fit is not selected, the image will be uploaded as it is despite it being bigger.

When you customize your blog either by adding a third column or by expanding the size of the post area, the header size will also be widened to match the new blog width. Therefore, you will have to re-upload the header image. If the current header image is smaller than the new blog width after the expansion, then you have to widen the header image as well. For that you need to use some image processing software such as Photoshop. If, however, the image you uploaded had an actual width that is bigger than the new expanded header size, a simple re-uploading will do.

Rounders 2 with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Rounders 2 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 2 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

• Go to Layout -> Edit HTML
• Locate the #main-wrap1 CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 725 by adding 240 to the default width of 485 pixels
• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders2_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

• Locate the #main-wrap2 CSS selector
• Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders2_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

• Locate the #main CSS selector
• Increase its width property to 725
• Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders2_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}

• Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Increase its width property by the same amount of pixels selected in step (1)
  

#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.

• Locate the following CSS selectors.
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders2_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders2_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders2_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders2_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Rounders 4 with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Rounders 4 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 4 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

• Go to Layout -> Edit HTML
• Locate the #main-wrap1 CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 725 by adding 240 to the default width of 485 pixels
• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders4_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

• Locate the #main-wrap2 CSS selector
• Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders4_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

• Locate the #main CSS selector
• Increase its width property to 725
• Delete the background property (shown with a strike off below)
  

#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y left;
padding:0;
width:725px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Increase its width property by the same amount of pixels selected in step (1)
  

#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.

• Locate the following CSS selectors.
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders4_bg_hdr_bot_w.jpg") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders4_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Rounders 3 with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Rounders 3 template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders 3 template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

• Go to Layout -> Edit HTML
• Locate the #main-wrap1 CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 725 by adding 240 to the default width of 485 pixels
• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders3_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

• Locate the #main-wrap2 CSS selector
• Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders3_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

• Locate the #main CSS selector
• Increase its width property to 725
• Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders3_rails_main_w.gif") repeat-y left;
padding:0;
width:725px;
}

• Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Increase its width property by the same amount of pixels selected in step (1)
  

#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.

• Locate the following CSS selectors.
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Scribe with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Scribe template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 630 by adding 200 to the default width of 430 pixels

#main {
width:630px;
float:$endSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the following CSS sections
• Change their width property to 900 pixels

#outer-wrapper {
...
width:900px;
...
}

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Replace the other background images with expanded ones as necessary.

• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Locate the following CSS selectors.
  
• Replace the URLs of the images to the ones shown in red below.

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

#header {
background:url("$imageHost/scribe_divider_w.gif") no-repeat bottom $startSide;
}

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Denim with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Denim template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main-wrapper CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 664 by adding 200 to the default width of 464 pixels.

#main-wrapper {
width: 664px;
float: $startSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS sections called #content-wrapper and #header
• Increase their width property by the same amount of pixels selected in step (1)
  

#content-wrapper {
width: 960px;
margin: 0 auto;
...
}

#header {
width: 960px;
margin: 0 auto;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

Rounders with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Rounders template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

(Note: Ensure that you back up your template before doing any changes, to be able to restore if anything goes wrong)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

• Go to Layout -> Edit HTML
• Locate the #main-wrap1 CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 725 by adding 240 to the default width of 485 pixels
• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

• Locate the #main-wrap2 CSS selector
• Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

• Locate the #main CSS selector
• Increase its width property to 725
• Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders_rails_main_w.gif") repeat-y $startSide;
padding:0;
width:725px;
}

• Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Increase its width property by the same amount of pixels selected in step (1)
  

#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.

• Locate the following CSS selectors.
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Minima with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Minima template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

(Note: Ensure that you back up your template before doing any changes, to be able to restore if anything goes wrong)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main-wrapper CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 610 by adding 200 to the default width of 410 pixels.

#main-wrapper {
width: 610px;
float: $startSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS sections called #outer-wrapper, #header-wrapper, #header .description and #footer
• Increase their width property by the same amount of pixels selected in step (1)

#outer-wrapper {
width: 860px;
margin: 0 auto;
...
}

#header-wrapper {
width: 860px;
margin: 0 auto 10px;
...
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:860px;
...
}

#footer {
width: 860px;
clear: both;
margin: 0 auto;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.

Wider 2 Column Templates: Step by Step Guides

This is a series of articles providing you with step by step instructions on how to increase the width of the main post area of a given default Blogger template. These guides are useful if you frequently upload images/embed videos etc that are wider than the default width of the post column.

• Minima with a wider post area

• Denim with a wider post area

• Rounders with a wider post area
• Rounders 2 with a wider post area
• Rounders 3 with a wider post area
• Rounders 4 with a wider post area

• Scribe with a wider post area

• 565 with a wider post area
  

Last Update: 2009 Jun 21