The Simple Template restricts a blogs header by placing it inside of the <div class='content-inner'> container. This box is the one controlled by the Template Designer sliders and since your header is inside that box it has the same width. Overcoming this restriction is really straight forward, simply move the header code outside of this restricted area.
Editing HTML is the Key
Start by opening up your blog in Design->Edit HTML mode and search, ctrl+f, for <header>. Select all of the HTML from this point until you see a tag like this, </header>. Now you must cut this text, ctrl+x, so it may be moved to another container. That's the hard part, make sure you get the entire header code or else things will likely go wrong.
Now for the easy part search for <div class='content'>, type this in the search box otherwise the cut code will be lost and you'll need to start all over. If this isn't found, try looking for double quotes <div class="content">. Once found simply paste the header code with ctrl+v below this line and preview your changes. If you've done everything right the header should now span the full width of your display. Now, keep in mind this might not look exactly how you want it and further tweaking may be required. Once satisfied save your changes or if it's just not to your liking, discard them.
Summary
Altering the Blogger Simple template to allow a full width header is pretty easy. All you need to do is move the header code from one place to another. This works best with large graphic headers and getting the exact look you want may take some work. In future discussions I may cover more advanced customization of full width headers, if there is interest just ask in the comments.
72 comments :
James-
was wondering if you had any idea how to explain to me how to center my header. I changed the size of it so it wouldn't be so huge, but now it is flat against the left side. Can't thank you enough for your help the other day. Literally after months of trying, you were the first who was able to make it make sense! Hope your Tuesday is great!
www.saintannselbys.blogspot.com
Anna,
All you need is to set the left and right margin for your header image to auto. It has a fixed width already and that will cause it to center. Try this style: header img{ margin: 0px auto; }
Glad to help out and thanks for stopping by.
J
Hi James - I found this tutorial while searching and was so excited. I've been trying to do this on my simple template. It all worked for me, but my header image is left centered now. My header image is sized 2300px wide so it ought to reach from left to right. Please let me know what I may be doing wrong.
Here is my dummy test blog I use to try our things:
http://blogdesignsbymccormick.blogspot.com/
You will see the header stop about 5 inches from the right side.
James - I entered the CSS to change my margin to 0 - it centered my header so I'm on the right track. However, so matter how wide I size my header it still will not reach the right and left side of my monitor screen. Please see attached link and if you can tell me what else I can do, I would really appreciate it. I love this site - it has helped me in so many ways.
http://blogdesignsbymccormick.blogspot.com/
Debbie, looking at the page I see a background image on the <div id='header'> and that image is 1920x162px. The only conclusion I can draw from the code is your monitor is higher resolution than this.
It's possible to scale an image to the full width, however the image quality will degrade. For a background image, you may use the background-size css style in newer browsers. Here's documentation on support: <a href='https://developer.mozilla.org/en/CSS/background-size'>Background Size CSS</a>
You may also consider setting the image with an <img> tag styled to stretch and shrink to a visitors display using the width and height styles like this:
#header img { width: 100%; height: auto; }
The second method has a little better compatibility, though the quality of the image may vary greatly from user to user. Off the top of my head, those are the two most quickly available options. Although, some complicated use of min-width, max-width and auto side margins are also a possibility.
Hope this helps and thanks for reading,
James
Hi - yes I ended up just using a background image for my header area. It is really narrow - do you know where I can change it in the HTML to be a little wider allowance for the header area?
I really appreciate your dedication to bloggers
Hi James,
I followed your instructions (both html and css), but still nothing :( My header keeps starting at the center and keeps going on the right, leaving the left part of the page empty.
Could you help?
Hi James,
I've cut and pasted the header under 'content', but the header image aligned all the way to the far left of the IE windows, not the content left. I've then reverted to original.
I still can't get the header image displayed at full width.
This is my blog:
http://khaichin.blogspot.com
Would really appreciate your help. Thank you very much!
@KC, This tutorial is designed to create a full window width header. The <div class='content'> element is typically sized that way, although customization can change this.
On the other hand, the original placement in the <div class='content-inner'> is sized to the width of the actual blog content(blog + sidebars). This is a little confusing naming, but that's the way Blogger set things up.
Looking at your header image, you'll need to either resize or scale it as an image tag. I recommend resizing the source image for better quality. Alternatively, you may consider centering the image with the margin: 0px auto; style.
Hope that helps.
@Atea Leave me a link, I'll take a look.
http://www.grazieadiosonoateo.org/
Thank you, I appreciate it.
@Atea, you've placed an image widget into the Tabs section of your template rather than in the header. So, any adjustment you've done with this tutorial isn't touching that image. You can either move the image widget to the header, then move that section(recommended) or alternatively move the tabs-outer div up(not recommended).
Hi James,
Thanks for suggesting to put it as an image tag. The header image is now displaying at full size (within the blog content)!
and thanks for explaining on those div names. Really confusing trying to understand those div names and figuring out what they do in the blog templates.
Really appreaciate your hard work in contributing these articles, they really help!
I'm sorry James, but I didn't get it. Did I messed up the html? Reinstalling the default theme would help me?
@KC, glad to help and the updated image looks real nice.
@Atea, I'm struggling for a way to explain this well, but I'll give it a try. Open your blog Design and you should see the layout. Looking at the code, your 'header image' should show up as the second item with a Header above. This placement is normally for Tabs, menu items if you will. You need to get the header image instead placed in the Header widget.
Copy the URL for your image, then try editing the Header in Design view. Set the header to an Image only using that URL. Preview the changes and you should see your header image appear twice. Now, remove the Image widget off the second line and preview again. There should be just 1 header now and the instructions in this post should work for you. Although, further tweaking such as setting the margin: 0px auto; so the image centers may be needed.
First things first though, the image needs to be part of the Header widget rather than an Image widget in the tabs section.
Stupid "Arrange Page Elements"... that's why it wasn't working: I didn't put the header widget in the highest spot...
Thank you for the help James :)
One last thing: I used this code in advanced css, but the image still won't center:
header img{
0px auto;
}
@Atea, you've placed the header image with the "Behind title and description" box checked. This uses it as a background image rather than an <img> tag. You have a few choices from there, but seeing as you appear to want the title and description to display, here's what I suggest.
Apply the style like so: #header-inner { margin: 0px auto; }
Testing with Chrome developer tools this worked correctly for me.
It works, but what if I want it Instead of title and description?
Hi James.
I followed your instructions and I've almost got this to work, but I'm still having trouble. Are you still taking questions?
Thanks for your help so far.
@Missie, give me a link I'll take a look.
Thanks so much for taking the time to look at it, James. I appreciate it.
Test Blog: http://theundeadwriter.blogspot.com/
@Missie, I'm not sure what problem you're having although I notice a couple of things. First, your header image is only 960px wide so it will not display any larger. There is a navbar set to 30px above, so the image isn't going to the top of the screen, hide that to take care of it.
Second, you have a widget within the header for your drop down menu which is slid to the left. I suppose this is your main problem? Try applying a margin: 0px auto; to it if you'd like it centered.
You've not described your problem, so I can only guess, but the code looks right at first glance just some styling issues to clear up.
Hi James.
Yes, those are all my issues. Sorry for not explaining very well.
This is the code I have for the navigation bar:
#navbar-iframe {
display: none !important;
}
Is it incorrect? How do I hide it completely so that the image can go to the top of the screen.
And the widget is driving me nuts because I can't get it centered. I tried the code you suggested and it didn't seem to make a difference. What am I doing wrong?
Thanks!
Try #navbar {display: none !important;} instead, the code you have only hides the iframe rather than the containing div, so you have a sort of phantom box on the screen.
For the menu problem, you need to add #menu{margin: 0px auto;} I see the style on line 465 of your source, so you can just add the margin style there.
Holy Crow! It worked! You're Amazing!
I still have a small spacing problem in between the header and menu bar. Any codes for that?
Thanks for all your help. You have made my day!
header .widget {margin: 0;}
Amazing! Thank You!
Are you still taking questions on this?
I have a blog: http://www.sidewalkshoes.com that is currently minima lefty stretch that I tweaked to allow a bigger main column for my photos. I want to switch to the blogger Simple template because I like the column layout and the tabs for my pages.
I am practicing on http://www.sidetestblog.blogspot.com to try and get it as close as I can. I used your method for getting my full header to display, and it is, but I can't get it centered. Tried overriding the margin, but that didn't work. I also can't figure out how to get rid of the huge side margins and make my main column larger. Minima was so easy to work with, Simple is totally confusing!
@Pam, your practice blog is available through invite only so I can only guess as to the problems. I suggest using Google Chrome to help with style issues though. The developer tools allow you to inspect and see which styles are active as well as modify them in the window to find the look you want. Once happy, copy the text into your template and you're set.
I'll take a look for suggestions if you like though, but I'll need access. Probably sometime tomorrow or the next day. I won't be online the rest of the day.
Thanks James!
I couldn't find your email address, so I just opened the test blog up to anyone.
The Google Chrome suggestion sounds fine, but I have no idea what you are talking about :) When I tweaked my minima template,I just basically went in and changed all the hard coded pixel settings, or percents, or something like that. It was several years ago.
I'm a teacher, so I usually only do any blog fixing up over the summer, and by the time the next summer rolls around, I have completely forgotten what I learned the summer before!
@Pam, try adding this style #Header1_headerimg {margin: 0px auto;} to center the image. If you want the text centered as well you should add .Header .description {text-align: center;}
As far as the width of the columns, the simple template is designed to work on a fixed width set under Design->Template Designer->Adjust Widths. This allows you to set it upto a maximum of 1000px to support visitors with a resolution as low as 1024x768. If you want to go any wider you'll need to change these styles body {
min-width: 930px;}.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: 930px;max-width: 930px;_width: 930px;} for something larger.
As far as Google Chrome goes it's googles web browser which has a lot of nice features. You can get it Here. It allows you to load up a webpage, then right click and Inspect element. This gives you access to all the style information and such to help figure out what you need to do. You can try things until it's correct, then copy the changes into your template. Makes tweaking a site much quicker than mucking around in the source and refreshing/previewing.
James
James - thank you so much, I got my header and description centered!
I use Google Chrome as my browser, but I had no idea it could do what you said!
I think my problem now is the side margins - or at least I think that is what's keeping my columns centered, as opposed to spreading out. I don't want all that empty space on each side.
Hi..James, I would like to change my blog's width can you help me!
I tried the things that you said,but I couldn't find any div class="content"
Pls give a reply!
http://mobimessenger.blogspot.com/
@Jithin,
Change that to single quotes like this, <div class='content'>
hi..James!
I tried it but my header moved to left & the width remains same..why?
The code currently on your site isn't moved outside of the content container, so I can only guess you made an error and did not save the changes. Without seeing the code, I cannot even guess what the problem might be.
Thanks so much for this article! I am trying to make an html/javascript widget the full width of the blog too. I'm assuming I can use the same technique that I did for the header, but how can I identify the widget in the html?
Oh. My. Word. Thank you so much for this article. I was up late last night and ready to pull out my hair for trying to figure out how to make this header wider. THANK YOU!!!
I need your help I tried to do this but its just pushed the image to the left of the screen. I have no idea what to do know as I am a complete novice on HTML and don't want to mess it up any further! Help!
@Sasa, your header image is only 1000px wide and you'd have to stretch it in code to fit the full width of something larger. I don't recommend that though since it will heavily degrade the image quality, along with the height of the image getting excessive for large screens. The image you have I'm afraid is really best suited to the default template setup with a fixed with of about 1000px.
To create an attractive full screen width header you'd need to redesign your graphics to work well at many screen sizes. This is most fitting to simple designs with few graphics placed in strategic points. You'll need to rethink how the artwork you're using looks at varying screen sizes.
James
Hi James
Thanks so much for the post and it helps a lot, I wonder if you are still taking questions cuz it's been a year since you original post...but I will be grateful if you could help me. :)
I follow your tutorial and change the header image to fit the width without having the border around it, I also copy the manu bar and paste it at the same place the header is. and then some problems appear.
1. I center the header image and it works, but I could not center or positioning the menu bar, it become much wider then it suppose to be and I couldnt fine the code to trim its width to match the header as well as the rest of the page.
2.When I paste the header tag to where it is now, I notice that a drop shadow effect is gone, I guess it is because it is now out of the div tag. So I find the code for the effect and paste it within the "header-outer" bracket and it works. The only thing is that then I realize the header image also has the same problem that the munu bar has, which is its width becomes much wider then it suppose to be, I didnt notice that because it has the same bg color as the rest of the page.
I try to fix these 2 issue but no luck so far, if you dont mind take a look at my site and give me some advice that will be totally appreciated.
here's the link to my blog
http://coffeeandfriedchicken.blogspot.com/
thanks so much!
Kuni
I think I might find the solution, instead of copying the header out from the "div class='content-inner'" tag, I leave it within there and change the "content-inner" css, change the padding to 0.
would you think this is a good alternative?
thanks!
how do i get my image header to measure 648x150px. i can't see where in the html code to change the sizez i'm using bloggers simple template. website: 2lovrcookest.blogspot.com
thanks!
cheri
that website is 2lovecookeat.blogspot.com
hey love your tutorial and it worked the first time! however, I decided I need to create an image map using html and try to put it in as my header so that it will blend well with my site. Anyway, I have deleted my header and using a html gadget as my header on top. I am wondering if you know to make the horizontal html gadget full page width now? lol. confusing, I hope you understand.
kathryn-
http://blog.thedragonsfairytail.com
I'm having troubles :S I've done exactly what you said with editing the code, and its spanning across the web page...but its not fitting to different sized monitors. Is there a way to fix that or did I do something wrong?
chentalwilson.blogspot.ca
@chental, You've got a number of issues going on that's probably not giving you the results you're after. First, somewhere in your styles the body is set to a min-width of 1500px. There seems to be another element further down also set with the 1500px min width. This means no matter what your page will be that wide. I didn't look much past those two, but it seems there's another problem causing the header image not to scale. I'd have to look further to find that, but I'm afraid I'm not doing much free open source blogger support these days to spend the time to solve it all. Other obligations and my web dev business take priority I'm afraid.
James
you are a life saver! i searched EVERYWHERE for how to do this and nowhere else worked as perfectly as yours did! thank you SO much!!!!!!!
Hi, do you think you could help me center my header image? I'm not sure if I've messed up the HTML code or what? I'm a beginner coder/blogger and would really appreciate any help / advice that you have for me. The link to my blog is below:
http://kathrynobowen.blogspot.com/
@Kate, add this style to your template and you should be set.
#Header1_headerimg {
margin: 0 auto;
}
hey James. You are a blog saver. Please help me! On my blog there is like an inch on both sides but I want the header to stretch right across.
This is the link to my blog:
www.wearitwoman.blogspot.com
Thank you.
@Karen, you have a padding on the body element. You can fix that by adding a custom style body { padding: 0 0 40px; } to remove the left and right padding or find the line where the body is set to padding: 0 40px 40px 40px; then change it to the one I've given.
James
hello I applied this to my blog www.test07271.blogspot.com and it dosen't expand the full width of my blog.I think theres a padding but don't know how to remove it. Can you please help?
Thanks James for the great info - it worked perfectly the first time I tried it (Full Width Header - Simple Template). I was wondering if you had any additional tutorials on:
1) Increasing the height of the header to be used with Simple Template
2) Adding a Full Width (and Height) Footer to be used with a Simple Template.
3) Changing the background color of the Sidebar with a Simple Template.
If you haven't done any of these tutorials yet, they might be a great addition to your wonderful site.
Hi,Can you tell me why my header is not full width?i have adde the code you said at the top of this page but still lots of space on the left?
http://davidleeharris.blogspot.co.uk/
Thanks
David
Thank you! Very, very simple and easy explanation.
Hi James I am wanting to make a header that spans across. Before I make the image, can you tell me what width is best for this?
Thank you so much!! :)
Hi,
I tried what you said but when I try to preview the page I am getting a mesg that says Bad Request.
any suggestions?
It's failed in my blog http://jemick.blogspot.com . can you give me another solution?
Hi,
Your steps worked like a charm! thanks so much. I know its not exactly the same, but I am now trying to make the content background of my blog semi-transparent. How would I achieve this? Any help would be great.
Thanks!
Hi James,
thanks for the awesome tut, clear and easy to follow. However, it didn't work on my blog :(
I un-ticked the 'shrink to Xpx' option on the banner settings, but it is still placed in a box.
What did I do wrong?
Thank you so much for this post!!! I cannot tell you how much this helped me :)
Best Regards
Hi!
I've been searching for about a month on how to stretch the width of my banner, your the only one who has been able to help! Thank you so much!
However, I'm having some of the same issues that the previous commenters are having. My banner is stretched all the way to the left side, but I have about a 3 inch gap from the right side to the banner. I tried following some of the suggestions you recommended, but they still didn't work.
Here is a link to my page:
http://docedouze.blogspot.com/
Please help me!!!
Thank you :)
hey please suggest me to the how i increase my header width my blog link is www.galaxycomputerworld.blogspot,.com
great tutorial! super helpful! I know you wrote this so long ago but just wanted you to know that its still helping people :)
Hi there, I am html illiterate,and tried to follow your directions. I ended up being told that i couldn't have a header inside the body.
Suggestions anyone?
I'm hoping you're still answering questions to this!!! I sort of got this to work...but it doesn't quite stretch all the way across. I'm looking for my blog header to look like this one (the way the 3 black lines go all the way to the edges): http://littleinspiration.com
My URL for my test blog is here: http://lstestbloggy.blogspot.com
Does anyone know why I am getting a little white gap on the left side of my header? It's really irritating, and I can't seem to find how to fix this at all.
My guess would probably have to be to do with the padding of the margin? I don't know, haha.
naturallyjes.blogspot.com.au
Thank you for the tutorial. I am trying to make a navigation bar fit the entire width of my blog and be positioned at the very top of the page. I sized the image to use for my navbar according to the entire width of my blog, but for some reason it still will not fit the entire width. I just tried what you mentioned in the above tutorial, and still, nothing has changed. Do you have any other suggestions?
Post a Comment