*To view all of the posts in this series, either click on the following link, or type Blogger Tutorials into our search box.*
I had to pick somewhere to start, and the first thing I thought of was borders. Borders are pretty simple once you get the hang of them, and they can really enhance your blog. I am always changing the borders on my blog – removing all or parts of a border, widening a border, changing the style, or adding borders.
I am going to try to make this tutorial easy to understand by using screen shots in conjunction with written explanation. If at any point I lose you in my explanation, please leave me a comment so that I can clarify that point.
Without any changes, this template features two complete borders around the header, a dotted partial border between each blog post, and a dotted partial border between sidebar widgets. I have circled the borders in yellow and have an arrow pointing to each one for good measure.
I am going to remove the header border, add a double border around the whole content area, and change the style of the border between the posts and comments. Here are the steps I need to take:
- Click on the Edit HTML tab on my dashboard.
- Scroll down to the portion of the code that starts with
- Find the code for the outer header border. It is in the #header-wrapper section, which is where styles are specified for the entire header area. (There are also smaller header sections, like the description area, that have their own styles.)
Notice that there are three parts to the border code: the line width (specified in pixels – this example has a width of 1px), the type of line (this example is a solid line), and the color (this example uses the Blogger variable $bordercolor, but you can also use a six-digit color code, such as #000000, which is black.)
- There are two ways to delete this border: I can either entirely delete that line of code, or I can set the border width to 0 or to “none”, effectively making it disappear without deleting the code. I prefer the latter method simply because if I ever decide to put the border back in, I need only change the pixel code instead of having to type that whole line back in.
Here is what my blog now looks like:
- I still want to get rid of the remaining header border. So I scroll down a little further, looking for header code that says border. I find it under #header, not very far from the #header-wrapper section we just edited.
- I repeat step 4 with this line of code, too, changing the border width from 1px to 0 (it is not necessary to put px after 0). Here is what my blog looks like now – the borders are completely gone from the header. Success!
- Next, I want to change the style of the partial border separating each post. (Here is a link to allowed border styles with explanations about what each style does.) I want a dashed border instead of a dotted border. Since I know this is the post area, I scroll down to find that section of code.
- I look for the line of border code and find it under .post.
- Notice that this border code specifies border-bottom. That is a handy trick to know: to create a complete border, just state “border”. However, you can create a partial border by specifying a certain section of the border: border-top, border-bottom, border-left, or border-right. I still want this border to come at the bottom of the posts, so I will leave it as border-bottom. However, I want to change the border style from dotted to dashed, which is a very simple change to make.
- Here is the result of that change (I changed the border color variable to black so that you can see it better):
Notice the difference between the border I just changed and the border separating elements in the sidebar. That one is still dotted.
- Next, I want to change that sidebar border. For kicks, I want to change it to a double border. First, I need to locate the code. I know it will be in the sidebar section of the code.
Sure enough, there it is.
- Changing a dotted border to a double border is only slightly more complicated than changing a dotted border to a dashed border. With a double border, you need a width of at least 3px to ensure that there is space between the two lines. A width of 1px only allows one line to show, and a width of 2px makes the double line appear to be one thick line. 3px will give you separation between the two lines, and you can experiment to see how wider widths will affect the end result. I’m setting my border to 3px double.
- Here’s the result:
- We’re almost done. All I have left on my wish list is to add a double border around the entire content area. First, I need to find the container for this area:
- This time, there is no border, so I am going to have to add my own line of code to make a border. First, I need to decide where it needs to go. There are three sections under Outer Wrapper: #outer-wrapper, #main-wrapper, and #sidebar-wrapper. If I didn’t already know where I need to add the border code, I could figure it out by process of elimination. I don’t want a border around just the sidebar, nor do I want a border around just the main section where my posts are. That leaves only the outer-wrapper. This is where I will add my code.
- Remember, there are three parts to border code: width,type, and color. I want a double border 4px wide the same color as my other borders. So I need to add this line of code:
border: 4px double $bordercolor;
- Here is the result:
You can see that I have accomplished all I started out to do: “I am going to remove the header border, add a double border around the whole content area, and change the style of the border between the posts and comments.”
If I were making these changes for real, I would also add some padding at the top and bottom so that the double border would show up better, and I would probably widen that content area. However, we can talk about how to do those things later. This tutorial was only about borders.
As a recap, here are important things to remember when customizing your borders:
- Border code begins with the word border.
- There are three parts of code needed to create a complete border: width, type, and color.
- There are several different types of borders: solid, dotted, dashed, and double are the ones used in our example.
- You can create complete borders by starting your line of code with the word border; you can create partial borders by starting your line of code with border-top, border-right, border-bottom, or border-left.
I hope that I made sense and that you have learned a bit more about borders because of this tutorial. Your comments and questions are appreciated.