About   All Tips   Tips by Category   Tips by Ability   Help!

Adding Borders-Intermediate

Putting a border around a section of your blog is not a difficult task, but it does require that you learn a little bit of HTML terminology. This is an excellent way to introduce yourself to HTML if you have been hesitant in the past. Remember to learn these skills on a practice blog and, as always, make sure to download a copy of your current template before adding or deleting anything from your real blog.

There are four decisions you must make before putting a border around a section of your blog:

1. Where do you want your border? - You must be able to identify in HTML speak which section you want your border to go around. Refer to the handy-dandy little diagram below to help you learn the parts of a blog.



orange- body

blue- outer wrapper

green- main wrapper

yellow- sidebar wrapper and new (or left) sidebar wrapper if you have a 3 column template

red- *header

2. What kind of border do you want? Do you want it to be solid, dotted, or dashed?

3. What color do you want your border to be? You will need to know the six digit hex code of the color you wish to use. Free programs like ColorZilla can help you with this.

4. How wide do you want your border to be? I find it easiest to use pixels (px) as a border measurement. 5 px is usually a great place to start. You can easily play around with the size of the border.

Once you know the answers to these questions, you will have to create a line of code in order to insert a border where there once was none. If you are simply changing a border, then the code is already written and all you have to do is modify it a little bit.
------------------------------------------------------------------

Steps to putting a border around a blog section:

1. Locate the section of the blog within the 'Edit HTML' part of your template.

2. Copy and paste this code border:5px solid #000000; under the name of the section.

3. Modify it to your liking by changing the width (5px), the type (solid) and the color (#000000)

4. Preview. If you like what you see, click Save.

------------------------------------------------------------------

For example:

1. I wanted to put identical borders around my sidebars. I referred to the diagram above and found that the HTML terminology for this section is 'sidebar wrapper' and 'new sidebar wrapper'. I scrolled down until I found this section of my template:



2. I copied and pasted the code border:5px solid #000000; directly under #sidebar-wrapper and again under #left-sidebar wrapper (in red boxes below)



3. I decided that I wanted a white, solid border, 5px wide. I changed #000000 (black) to #ffffff (white) in both lines of code. Since they already called for solid 5px wide borders, I did not have to change anything else.

4. I previewed, liked what I saw, then saved.

Of course, you could write your own line of code in step 2 if you didn't want to copy and paste mine. I find it a lot easier to modify something rather than create a new line every time.

Happy Blogging!

For more help with borders, click here or here.

Related Posts:
Remove The Border Around Your Header
Add/Remove Borders Around Photos In Posts

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!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
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! :)

14 comments:

Robyn said...

This is exellent, Thank you for all your helpful tips!

Under the Florida Sun said...

What a GREAT blog!! I love it!!! So glad you put this together! What a gift to us bloggers!!!

Thank you!

Vicky said...

Again, this is awesome! Thank you, thank you for all your time and hard work to teach us these bloggy things!

BlogBaby said...

Hi Jill!

I just tried this but for some reason the elements in my side wrappers aren't centered but are over to the left side of the column. Can you help?

BlogBaby said...

Oh and My e-mail address is: theblogbaby@gmail.com

Thanks!

Unknown Mami said...

Thank you!!! I just figured out how to add a border to the denim template. Thank you this blog is pretty awesome and useful!

Melissa said...

Wow I love all your tips...thank you so for sharing them!

Kaye said...

I see some blogs where part of their post has a different background color and I would like to know how to do that. florida982002[at]yahoo[dot]com

dotCody said...

Why is the text so close to the border? Does it need an indent or something?

Laura Bledsoe said...

I followed the directions, but for some reason the borders are not showing.  I want a black solid border around each widget in the side bar wrapper.  This is what I did:

#sidebar-wrapper {
  border: 5px solid 000000;
  width: 300px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

The background color is white. 

sneakymomma said...

This will not put a border around the widget. It will put a border around the entire sidebar. You left out the # symbol before the 000000. :)

Marilyn Jo McLeod said...

About borders, is there any way to put a border/box around my announcement that I just put on top of my blog (thanks to you!)??? It's in green and I love it but would love to put a box around it somehow. I LOVE LOVE LOVE YOUR BLOG and all the tips. I have already learned two new things that I spent the last 2 weeks trying to figure out! I am going to put your button on my blog.

Marilyn Jo McLeod said...

I forgot to put my blog url. It's http://pinkpapercottage.blogspot.com. Thanks!

Jill @ Sneaky Momma said...

Marilyn: There is a way to do this, but it requires modifying the code. I can't show you in my comments section (code characters won't show up). Send me an email and I'll send you more info. :) blogsbysneakymomma at gmail dot com.