If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Increasing the left-padding will bring your image towards the right. Increasing the top padding will pull your image down.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#header { padding-left: 170px; padding-top: 0px; }
Increasing the left-padding will bring your image towards the right. Increasing the top padding will pull your image down.
Align to Center
If you want to center your header image, use the code below instead (either one):
Note: If you're using a heavily moded third party template, you might want to change the Header ID in the code above before attempting this tutorial. Have fun.
If you want to center your header image, use the code below instead (either one):
#Header1_headerimg{ margin-left: auto; margin-right: auto; }OR
#header-inner{ margin-left: auto; margin-right: auto; }OR (For image-less header)
#header-inner{ text-align: center; }
Note: If you're using a heavily moded third party template, you might want to change the Header ID in the code above before attempting this tutorial. Have fun.
you have good ideals here
ReplyDeleteEmmy: Thanks for that thoughts. Enjoy your stay here.
ReplyDeleteThanks for you tutorial :)
ReplyDelete@Rinah: Nice of you to drop a comment, and you're welcome. Enjoy your stay here.
ReplyDeleteCheers.
I remove my image header and just use a plain color background thru advance css but the problem is the margin the left side is too big while on the right is occupied the rear side. How can change it and make it to the center?
ReplyDeleteThanks,
@lena: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:
ReplyDelete.header-outer{
margin-left: 0px !important;
}
Cheers.
Thanks a lot for your tips
DeleteHi,
ReplyDeleteI'm trying to redo my friends blog and don't know what I'm doing wrong.
Here is the look I'm going for...
http://creativepracticeblog.blogspot.com/
Here is her blog...
http://craftspotbykimberly.blogspot.com/
I thought I could just copy and past the html code from my blog to hers, but it doesn't seem to work, and now I don't see a "save" button when ever I do change anything in her html area.
Can you help me?
Hi Robin,
DeleteTransferring your template's HTML will only copy your styling mostly. You still need to manually add sidebar gadgets to the other blog. And if you want the CSS from your blog to work on the other blog (the CSS is already in the HTML btw), you need to make sure all the gadgets have the same IDs as your blog, which is not practical as you don't get to choose gadget's ID manually. What you can do is, add all the necessary gadgets, and inspect the new blog's gadget IDs and change your CSS code accordingly to match the new ID. Let me know if you need further help..
You are a great help, thank you so much! My friends blog is coming together nicely!
ReplyDeleteThat's great :)
DeleteI have been trying for two days now to get my header image to center, but it will not work. I have tried adding CSS codes, but the image doesn't respond to any of them. Please help!
ReplyDeletehttp://sheenaashlock.blogspot.com/
Hi Sheena,
DeleteGo to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#Header1_headerimg{
position: relative !important;
left: -80px !important;
}
Cheers :)
I spent about 3 hours trying to figure out how to align my my header to the top and center with blogspot and remove the gray background and I just can NOT seem to find a solution.
ReplyDeletehttp://thejoyofdiablo.blogspot.com/
If you could help me out I would seriously appreciate it!
Hi Tod,
DeleteI don't see any gray background and your header image looks centered now. Have you got this sorted?
Hi Yoga,
ReplyDeleteMy header is centered just fine, but for some reason the post box below it isn't. I can't seem to find out how to align the body of my blog with the header. Any idea?
http://www.dontsewangrybaby.com
Hi Amber,
DeleteYour body seems to be aligned to the center when I viewed it. See screenshot below:
http://img684.imageshack.us/img684/3874/63492343.jpg
Can you show me a screenshot of what you're seeing?
I know some html, not css, but I am learning, thanks so much you're awesome!
ReplyDeletewww.iampiscesw.blogspot.com
Hi Sherry,
DeleteYou'll get the hang of it in no time!
Happy blogging :)
I'm trying to delete any padding around my header, but no matter what I do, there is always white around it.
ReplyDeleteMy blog is at http://ericcoomer.com and I am trying to make the header look like it does at http://ericcoomer.bandcamp.com.
Any ideas?
Thanks so much,
Eric
Hi Eric,
DeleteSorry for my ridiculously late reply. I've seen your blog and it looks like you've got rid of your white padding. Let me know if this isn't the case.
Cheers.
I'm trying to left-justify my header image, and I've tried just about every piece of CSS code you've suggested but nothing worked :( Please help.
ReplyDeleteMy website is:
www.onesummerdayphoto.com
And here's all the CSS I've added so far:
#Flipcard.ss, #views ul li:nth-child(2),
#Mosaic.ss, #views ul li:nth-child(4),
#Snapsnot.ss, #views ul li:nth-child(6),
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}
#header .header-drawer.sticky, #header .header-drawer {
top: 134px;
}
#header .header-bar{
height: 165px;
}
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 165px;
}
#header-container {
height: 205px;
}
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;
height: auto !important;
}
#header-container #header.header .header-bar span.title{
background: url(http://4.bp.blogspot.com/-z9YQjliPRhY/US7m7lIAR8I/AAAAAAAABcg/ZL-kK9JjZ0w/s1300/1SDBANNER+NEW.png)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
}
.header-bar #search{
display: none !important;
}
#header {
padding-left: 0px;
padding-top: 0px;
}
.header-bar span.title a h1, .ss, #header .title a:hover{
display: block !important;
width: 100% !important;
height: 100% !important;
}
.header-bar span.title a h1, .ss, #header .title a:hover{
display: block !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
color: transparent !important;
text-shadow: 0px 0px 0px transparent !important;
}
Thanks for your time, effort and dedication :)
Hi 1SD,
DeleteIt looks like your header image is already left-justified. Have you got it figured? Sorry for the late reply btw.
Hi Yoga!
ReplyDeleteI love your site and so far it's helped me loads! Thanks :)
I have just been trying to figure out how to make my header (and the menu bar below it) the width (and center) of the entire length of the page, and to make the body content less wide than my header. I have tried everything but I can't seem to find the solution. Could you please help me?
This is my blog: http://readiculously-peachy.blogspot.com
You will see everything is centered perfectly, but I want the body content to be smaller (less wide) than the header and the menu bar. Also, (I don't know if this an entire different question)-- I want my header and menu bar to fit the complete width of the page with no paddings/margins on the left/top/right sides of the page (ex: http://parajunkee.com/).
Any help would be much appreciated! If you need my email, please let me know!
Thank you in advance!
Florentine
Hi Florentine,
DeleteYou need a very large image, and blockyy header image (as opposed to imaege that follows a cut-off, like the ribbon in yours) if you wanna simulate what parajunkee has. Anyways, this is a huge topic, and it is best if we can handle one thing at a time.
I see your header is already centered, and your content width looks smaller than your header. Have you got it fixed?
Hi bro, thanks for your tips, i am unable to resize mine regardless of which css code i use, check out my blog and please help me brother http://mmo81.blogspot.com
ReplyDeleteHi Sarry,
DeleteThis is what I'm seeing: http://img580.imageshack.us/img580/9577/20130501015016capture.png
I'm not quite clear on how you'd like to resize your header. Could you provide me with an annotated screenshot (with some simple scribbles) on how you'd like your header to be?
THANK YOU!
ReplyDeleteIs there a way I can pull up my page tabs (I created them myself using HTML coding) to fill in some of the black space between them and my header image? http://mrsstianchi.blogspot.com/
ReplyDeleteHi there,
DeleteTry this:
#header{
margin-bottom: -70px !important;
}
Play around with the value '70px' :)
Cheers!
Yay, perfect! Thanks!
Deletejust what I needed :) You rule Yoga
Deletethank you for the tutorial! i now can move my header to the position i want but the problem is it's placed behind the post background (or the board idk what its called) how can i move it to front?
ReplyDeleteLet's have a look at your blog. What's your blog's address?
Deletehello sir,
ReplyDeleteI want my header and menu bar to fit the complete width of the page with no paddings/margins on the left or right sides. I am trying to do this via template designer but it is effecting the whole page width.
http://www.blogenia.blogspot.com
thanks
See if this is what you're looking for:
Delete.tabs-outer, #header{
position: relative !important;
left: -40px !important;
width: 1390px !important;
}
#Header1_headerimg{
width: 1390px !important;
}
Cheers.
thanks for the reply but now if i am trying to shrink my page width it is affecting the header and tab too.
ReplyDeleteI want it, like techgyd.com
I think what you're looking for is a stretch template. Right now, you're using a fixed-width template. To convert a fixed-width template to a stretch template is too much work I'm afraid. It'll be much easier if you could just start off with a stretch template (just Google it).
Deletehi,
DeleteI searched about stretch template but everybody is offering a stretch template. Which one should i use ? Do you have any suggestions ?
thanks.
Personally, I think there are only a few stretch templates available these days, so your option is indeed a little limited. I'd suggest you to try a couple of them and see which one fits well to your taste and your blog's theme. If I have to pick one, I'd always go for Minima Stretch, my personal favourite :)
DeleteThank you very much for your tips sir!
ReplyDeleteNo problem mate :)
DeleteI've read so many tutorials I'm not exactly sure what to do. My header image looks like this right now http://minttuscloset.blogspot.fi but I would like it to be fitted like in this blog http://www.xeniasday.com . How do I do that? So it doesn't cover the entire page when someone opens my blog but that you can actually see a part of the post too. Thanks!
ReplyDeleteWe're dealing with ratios here. Right now, your header image is like a square. You need to get a rectangle one. You could use the same image, but you need to crop it so that it isn't too long/tall. The problem with your current image is, yes, you could make it wide enough to cover your entire menu, but, the image will also be long and tall - unlike the image used in xeniasday. See what I mean?
DeleteGet back to me once the image is cropped a little, and we can pick it up from there.
PS: To crop the image, open the image in your computer using some Image Editor software (like Ms Paint) and get rid of the bottom/top part, so that it isn't too tall. Save the image once you're done editing, and reupload the newly edited image.
hey can you help me with the header, I tried doing exactly the same as per the instructions however, the header is still aligned right and does not show at the centre. would be really glad if you can help yoga. as I got the image designed and the designer wants to know the width and can the header cover all of the wite space at the header.
ReplyDeleteI see your current blog's width is set to about 1370px. If you want a fitting header, your designer would have to come up with a header size that is 1370px wide, and you have to make sure you keep this setting intact for your blog's width. But I must say, average blogs don't go beyond 1000px, unless if you want to have a horizontal scroll bar appearing in your viewer's screens.
DeleteThat said, you can use the following code to manually reposition your header for now. Just adjust the numeric value accordingly.
header {
margin-left: -50px !important;
}
You just have to do simple stuff... I added a news flash here on this website IPL live streaming But the overlapping caused some issues so what i did was finded #header in css and changed margin to margin-top:2%; that worked :P
ReplyDeletesimple and easy mann
I've found a background offered in Blogger Template, Advanced, that I just love.
ReplyDeleteHowever, my header is so high up on the page, the cute background is not being shown...bummer
Is there a way to move my header down on the page so that the top of the background is visible.?
I get what you mean. The following code should add a 100px gap on top of your header. Add it to your Add CSS box:
Delete.content{
padding-top: 100px !important;
}
Is there a way to move the header image only, and not the title of the blog?
ReplyDeleteSee if this is what you're looking for:
Delete#Image1 {
padding-left: 170px;
padding-top: 0px;
}
Hello I would prefer it to appear on mobile view
ReplyDeleteIs it possible?