Borders in Blogger Template

November 1, 2008

In Blogger default templates (like Minima), you can see that all kinds of borders are present. Borders around header, borders between posts and sidebar gadgets....
In the control menu, Fonts and colors, we are allowed just to change the color of the border. But there's so much more to it....
First, let's check the styles for the borders that we can use:

• none: no border at all
  
• dotted: series of dots.
• dashed: series of short line segments.
• solid: single line segment.
• Double: two solid lines.
• Groove: 'carved' into the canvas.
• ridge: like it is coming out of the canvas.
• inset: like it is embedded in the canvas.
• outset: like it is coming out of the canvas.

HOW TO CHANGE MY BORDER?
To make any kind of changes, you have to go to:
DASHBOARD ► LAYOUT ► EDIT HTML, and find the code that corresponds to the borders:

border:1px solid $bordercolor;

...your code (CSS style) may be a bit different, (this is example for Minima default template), but it will always start with "border:"
...use CTRL + F (Apple Key+F) to locate the line easily...

We can change:
- the width 1px into 2px, 3px, 4px....
- border style solid, into some other style. Like, dotted, or dashed.....
- change the color, inserting the part in green, below the existing part (in white):

border: 1px solid $bordercolor;
border-color: ff7700;

...with this, we gain control of border color, so Blogger "$bordercolor" is no longer in charge...
..to change the color into the one you want, change the hex value (hex color library here)..

There's also one cool style that I don't see so often in Blogger Designs, and that is using borders for a specific part of the "box". You can change right, left, upper and bottom border. And they can all be in different styles!
I want to add a frame / box / borders around my sidebar section. And, I want left one to be red, right one blue, bottom one green and top one yellow. Here's how:

#sidebar-wrapper {
border-left: 3px solid #FF0000;
border-right: 3px solid #0000FF;
border-bottom: 3px solid #00FF00;
border-top: 3px solid #FFFF00;
padding-left:7px;
width: 220px;
float: $endSide;

...I added some padding-left so that the text is not to close to the border...
...change the width, colors, styles...
...and that's it. I know it looks silly, but you'll experiment, and get a beautiful results....

And if you are up to some more customization, check this article about placing your custom picture as a divider.

Smile!