Monday, November 10, 2008

How To Add A Border In Blogger

Although I tend to like simple and minimal designs, I always thought my blog was too simple, too plain, and too much white space.

Well, I must say I am really digging the subtle elements I just added. These two elements give my blog the much-needed oomph. I couldn't be more pleased. And best of all, I did it all by myself. So that means you can do it yourself, too!

I am by no means an expert. I followed the instructions from here, but tweaked a little to make it my own. I do believe that this small tutorial will only work if you already have a 3-column template.

First, I added a dotted border around the outside wrapper (NOT the entire blog) by inserting this code (in red) under #outer-wrapper {.

#outer-wrapper {
border: 3px dotted #38ACEC;
background-color:#ffffff;


This will give you a thin dotted blue border and a white background inside the border. To pick your own colors, refer to the Color Code Chart.

Then, insert this code (in red) under body {.

body {
background-color:#FBB117;

I made mine orange. This adds a background color to the outside of the border. I like it because it draws your eyes to the blog's main content, but it is also visually pleasing to have that extra splash of color.

(Alternatively, for the second step, you can go to Layout>Fonts and Colors and change Page Background Color to a different color to achieve the same result. The only negative about this option is that your color choices are limited.)

Easy, right? But it took me a good hour to figure it all out. Hopefully it won't take you nearly as long! :)

4 comments:

  1. Hello - popped in from Dorky's blog where you wrote Tips on Taking Good Pictures - I really enjoyed your post.

    Your blog looks really nice! Thanks for the tips!

    ReplyDelete
  2. I too came over to check out your blog after reading your guest post at DAT.

    Unfortunately, I don't use the three column template for my blog, but I think it's great that you've figured out how to personalize it. I struggle with doing anything with the html code on my blogs.

    ReplyDelete
  3. I thought your post on Dry as Toast was wonderful. I will be back to your post to see what you're up to.

    Love the border!

    ReplyDelete
  4. Welcome everyone! Thanks for visiting my little blog. I was hoping to get more traffic by guest blogging at DAT. Mission accomplished. :)

    ReplyDelete