Monday, April 4, 2011

Tutorial: How to add a border around your blog

© Sunshine Designs
Tip: Always download your template to your computer before following any tutorials.
This tutorial may be a little bit challenging for people who are newer to html so if you need any help at all feel free to comment or email me here
Ready? Lets get this tutorial on the road. 

1. Sign into Blogger.

2. Click on "Design".

3. Click on Edit Html.

4. Scroll down till you see:
/* Outer-Wrapper
----------------------------------------------- */

5. Right after that you should see something like this:
#outer-wrapper {
  width: 960px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
                               
}

6. Add this code where the blue highlight is in the code above:
border:2px solid #000000;

7. You now can change it any way you like!
The purple two is how wide your border is. You can change it to make it bigger(replace the two with a bigger number) or smaller(replace the two with a smaller number).

Changing the green "solid" changes the appearance of your border. You can replace "solid" with dashed(to make a dashed line) and dotted(to make a dotted line).

The orange numbers are the color of your border. Changing them changes the color. To get the six symbol color code you will need a hex color code generator, you can find one here.

9. When you are done customizing your border click preview and then if you like it click save!

Not Working?

1. Make sure you are using the Minima Template. This tutorial has not been tested on any other template.

2. Make sure your border color is not white. It won't show up if it is white!

3. Is your border with 0 pix? If so change it to 1 pix. Now you should be able to see it.

4. Still not working? Shoot me an e-mail here or post a comment. 

1 comment:

  1. I just wanted to add if you put is little code under 'Main wrapper" it only goes around the post. If you do 'sidebar wrapper' it will only go around your sidebar. =)

    ReplyDelete