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.)
Border Tutorial screenshot 1

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:

  1. Click on the Edit HTML tab on my dashboard.
    Border Tutorial screenshot 2
  2. Scroll down to the portion of the code that starts with
    /* Header
    ———————————————–
    */
    Border Tutorial screenshot 3
  3. 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.)
    Border Tutorial screenshot 4
    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.)
  4. 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.
    Border Tutorial screenshot 5
    Here is what my blog now looks like:
    Border Tutorial screenshot 6
  5. 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.
    Border Tutorial screenshot 7
  6. 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!
    Border Tutorial screenshot 8
  7. 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
    ———————————————–
    */
    Border Tutorial screenshot 9
  8. I look for the line of border code and find it under .post.
    Border Tutorial screenshot 10
  9. 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.
    Border Tutorial screenshot 11
  10. Here is the result of that change (I changed the border color variable to black so that you can see it better):
    Border Tutorial screenshot 12
    Notice the difference between the border I just changed and the border separating elements in the sidebar. That one is still dotted.
  11. 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.
    Border Tutorial screenshot 13
    Sure enough, there it is.
    Border Tutorial screenshot 14
  12. 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.
    Border Tutorial screenshot 15
  13. Here’s the result:
    Border Tutorial screenshot 16
  14. 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
    ———————————————– */
    Border Tutorial screenshot 17
  15. 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.
    Border Tutorial screenshot 18
  16. 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;
    Border Tutorial screenshot 19
  17. Here is the result:
    Border Tutorial screenshot 20
    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.

26 Responses to Blogspot 101 – Borders

  1. Betsy

    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?

  2. Libby

    Brilliant, thank you so much, I shall open up another blog and have a play!!! Ditto to what Betsey says re:- Chrismassy type borders.

  3. revka

    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

  4. Gaida

    Hi Revka,
    Wow! Another great tutorial.. Makes such a huge difference to the look and feel of your blog with simple changes.

  5. Revka

    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

  6. daisy

    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

  7. George

    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

  8. juvert

    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.

  9. Dena

    Wow! What an incredibly clear and thorough tutorial!
    An amazing help – Thank you so much :)

  10. Wendy

    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.)

  11. Revka

    You are quite welcome, Dena; I’m glad this was clear for you. :)

  12. Revka

    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.

  13. Ankush

    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.

  14. Ellen

    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!

  15. Sarah

    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.

  16. Raj

    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

  17. Ankushstudio

    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

  18. Martoni

    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

  19. jastene

    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!!

  20. sandrar

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  21. angelina jolie

    I love your site. :) Love design!!! I just came across your blog and wanted to say that I

  22. Virginia

    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) =-.

  23. Astrel

    Hi Blogsot 101.

    Thanks for your help. I went through your instructions and they helped, I would like to add a different colour to the area inside of the outer wrapper. Would I have to add a line to the outer wrapper code to acieve this?

    Thanks in advance.

    Regards,
    Astrel
    .-= Astrel´s last blog ..Uber Glam Dress Trends (office party anyone?!) =-.

  24. celebrity fuck you

    Sign: zdbrw Hello!!! wefcg and 3323ryatamhxvs and 7673 : I like your blog. cool post!

  25. lisa

    hi. i’m new blogger. i have read a lot tutorials. but your tuto are the most i understand. but, i still cannot find my coding for my outer wrapper. thats know coding like main border,outer wrapper. i want to make my border only in my posr and sidebar. and i want my header to be just transparent. but i cant get it no matter how much i read from all the tuto that everyone write. i hope u can help me out. i’m so stuck in this border problem. thank you. i hope u could email me the solution.

  26. fedo

    how about html.. i want make border around post

We Welcome Your Comments

...but spam will be deleted. Thanks!




© 2007-2008 RS Designs | design by Revka and Linda of RS Designs Berries and Cream Blog Design