Add a double line border

How do you get it to make it a double line? I tried experimenting but I'm not sure which fields should be changed. Thanks, this site is awesome!


This is an easy thing to change. You will look for the code that you wish to change. If it is the post, you look for the post code in the CSS style sheet. If it is the sidebar, you look for the sidebar code. As a matter of fact, anything in the CSS style sheet that says border can be changed.

This is the code in my template (a modified Blogger Minima template) for the post:

.post {
margin:.5em 0 1.5em;
border:1px dashed $bordercolor;
padding: 5px;
padding-bottom:0px;
}

This is the line we are interested in changing. See where mine says dashed? That gives me the dashed line around my posts. Change that to double. You may want to also change the 1px to something a little thicker, like 3px or 4px just to make it stand out better.

Actually, there are other styles you can use. Here is a list of them:

1. dotted
2. solid
3. dashed
4. double
   
5. outset
6. inset
7. groove
8. ridge

There may be more, but I'm not aware of them.

And here is another little tip. You can apply a different border to each side. For instance if you want a double border on the bottom only, you would change the above code to:

.post {
margin:.5em 0 1.5em;
border-bottom:3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

See where I added -bottom? That same line can be changed for all sides using:

1. -top
2. -right
3. -bottom
4. -left

Or if you want it on the bottom and right only do this:

.post {
margin:.5em 0 1.5em;
border-bottom: 3px double $bordercolor;
border-right: 3px double $bordercolor;
padding: 5px;
padding-bottom:0px;
}

You get the idea. There are a million ways to play with this. It is just a matter of what look you want.