If you are using a template with no borders or maybe, you would like to add some borders to an existing template, here is a simple tutorial on how to go about doing this. I am going to show you how to add borders on a Simple Template Design since it is the one that I am using on this blog;
How to Add a Border around the Header Title
Using Ctr + F, locate .Header h1 {
Immediately below it, paste the following code;
border: 1px solid #330099;
You can change the border color to whatever color you want by going to the following website; http://html-color-codes.com/. To increase the thickness of the border, increase the number infront of px to whatever number you want. You can also change the style of border from solid to dotted etc.
To change the background color of the header and increase the thickness of the border, I will add background: #33CC33; immediately after border: 1px solid #330099; and then changes 1px to 3 px.
My final coding will now be;
.Header h1 {
border: 3px solid #330099;
background: #33CC33;
To Add Border and Background on the Header Area (header plus description area)
Locate the following code
.header-outer {
But since my header has an existing background color, I am going to replace it with the color of my choice.
Here is the original code before making changes;
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image:none;
My final coding after making changes;
.header-outer {
border: 3px solid #330099;
background: #33CC33;
background: $(header.background.#33CC33) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image:none;
This is how the whole header area looks like using the above code;
To Add Border and Background on All your Headings (H2)
Locate h2 {
Immediately after it, paste the following codes
border: 3px solid #330099;
background: #33CC33;
The final code should looks like this;
h2 {
border: 3px solid #330099;
background: #33CC33;
This is how all my H2 looks like using the above coding;
To add Border and Background on Posting Areas and Sidebars
Locate the following code; .main-inner {
Just below it add;
border: 3px solid #330099;
background: #33CC33;
The final code should looks like this;
.main-inner {
border: 3px solid #330099;
background: #33CC33;
This is how my blog looks like using the above code;
To Add Borders on the Posting Areas Only,
Use the following code;
.main-inner .column-center-inner {
border: 3px solid #330099;
background: #33CC33;
That is all what you need to know about borders and background. Preview your template, if you like the changes, click on Save Template.
