Blogspot 101 – Borders
by Revka ~ November 29th, 2007. Filed under: Blogger Tutorials.*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.
For my example, I am going to start with the Minima template. Here’s a screen shot. (Click for a larger view.)
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
/* Header
———————————————–
*/
- 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.
/* Posts
———————————————–
*/
- 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:
/* Outer-Wrapper
———————————————– */
- 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.
November 30th, 2007 at 9:52 am
Awesome! How about putting in customized borders like stars or Christmas tress. Is there a way to do that, or does that take a certain program? Can you do anything with code?
November 30th, 2007 at 10:12 am
Brilliant, thank you so much, I shall open up another blog and have a play!!! Ditto to what Betsey says re:- Chrismassy type borders.
November 30th, 2007 at 10:42 am
Hi, Betsy and Libby,
Thank you very much for stopping by and taking the time to comment. I really appreciate it and am glad you found this tutorial helpful.
Regarding customized borders such as Christmas trees or stars, that cannot be accomplished using the border code. The only types of border this code can create are the ones specified in the site I linked to in the article (here is that link again). The star or tree borders are created with images, which is a whole different subject and requires photo editing software and a little bit of know-how.
Thanks for the question, though. I will add that to my tutorial ideas and cover that topic in the near future.
Thanks again for stopping by.
Revka
December 12th, 2007 at 11:25 pm
Hi Revka,
Wow! Another great tutorial.. Makes such a huge difference to the look and feel of your blog with simple changes.
December 12th, 2007 at 11:33 pm
Hi, Gaida! Thanks for stopping by and taking the time to leave your nice comment.
Yes, the fact that this is a simple thing to change which can have such a big impact on a design is one reason I decided to begin here.
I’m glad you found this tutorial informative and helpful. have a great day, and stop by again soon.
Revka
January 6th, 2008 at 2:07 pm
This is a great tutorial, the best one I’ve found, but I’m trying to add an image border to my entire page. If you view my blog – http://jansdailydish.blogspot.com you will see that it is curently a 3 column Minima stretch, I’m going to change this to a Minima style, using the same valentine theme. I’ve built my heart borders, a top border, 900×53, a middle border, 900×460 and a bottom border, 900×53 and uploaded these heart borders to my server.
I don’t know the coding or placement to insert this so that it borders my page. Can you help me with this?
Daisy
February 10th, 2008 at 11:51 pm
I want to put a backgroung color and or image outside the main border while keeping the center portion white. I am coming up empty. Thanks. GK
February 19th, 2008 at 10:36 am
[...] border tutorial was a big hit, and I am happy to have been able to help you spruce up your design. I have had [...]
March 25th, 2008 at 1:31 pm
[...] to learn more on how to customize your Blogger template? Revka has written guides on How to Change Your Borders, Leaving comments using Open ID and How To change Background Colors. And we have more coming [...]
May 27th, 2008 at 10:16 am
nice tutorial bro..it works fine…but what i notice is that when using FIREFOX i still can see the last border that you are talking about..but using OPERA, is ok.. but IE (old Version) is a disaster..i cant even see the main picture…what seems to be the problem here?what other remedies have you got?
Hm, Juvert, I find it odd that Firefox is giving you problems with this. I did all the work in FF. IE6 is a bear, and if you want the code to work in it, you will have to use that browser to login to your blog and tweak the code until it appears the way you want. I’m sorry I don’t have a better option for you. I hate IE!
Let me know if I can be of further help.
July 1st, 2008 at 1:03 am
Wow! What an incredibly clear and thorough tutorial!
An amazing help – Thank you so much
July 10th, 2008 at 10:24 am
I recently added a picture as my header, but due to sizing issues, the border was offset. Messing with the html code scares the bejeezus out of me, but this tutorial was so clear and reassuring that I gave it a shot.
And it worked. I got rid of the borders and everything looks so much cleaner now.
Just wanted to let you know how helpful this was. Thank you!
(Maybe one day I’ll have the guts to figure out how to make it three columns instead of two. It’s a bit of a jump. I know.)
July 14th, 2008 at 9:30 am
You are quite welcome, Dena; I’m glad this was clear for you.
July 14th, 2008 at 9:37 am
Wendy, I retrieved your comment from the spam folder – so sorry it ended up there! I’m so glad that this tutorial gave you the courage to try editing your template by yourself, and I’m even more glad that it worked.
Thanks for letting me know.
August 6th, 2008 at 10:13 pm
Hi! I have a blog http://waysforonlinemoney.blogspot.com in this i have added a border-bottom to all the post header(subtitle of page) but i get border to whole line but i want line shouldn’t exceed from the text means when their is small text like: “my blog” which is in left align so not able to fit in whole line i want border only upto it but it goes to whole line.plzzz help
I want to make sure I understand what you are asking. You want to know how to make a border go only as far as the post header text and not create a line the full width of that section. Correct me if I misunderstood, please.
You can’t make a border smaller than the width of the section. That is the point of calling it a border. If you want the post header underlined, find the part of your code that styles that text and add text-decoration:underline; as its own line. Then, only the text will be underlined.
If that isn’t what you wanted or if you need more help, please don’t hesitate to contact me.
August 15th, 2008 at 10:16 am
Would you be kind enough to explain how to put borders around pictures that I post at my blog? How do you do it so that every picture always has the same border (so that you don’t have to input the code every time you upload a picture to the blog)? Your help would be most appreciated. Thank you!
September 1st, 2008 at 2:34 am
I made the space between my double border that is around my header wider, because I want to make it a different color. How do I change that space between there if it has a url address? Hopefully that made sense.
September 2nd, 2008 at 11:16 pm
How to put a have 10 post on front page but it should contain only 2-5 sentense and when anyone click on post heading it will open whole post. Thanks i want to do it on http://ankushstudio.blogspot.com
September 3rd, 2008 at 2:28 am
Its good time for u all. http://ankushstudio.blogspot.com has decided to put free advertisement of blog and websites etc. Its all for free. Hurry up to get tons of traffic the offer will soon close… Email your requist to us with your ad picture or animation. If you are unable to email the photo then put it on your blog etc i will pick it. Keep on emailing and have some patience. Ads will be displayed from 20 or 21 sep 2008 for 15 or 1 month as your requist. Yes free. Get your free traffic. Email are being received soon it will close. Email: ankushraj007@gmail.com
November 30th, 2008 at 11:00 am
Very clear explanation.
Now I ‘m trying to remove the border from just the image in the post http://martoni-formaeelenco.blogspot.com/2008/11/50-anos-de-bossa-nova-wilson-simonal.html but I don’t know how to do it.
Can you help me?
Thanks, Martoni
January 24th, 2009 at 4:11 am
hello. just want to ask how to put a border something similar to your blog. i want to put a border around the whole outerwrapper but with a line separating the header and the main and siderbars below and another line separating the main and the two sidebars. thank u for the help!!
September 10th, 2009 at 9:02 am
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
September 10th, 2009 at 12:14 pm
I love your site.
Love design!!! I just came across your blog and wanted to say that I
November 9th, 2009 at 1:05 am
i spent all day trying to figure out how to change the border and your website made it soo easy! thanks!
Virginia´s last blog ..Cupcake-aholic: SusieCakes (Brentwood)