About   All Tips   Tips by Category   Tips by Ability   Help!

Adding a Border To Your Header-Intermediate

As always, download a copy of your current template before beginning. I recommend honing these skills on a practice blog before attempting to make changes to your real blog.

There are five places within your header that you can add a border. You may have to play around with them a bit to get them to work. Refer to the key and photo below:

These parts can be found under the /* Header section in your template.
1. Red #header-wrapper {
2. Orange #header-inner {
3. Yellow #header {
4. Blue #header a {
5. White #header img {

To add a border around your header:
1. Choose where you want your border to go.
2. Decide on the color, size, and type of border you would like.
3. Write your code or copy and modify mine from the Adding Borders tutorial.
4. Insert this line of code in your template directly beneath the heading of the section where you want to put it.
5. Preview and Save.

For example, these are the steps that I would follow if I wanted to simply put a red border directly around my header image, like the one directly above this paragraph.

1. I would refer to the photo and key above to find the section of my HTML code that I want to work with.

2. Then I would copy and paste the code from my Adding Borders tutorial (border: 5px solid #ffffff;) directly under the name of the section and modify it to my liking:

3. I would preview. If I liked what I saw, I’d click on save.

To remove a border from your header, all you have to do is delete the number of px or change it to 0. Easy peasy! 

Happy Blogging!

Click here for more assistance.

Related Posts:
Adding Borders
Customize The Border Around Your Post Photos

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)


Jenners said...

No problems leaving a comment on the design blog!

Nurul Dahlya said...

thank you so much!! you really helped me with my blog setting!