Sunday, April 26, 2009

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.

Friday, April 10, 2009

3 Column Templates : Rounders 3 : Two Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template of Blogger comes by default with only two columns. However, most bloggers want to have three column templates as they give more options in arranging the many gadgets on a blog. If you are one of them, this tutorial will give you the steps on how to modify a default 2 column Rounders 3 template in to three columns with the two sidebars on to the right hand side of the main column.

(For the more interested readers, the article series Three Column Templates Explained will explain the under the hood details of what's happening here.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need custom size templates, please contact me.

1) Add a new CSS id selector for the new second sidebar.

  • Switch to Layout -> Edit HTML
  • Find the #sidebar-wrap selector
  • Copy that full section and paste below the existing sidebar section and rename it to #right-sidebar-wrap
  • Change the float property of the existing #sidebar-wrap selector to $startSide (See the code snippet below)
#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#right-sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar
  • Locate the <div id='sidebar-wrap'> element
  • Copy the code shown in red, below that section
<div id='sidebar-wrap'>
<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

</div>

<div id='right-sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='right-sidebartop'>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'/>
</div></div>

</div>

<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'/>
</div></div>

3) Adjust the parent wrappers to accommodate the newly added sidebar
  • Find the CSS section called #outer-wrapper
  • Modify its width property to 980 pixels
#outer-wrapper {
width: 980px;
...
}

4) Change the required margins, padding etc
  • Locate the #sidebar-wrap section
  • Change the left margin to 7 pixels
#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 ;
...
}

5) Add the required CSS selectors for the second sidebar.
  • Locate the #sidebar h2 selector
  • Copy the code shown in red below, after that selector.
#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#right-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#right-sidebartop a {
color: #ffffff;
}

#right-sidebartop a:hover {
color: #ffffff;
}

#right-sidebartop a:visited {
color: #ffffff;
}

#right-sidebar a {
color: #99ddbb;
}

#right-sidebar a:hover,
#right-sidebar a:visited {
color: #ffffff;
}

#right-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded ones as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.
  • 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 with 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;
}

7) Modify the CSS rules for the wire frame layouts editor.
  • Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
  • Replace that entire section with the following code.
/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #right-sidebar-wrap {
width:150px;
}


]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

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/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Sunday, April 5, 2009

Post Date Header

The Date Header is that part of a Blogger blog which displays the date in which a post was created. This is sometimes referred to as the date stamp as well. We can easily control whether the Date Header should be displayed or not, and if displayed, in what format should it be displayed.

First let’s see how the appearance of the Date Header can be controlled. In Layout -> Page Elements view, if you open the Blog Posts widget in Edit mode, you get the Configure Blog Posts dialog. In that, the first check box under Selected Items is the button to ON/OFF the display of the Date Header. This is illustrated by the first red arrow in the figure below.


The format of the date stamp can be controlled from the drop down next to the check box mentioned above. However, it can also be set from the Settings -> Formatting section as shown below.


The Date Header is displayed only once for a given date. i.e., if you do more than one post per day, all of them will get only one date stamp when they are displayed on the blog’s main page. (Each of them, however, will have a date header on their individual post pages.) This is because the layout data tag (data tags are bits and pieces of information held in the Blogger database with respect to each blog) for the Date Header is set only once for all the posts in a given day.

This data tag is the post.dateHeader tag and this Blogger Help page says that it is “only present if this is the first post in the list that was posted on this day”.