Computer Consultant

    

   - Browse Archives -      May 2008 June 2008 November 2009 December 2009 January 2010

We continue from where we left off at Header Image and Title Alignment (I). This guide is for those who have uploaded images into their Headers, and want to move the pictures to the center, left or right side of the Headers. In this tutorial, you will also learn how to adjust the margins for the Title and Description in the Headers. The first part of our article covered the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe templates. We shall in this part discuss the remaining Blogger templates and the changes that can be made to re-align the Header Title, Description and background images.

Dots Template

The layout is designed with the Title and Description on the left sidebar. The space is small and any movement of the title, description or image will not be significant. We shall therefore not elaborate on this template.

No. 897 and No. 565 Templates

These are also very unique templates which people use for the designs and layout. You should not be uploading any Header image as this will change the Header section entirely. At the most, you may move the Title and Description to the center with these codes (shown in red):-

#header h1 { text-align: center; #header .description { text-align: center;

You can change the alignment to a specific left margin to position the text at the preferred place with this:-

#header h1 { margin-left: 50px;

Thisaway Template

In the Thisaway templates, you will see the Title and Description on the left of the blog. You can move the Title to the center with this:-

#header h1 { text-align: center;

You can specify a left-margin instead, to place the Title at the exact spot:-

#header h1 { margin-left: 220px;

The number can be negative, e.g., -30px. Likewise, you can set a left-margin to the Description by changing the margin to the alignment code (shown in red):-

#header .description { margin-left: 220px;

An uploaded picture in the Header is aligned to the left. Move it to the center by inserting this code after /* headings*/

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

If you want the image further to the right, fix a left-margin instead of “auto”:-

margin-left: 200px;

You can also have the image all the way to the right side of the Header by setting the right margin to 0px:-

margin-left: auto; margin-right: 0px;

Son of Moto, Mr. Moto and Ms. Moto Templates

This set of templates have the Title and Description on the left. If you want them in the center of the Header, change the alignment code (shown in red):-

#header h1 { text-align: center; #header .description { text-align: center;

Similarly, if you want them on the right, change the “center” to “right”.



When we uploaded the image, it was to the left of the Header. We went to /* Header */, and inserted this code:-

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

The image will be positioned in the center of the Header. If you want the image to be more on the right, add a fixed value to the left margin instead of “auto”, for example:-

margin-left: 150px;

The picture can also be on the extreme right hand-side of the Header if the right margin is changed to 0px like this:-

margin-left: auto; margin-right: 0px;

Snapshot Template

This is again another template which people use for the background design. Uploading a Header image will change the Header entirely and it is inadvisable to do so. If at all, you can move the Title by centering it:-

#header h1 { text-align: center;

or indicating a left-margin:-

#header h1 { margin-left: 250px;

TicTac Template

Both the Title and Description are aligned towards the left of the Header. To move them to the center, scroll to this portion of the template and insert a text-alignment code (shown in red):-

#header { text-align: center;

Or specify a new left margin to put the Title and Description at a definite position:-

#header { margin-left: 200px;

The TicTac Header background image has a fixed width of 847px x 240px. If you insert another Header picture bigger than say, 220px, you may see an ugly gap between the background image and the rest of the contents. Add a small picture if you'd like, one that can blend with the background. You can adjust the position of the additional image by scrolling to /*( header and site name )*/ and inserting this code under it:-

#header-inner { background-position: center; margin-left: 120px; margin-right: auto; }

Adjust the left margin settings to position the uploaded Header image.

Tekka Template

Tekka is simple in design. There are two columns: the main blog posts on the left and the sidebar on the right. The Header is at the top of the left column. The Title is aligned to the left. If you want the Title in the center, insert this alignment code (shown in red):-

h1 { text-align:center;

The Description is already in the center because of this definition in the stylesheet:-

.description { text-align: center;

For both the Title and Description, you can set a definite left margin instead of having them in the center. You can therefore have a fixed position for the Title, by changing the alignment to this:-

h1 { margin-left: 120px;

An image uploaded into the Header will be at the top left corner of the page. Should you want the image centered above the Blog Posts, insert after a } sign this code:-

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

This positions the Header image in the center. You can control the exact alignment by changing the “auto” into a specific left margin, for example:-

margin-left: 120px;

If you want the picture to be on the right side of the Header, set the right-margin to 0px:-

margin-left: auto; margin-right: 0px;

Sand Dollar Template

In the Sand Dollar template, the Title and Description are aligned to the left. To move the Title to the center of the Header, go to this part of the template and add the alignment code (shown in red):-

h1 { text-align:center;

Scroll further down and you can also move the Description to the center with this code:-

.description { text-align:center;

Instead of centering them, you may also have a preset left-margin. For example, the Title can be fixed at a certain position with this code:-

h1 { margin-left: 300px;

An uploaded image in the Header is at the extreme left of the Header. To move the image to the center, add this code anywhere in the template after a } sign:-

#header-inner { background-position: center; margin-left: auto; margin-right: auto; }

Similarly, you can specify a left margin by replacing the “auto” with a value, for example:-

margin-left: 300px;

If you want the picture to be on the right side of the Header, set the right-margin to 0px:-

margin-left: auto; margin-right: 0px;

Simple II

This is as the name suggests, a simple one column template, with no sidebars. The Title, Description and any image uploaded into the Header are automatically aligned to the left of the page. If you want the them to be in the center of the page, add this extra code (shown in red):-

#main .Header { text-align:center; }

If you want more control over the exact position of the uploaded Header image, insert this code after a } sign:-

#header-inner { background-position: center; margin-left: 300px; margin-right: auto; }

Change the left-margin value and preview the Blog. For the picture to be on the far right of the page, the values will be these:-

margin-left: auto; margin-right: 0px;