Digg This Story Header Image and Title Alignment

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;


Header Image and Title Alignment (I)

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;


Header Image and Title Alignment (I)

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)

14 comments:

Anonymous said...

Pretty component to content. I just stumbled upon your weblog and in accession capital to claim that I get actually loved account your blog posts.
Anyway I'll be subscribing for your feeds and even I fulfillment you get admission to consistently fast.
Feel free to visit my website - home equity loan vs home equity line of credit

Anonymous said...

Pretty nice post. I just stumbled upon your blog and
wished to say that I've truly enjoyed surfing around your blog posts. In any case I'll be
subscribing to your feed and I hope you write again very soon!
My homepage ; seo experts pakistan

Anonymous said...

I have read so many content about the blogger lovers except this article
is genuinely a pleasant piece of writing, keep it up.
Feel free to surf my web site ; damenschuhe online

Anonymous said...

Spot on with this write-up, I honestly believe that this amazing
site needs a lot more attention. I'll probably be returning to read more, thanks for the information!
My page :: günstige gesetzliche krankenversicherung vergleich

Anonymous said...

Hey! Would you mind if I share your blog with my facebook group?
There's a lot of folks that I think would really enjoy your content. Please let me know. Thank you
Also see my webpage :: work from home scams

Anonymous said...

Hello there, I discovered your site via Google at the same time as looking for a similar subject,
your website got here up, it appears to be like great.

I have bookmarked it in my google bookmarks.
Hi there, just changed into alert to your blog through Google, and found that it is
really informative. I'm going to watch out for brussels. I will appreciate in the event you proceed this in future. A lot of folks will likely be benefited from your writing. Cheers!
My website :: kredit ohne schufa abfrage

Anonymous said...

Does your site have a contact page? I'm having trouble locating it but, I'd like to send
you an e-mail. I've got some suggestions for your blog you might be interested in hearing. Either way, great website and I look forward to seeing it expand over time.
Feel free to visit my homepage :: amelia island vacation

Anonymous said...

Your style is very unique in comparison to other
people I have read stuff from. I appreciate you for posting when you have the opportunity,
Guess I will just bookmark this page.
Also visit my web page :: home equity line of credit rates

Anonymous said...

I think this is one of the most vital information for me.
And i am glad reading your article. But want to remark on some general things,
The website style is wonderful, the articles is really excellent
: D. Good job, cheers

Also visit my webpage :: kredit ohne schufa mit sofortzusage

Anonymous said...

I will immediately grab your rss feed as I can not in finding
your email subscription hyperlink or e-newsletter service.

Do you have any? Please let me recognise so that I could subscribe.

Thanks.

Feel free to visit my weblog - Vergleich Private

Anonymous said...

Hello, I think your website might be having browser compatibility issues.
When I look at your website in Firefox, it looks fine but when opening in Internet Explorer, it
has some overlapping. I just wanted to give you a quick heads up!
Other then that, awesome blog!

my web blog: studentische krankenversicherung
Also see my page: private krankenversicherung selbstbeteiligung

Anonymous said...

I have read some good stuff here. Certainly
value bookmarking for revisiting. I wonder how so much attempt
you place to make this type of fantastic informative web
site.

Check out my website :: best ideas for business

Anonymous said...

I am not sure where you are getting your info, but good topic.
I needs to spend some time learning much more or understanding more.
Thanks for magnificent information I was looking for this information for
my mission.

My blog - krankenversicherung für freiberufler vergleich

Anonymous said...

What's up, for all time i used to check web site posts here in the early hours in the morning, because i enjoy to gain knowledge of more and more.

Here is my site; equity lines of credit
My website: Just click the following webpage

Post a Comment