Hello everyone! Tiffany here! It’s so great to be here and to begin sharing all kinds of tips with you! Today I’m going to share a very simple trick to get your blog header to be centered!!
The blogger template I’m using is probably one of the most popular ‘Picture Window’, but this tip can be used with most any template!
The problem is the width of my blog is actually wider than my pretty header image. Don’t you just love this pretty header? It was a freebie from Keren, find it here at Free Pretty Things for You! Before I added it to my blog I brought it into Photoshop and added a lovely verse!
But it would look a lot better if it were centered on top of my blog! So here are a couple of quick steps to make that happen!
Center Your Blog Header Image
1. First go to TEMPLATE > CUSTOMIZE > ADVANCED > ADD CSS
2. Choose the code that best fits your needs below! Copy & Paste it in the space as shown above. *Please Note* Hit your ENTER Key after you paste the code snippet.
Option A: If you used “INSTEAD OF TITLE AND DESCRIPTION“ option:
With this option the image was added as a <img> HTML element. Use these code snippets to align the element.
To Center:
To Align Right:
The ’300′ number can be adjusted higher or lower to move your image left or right.
To Align Vertically:
The ’50′ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.
Option B: If you used “BEHIND TITLE AND DESCRIPTION“ option:
When you choose this option, Blogger added your header image as a background to the header. To align it you need to add one of the follow snippets of code:
To Center:
To Align Right:
All Done!! Oh that is so much better!! Below are a few extra aligning tips for your headers!!
Line Up Your Header Text
If you would like to Line Up your Header Text (Title & Description) then use of one these snippet codes: These codes will work with text-only header and the text in “Behind Title & Description” image placement option.
To Center:
To Align Right:
To Align Vertically:(apply top padding)
The ’50′ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above. Also, to adjust the Description use .descriptionwrapper
Line Up Image & Text Side by Side
Use one of these snippets if you want to split up your header into 2 parts positioned side by side, an image and text: These codes will work with the “Behind Title & Description” image placement option.
To Place Image on Left & Text on Right:
Increase left padding to push away texts to the right of the image header
To Place Text on Left & Image on Right:
Increase right padding to push away texts to the left of the image header.
It has been such a pleasure to share this tip with you today! Feel free to share your comments or questions below!
Swing by my shop at Tiffany Doodles Digital Stamps any time! I’d love to have you over! At least come by and pick up a new freebie every Thursday! =)
How wonderful is this!!! Tips from Tiffany on the one and only Free Pretty Things for you!!!! LOVE IT and love the addition to the blog my friend…it is AWESOME for all of us that are “digitally impaired” !!!! Thank you for always being so incredibly thoughtful and always lending a helping hand! A BIG thanks to you too Tiff…if I may call you that : ) you ROCKED this tutorial…(shhhhh….don’t tell anyone…especially my son…I actually think i understood it : ) lol!!! we don’t want that to get out then that would mean more work for me! Take care girls and THANK YOU THANK YOU THANK YOU!!!!! tons of hugs!!!! Here’s to MANY more tips from Tiffany!!! : )
Thanks for the enthusiastic feedback Andrea!! We would love to hear thoughts on future tips and tricks too!! Thanks a bunch!
Thankyou tifanny!
i’ve been looking for this tutorial. helpful as always!
GBU unlimited :)
thank you so much, tiffany! this was super helpful and easy to follow. i’ll be by to visit your blog soon!
xo
elyse
Thank you sooooooo much for this!! I’ve been trying to find a simple way to do this for ages without having to go into the html code!
=)
Thanks for the great tutorial. I had found a way to cheat so that my header looked centred but after creating a new one to match the badge I created, it was best to learn to centre it properly. I’ve had an appt. to visit this post in my calendar since I came across it in November so was finally able to put your tutorial to use. Thanks again for the great tips!
Thank you so much!!!
You are amazing! I’ve been searching for soo long for that answer! Thank you so much, you are a blog-saver!!
So thrilled it helped Sara!! :)
Thank you so much for sharing this tip! I’ve been trying to make my own template, and centering the title has been driving me crazy!!!!!!!!!!
Welcome Mary! SO glad it helped :)
Thanks for explaining this tip so well! Several other people had the same tip but they had me rooting around editing the CSS directly, whereas this elegant solution fixed my problem in a couple of minutes.
THANK YOU, THANK YOU, THANK YOU!
WELCOME!!!! :D
Thank you! This was super helpful !
Happy Saturday
Marie
I have having trouble finding out how to centre my blogger header, until I read this. Thank you so much. :D
So thrilled this helped you Ash!!! :)
Thank you so much for posting this easy to follow code! The CSS trick took 5 seconds for me! THANK YOU!
oh yay! SO glad it worked for you! :)
XO!
Thank you thank you! I found your tutorial via Google and it worked perfectly!
This doesn’t work for me, I don’t know what I’m doing wrong :( xxx