I put a call out on Twitter recently asking my followers what they’d
like to see on the blog and one request was for how to add border to
different areas of your blog. So today I’ll show you how to do this to
the different areas of the blog design.
So first let me explain the code behind adding borders. The HTML code for borders is actually really simple.
Border: 1px solid #000;
So to break this down it is Border: width style colour.
The width can be anything you want. 1px would be a very thin border and 5px would be a much wider border.
The style can be solid, dotted, dashed or double. These styles are pretty self explanatory.
The colour can be anything you desire #000=black #fff=white #999=dark
grey #ddd=light grey. There are 1000s of colour codes out there for
every desired shade and there are many sites online that can provide
these codes for you. Just google HTML color codes to find the colour
code you need.
Using the attribute border adds a border all the way around the area
you’re applying it too but maybe you’d just like a top, bottom, left or
right border. Well that is easy to do too. Instead of writing ‘border:
width style color’ write ‘border-left: width style color’ (or right,
top, bottom depending on where you’d like the border applied)
Now that you know the code behind applying borders, lets examine some areas we could apply it too.
Header
Maybe you’d like to apply a border around your header. The code for
the header area is: #header-wrapper. So to add a header border we’d add
the following code to the Add CSS box in Blogger’s template designer.
#header-wrapper {
Border: width style color;
}
To add borders to other areas of your design just
replace the bolded area in the code above with any of the following (the
code part is bolded) .
.sidebar – sidebar
.main-inner – to add border around the content area which includes the post and sidebar areas
.post-body – adds border to the body of your post but doesn’t included the date and comment/meta area
h3.post-title – add border around your post titles only
.date-header span – adds border around the date
h2 – adds border to date and sidebar titles
.tabs-inner – adds border to your pages widget
So there’s a little guide to adding borders to content
areas for you guys and like always just drop me a comment if there is
anything you don’t understand or need clarification on.
