Wednesday, January 8, 2014

Adding A Border Between Sidebar Gadgets

Ever wanted to have a separation between your sidebar widgets, like a dotted line, etc. 

Well, look to this blog sidebar and you'll see that I just added a dotted line. 

Now let me tell you how to do this: 

Copy the code below:

.sidebar .widget {
border-bottom: 2px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Now, I'm going to tell you how to change this up to your preferences, but first let's get the code into your CSS box.

Go to Layout>Customize>Advanced>Add CSS. Click on Add CSS. Now I don't know about you, but I have quite a bit of stuff already in that box, so I go down to the bottom and get my cursor several lines below the last bit of code. One way to do this is to put your cursor at the end of the last word and hit Enter. Add the code and Save.

What I added to mine was a 2 pixel dotted black line (black is #000000). I imagine you could put solid if you didn't want dotted, but I didn't try that. That's really the only line, the second line, that you need to mess with.

I have either learned or written down in a blog tips notebook what color hex codes I prefer. Go here to pick out a color you like. It would be smart to do this before you add the code. Or you could add the code, Save, and then come back and change it. 

When you get to this website, mine is likely set to red shades, so look to the left and pick any color you want and then go through the various shades. Write down the hex code you like. It is # and six letters/numbers.

Now you want to figure out how thick you want your separator to be. I put mine at 2 pixels. Play with it till you get it where you like it. Then click Save.

That's it!

{Note: I got this CSS code to work on this blog, but not Color My Decor. I am looking for a fix. So if this code does not work for you, I will be trying to figure out why. Let me know if it does not please.}

Want To Get Each New Post Emailed To Your Inbox?
Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly

9 comments:

  1. Brenda, This site is wonderful! I've been pondering starting a new blog with blogger. I miss sharing my projects, photography and connecting with other bloggers. I may start blogging again with a totally different name. Just thinking about it and this would be a great resource.

    ReplyDelete
  2. This is neat to know! Have you ever tried putting something besides a line as a separator? I've always wanted to put a little scrolly thingy or a little rose border or something. do you know of a way to do that??

    ReplyDelete
  3. Thankyou so much for this! A very helpful blog!

    ReplyDelete
  4. SO HELPFUL! Thank you!

    ReplyDelete
  5. Thank you so much for this quick tutorial! It was so easy and I love the difference it made on our blog!

    ReplyDelete
  6. Thanks for sharing brenda i was looking for help suddenly i landed at your blog very nice and helpful article.
    Learn tips and tricks

    ReplyDelete
  7. Hey Brenda, absolutely love your blog!

    I tried using this code and it didn't work :/ any tips? I'm trying to get a solid line under the side widgets name, so it looks more clean on my blog (MacailaBritton.com).

    Thank You!

    ReplyDelete
  8. Yeah very useful article specially for blogger's beginner staffs.
    Here is the same article, I discovered very first
    Border for Blogger Widgets

    ReplyDelete