NOW-Hollywood - Celebraties Bio/Movies/Gossip

Oct 23, 2008

Header Image and Title Alignment (I)

by Admin 1 comments



Share this post:
Design Float | StumbleUpon | Reddit

We created this Blog using the new beta Blogger template. At that time, there was no easy way to insert images into the Blogger Header. We had therefore written an article on inserting a Banner or Picture Link in the Blogger Header. Recently, Blogger introduced a new feature in their templates, allowing owners to upload pictures into their Blog Headers. This background image to the Blogger Header can either be behind the title and description, or be a substitute for the title and description. There have been a number of queries raised concerning the Header image alignment. In a number of cases, the pictures are either not centered, or cannot be moved to the left or right of the Header. For those who have been facing problems, we hope this article can help you have more control over the image position. We shall explain how we manage to move the Header images in the different types of Blogger templates.

We think the main problem is that while Blogger has inserted standard commands into their templates involving a new id='header-inner', this new id selector has not been defined in the stylesheets. What we did was to insert a style for 'header-inner' in these templates to fix the position of the Header background image. For completeness, we shall also discuss how the title and description can be centered or aligned to one side of the Header.

To clarify, if you have chosen to have the image appear “Behind the title and the description”, the title and description follows the image wherever it goes. Should you want the title on the left side of the Header and the image on the right side, the easiest way is for you create a wide image using an image editor, put in the title and save it as one composite image. In this way, the title and description are exactly where you want them to be. Upload that image onto your Header, and for the Placement, choose “Instead of title and description”. Alternatively, you can also use the other method discussed in our Banner or Picture Link article.

Remember to click “Preview” after changes are made to the template. Only after you are satisfied with the settings should you click “Save Template.”

Minima Template

In the Minima Template, the Title and Description are automatically aligned to the center. If you want them to be on the left of the Header, change the alignment code (shown in red):-

#header {
text-align: left;


You can have them on the “right” too, instead of alignment to the “left” or “center”.

The Header image that is uploaded also stays in the center of the Header. If you want it to be further right for instance, scroll to these lines and change the “auto” in the left margin to a fixed width:-

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


For the image to be on the extreme right of the Header, you can change the right margin to 0px:-

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


Denim Template

The Denim Title and Description are on the left of the Header. To have the Header title in the center, insert the alignment code (shown in red):-

h1.title {
text-align: center;


For the Description to be in the center, add the alignment code (in red):-

#header .description {
text-align: center;

As for the Header image, it is aligned to the left. To move the image to the center or right, locate /* Header */ and paste this code under it.

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


Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-

margin-left: 200px;


The image can also be on the far right of the Header if you set the right margin to 0px:-


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


Rounders Template

The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-

#header h1 {
text-align: center;


For the Description to be in the center, you can insert the alignment code here:-

#header .description {
text-align: center;


Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-

#header h1 {
margin-left: 200px;


The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */

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


To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-

margin-left: 200px;


You can have the image on the right by setting the right margin to 0px:-

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


Herbert and Jellyfish Templates

Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-

h1 {
text-align: center;


and the Description:-

.description {
text-align: center;

When you upload the image using the Google feature, the image appears on the left of the Header. To move the image to the center, add this code anywhere in the Head portion immediately below a } sign:-

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


Shift the picture towards the right by changing the “auto” in the left margin to a fixed number like this:-
margin-left: 400px;


You can also have the image on the far right by setting the right margin to 0px:-

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


Harbor Template

The Header Title and Description are somewhere on the left. If you'd like, move the Title to the center by adding this alignment code (shown in red):-

.Header h1 {
text-align: center;


Or move the Description to the center with this code:-

.Header .description {
text-align: center;


People use Harbor templates for the background design. We don't think you would want to upload any further pictures into the Header. Supposing you want to, the uploaded Header picture is towards the left. To have it in the center, you may have to adjust the left margins with this entire code inserted after /* Headings */

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


Change the left margin width and preview the template to see if the picture is where you want it to be.

Scribe Template

The Title and Description are on the left. If you want them in the center of the Header, locate this part in the template and insert the alignment code (shown in red):-

.Header {
text-align: center;


You can change the “center” to “right” if you want the text aligned on the right.

An image uploaded into the Header appears on the left. To get it to the center of the Scribe Header, insert this other code (shown in red):-

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
.Header {
text-align: center;
}


You would notice that there is a margin surrounding the picture so that the picture is aligned to the rest of the contents. You may have a situation like this, where your intention is to have the picture occupy the entire top part of the template.

Header Image and Title Alignment (I)

It is a matter of playing with the margin settings. In this case, for instance, we want the image at the top and aligned to the left and we changed the margin settings to this:-

#header-inner {
background-position: center;
margin-left: -50px;
margin-top: -35px;
}


You can use negative numbers (e.g., -50px). Try changing the values one at a time. Preview the blog to see if the image is where you want it to be before saving the template. The Header image can look neat and aligned like this:-

Header Image and Title Alignment (I)

This article continues at Header Image and Title Alignment (II) which includes the steps to re-align the Header Title, Description and background images for the Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar and Simple II templates.

Related Posts



Subscribe Feeds RSS in your preferred RSS reader
Comments 1 comments
~ S a m m y ~ said...

Ty sooo much! :D I'm such a noob at these things, but u made it very clear. Some techie peeps make it so hard to understand.

Admin(kk group)
Student, Web-Developer, FSD-PAKISTAN
getfreefiles@gmail.com

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Subscribe feeds rss Recent Entries

Sponsored Links

Advertise on this site Sponsored links

Categories

Etiquetas

Are you looking for a job?

Post a job and reach web professionals everywhere.

My Photos on flickr

Subscribe feeds rss Recent Comments

Technorati

Technorati
GFF's authority on technorati
Add to Technorati Favorites