64 Styling Sections of your Blogger Blog with Borders and Backgrounds
March 14, 2008 /

Using borders and backgrounds for the main areas of your blog are simple techniques which can achieve dramatic stylistic effects.

Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar.

Most importantly, backgrounds and borders don't require you to have extensive knowledge and skill with creating and using images. Instead you can use simple colors, or generate tiled backgrounds to create a completely unique template for your blog.

Here are some of my favorite examples of how borders and backgrounds can be used to separate content:

Pro Blog Design

This is this excellent design exemplifies the theme of this post perfectly. Thick borders and simple backgrounds immediately convey which areas are important.

Mimbo Pro

Here colored backgrounds are put to great effect, with only fine borders beneath elements to add a sense of perspective.

Options Theme (By Justin Tadlock)

The border and background colors are varying shades of the same palette: subtle changes in color add depth to each element of this theme.

After seeing these examples, you're probably wondering how you may achieve these same effects in your Blogger templates! So allow me to explain the basics of adding backgrounds and borders to your blog.

Different styles for borders

There are many ways to set the properties for borders in your blog template. In this tutorial, I will only explain the basic concepts to help you get started.

The easiest method of all to add a border to an element of your template is to add border properties for a particular blog element in the <b:skin> section of your Blogger template.

For example, the "#main-wrapper" section in most Blogger templates refers to the main posts section. To add a border to this section, we could add a line like this:

#main-wrapper {
border: 3px solid #000000;
[other properties here]
}
This will reproduce a 3 pixel wide, solid black border, like this:

A section with a solid black border, three pixels wide

Using this example, you could also change the color, and width of the border, like this:

A section with a solid red border, five pixels wide

Borders don't have to be solid!

Instead of solid borders, you could add different properties to create unusual effects such as:

Dotted
border: 3px dotted #000;
Dashed
border: 5px dashed green;
Double
border-style: double; border-color: blue;
Outset
border-style: outset; border-color: #404040;

Different styles for backgrounds

Backgrounds can either be a flat color (defined as a hex value, such as #000000) or as an image (which is defined by the URL of the image).

Flat color backgrounds are easily created by adding the hex color value of the image as a property in the style section of your Blogger template. For example, if I wanted to add a yellow background color to my sidebar, I could add the line in red to the #sidebar-wrapper properties in my template code, like this:

#sidebar-wrapper {
background: #ffcc00;
[other style properties here]
}

To use an image as a background for a section of your template, you will need to host the background image online, and define the image by linking to the URL of the image, like this:

#sidebar-wrapper {
background: url(http://imagehost.com/yourimage.jpg);
[other style properties here]
}

You can also combine color and image background properties, like this:

#sidebar-wrapper {
background: #ffcc00 url(http://imagehost.com/yourimage.jpg) no-repeat top left;
[other style properties here]
}
The example above would feature an image at the top left of the sidebar, while all other space would be yellow.

You can read more about adding background images to your Blogger blog in this previous article.

Combining Border and Background Properties

This is where the border and background properties can become very stylish when applied to elements of your Blogger template.

By combining

A wide grey border
With...

A Paler Grey Background
You can create an effect like this:
A stylish section for your blog!
border: 5px solid #666666;
background: #333333;
You could even add a background image, repeating across the whole section, like this:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

Where could you add border and background styles in your Blogger template?

The main sections of your Blogger template would be the header, posts section, sidebar(s) and the footer section.

The style properties for these sections in your template would probably look like this:

  • Header Section - #header-wrapper or #header-wrap
  • Main Posts Section - #main-wrapper, #main-wrap or #main
  • Sidebar(s) - #sidebar-wrapper, #sidebar-wrap, #sidebar or .sidebar
  • Footer Section - #footer-wrapper, #footer-wrap or #footer

If you edit any of these sections in the <b:skin> section of your Blogger template, be sure to check if there are already any border or background properties defined. If there are, you will need to edit these sections, rather than add more new ones. Otherwise your edits will not appear the way you would like them to look!

Remember: you can always preview changes before saving your template! Then if you decide you don't like the changes you have made, you can click the "clear all edits" button and begin again.

Experiment with different styles!

Using properties for the borders and background properties of the different sections in your template, the style possibilities are endless! Try different color schemes, contrasting borders and backgrounds, and experiment with tiling images to see what would work well for your own blog design.

Here are some useful resources to help you use borders and background images in your own Blogger template designs:

I hope this post has helped you learn more about border and background properties. Please let me know how you have used these techniques in your own designs by leaving your comments below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

64 comments:

  1. Mimbo Pro is a great example of how you can do so much with so little. Nice article, you did a solid job of explaining borders and background to new users.

    ReplyDelete
  2. Thanks for stopping by Vinh Le :) I'm glad you agree with me about the style of Mimbo Pro. I also see similar properties in Brian Gardner's designs: excellent designs based on simple concepts. I hope my tutorial conveys that the same can be achieved in Blogger powered blogs too.

    ReplyDelete
  3. Hey thanks alot, I really appreciate the work it took to put this tut together. Thanks!!

    ReplyDelete
  4. Thanks Amanda for this post. I did not know that you can use different border styles (I only know of the straight lines). I love your blog!

    ReplyDelete
  5. I notice you may have the author higlighting hack. I was wondering how do you get it to call your comments and seperate them without changing your name/idenity to something new? I did follow hackospre hack but it looks like it don't work.

    ReplyDelete
  6. For Tori:

    You're most welcome, I'm glad to know this post was useful for you. Thanks for stopping by!

    For Babette:

    Yes there are a few different styles you can use to display borders using only CSS. I only listed the main ones here, though if you follow the link for "CSS Border Properties" in the resources section, you can see even more. Thank you for your lovely comments :)

    For Anonymous:

    You've brought up a good point there, this is something I haven't thought of writing about before. My template includes code for author and non-author comments so I am able to style them easily. I'll take a look at Hackosphere's tutorial to see why this may not be working for you.

    Thank you all for your comments :)

    ReplyDelete
  7. Hi!

    This is very helpful. I applied one on my blog : http://anyfreebies.blogspot.com

    Thanks,
    Minette

    ReplyDelete
  8. Is there a way to add a border with the old templates? I can add it around the header and footer, but not around the content (as a whole--I can around the main portion of the content and the sidebar, but they don't line up with the header and footer).

    I'd use the new templates, but I prefer to upload directly to my server.

    ReplyDelete
  9. Hello

    Amanda, do you happen to know what the width of a background picture should be in order to take up the whole screen?
    Thanks

    ReplyDelete
  10. How do i make my main sections transparent? could u share wif me the code?
    Tys alot

    ReplyDelete
  11. Hi Amanda,

    This site of yours helped me a lot. It's well writen and easy to follow.

    Thanks

    ReplyDelete
  12. Thanks for all the tips.
    But how can we style comments?
    Specifically how can I add borders to comments like what you have here?

    thanks

    ReplyDelete
  13. Great tips here. How can I add a decorative jpg. border vertically along each side of the main body portion (header, posts + sidebar)? I think it's the outer-wrapper, but I can't figure out how to add a decorative line image in the code to separate the background from the main portion. Any suggestions?

    ReplyDelete
  14. This is my question too, Kristen. I would like to add a decorative border on either side of my "blog" as well. Can't figure it out either. I will check back to see if you come up with something :) Thanks for all your great help Amanda! This is a really great source...you make it very easy to understand and still help get the job done! Thanks!!!

    Jess

    ReplyDelete
  15. I LOVE Your blog Amanda, I use it all the time to help me design my blog. So question, I incorporated borders and background color into my sidebar and it applies to all my widgets.
    This is what the code looks like:
    .sidebar .widget, {
    border: 4px outset #80746E;
    background: #CCCCAF;
    margin:0 0 1.5em;
    padding:10px 10px 10px 10px;
    }

    I would like to be able to have the borders surrounding only some widgets or have them be different colors. Any suggestions about how to change the code so that it doesn't apply to all of them? You can check out my blog here: http://www.freewire.myprmusicwire.com/

    Thanks in advance!

    ReplyDelete
  16. I'm trying to figure out the same thing as Meagan. I've been having a blast the last few days fixing up my blogger template, but as I add more widgets to my (hopefully) business blog, I want to be able to give individual widgets their own backgrounds and borders.

    ReplyDelete
  17. Thank you so much! I was able to incorporate this styling into my blog. You made it so easy to understand!

    www.screweduptexan.com

    ReplyDelete
  18. I want border as thin as possible than 1px ? how can i do this? In mozilla browser table border looks very thick can you give me other option to table border so that table rows and columns should also display border.

    send me reply at umesh_nevase@yahoo.com

    ReplyDelete
  19. Thanks, this was super helpful.

    ReplyDelete
  20. is there a way to turn on all borders for every element at one time? I need it to coordinate layout of page elements.

    thank you.

    ReplyDelete
  21. This worked beautifully - thank you!

    ReplyDelete
  22. Thanks so much I applied it already, the double one.I also book mark your site so no need for me to search again when I need it again.

    ReplyDelete
  23. hi amanda, i have been a constant reader here in your blog and it really helped me a lot. am just concentrating on learning how to do it. my question about the border if you want something not just a lines or dots but something like a spiral notebook or whatsoever.

    ReplyDelete
  24. Hi Amanda, I added a dotted border around my header and love it--thanks so much for the great tutorial. Now I am wanting to add borders like the ones on http://allsorts.typepad.com/allsorts/. Each category has a dotted border and her posts have left and right dotted borders. I don't see a line for main wrapper in my layout html template. My url is http://iweararedhat.blogspot.com. Any chance you can help me out again?

    Lucy

    ReplyDelete
  25. Oh! I have a border around both my header and posts. I am soooooo loving your tutorials. Thank you, thank you thank you...

    ReplyDelete
  26. WOW! I have been looking for a tutorial like this for weeks. THANK YOU!!

    ReplyDelete
  27. Your guide looks simple and easy to understand fo a beginner like me, but I can't seems to find the html code, even after searching for it umpteens times in the edit html. Would appreciate some help here.
    www.suciunggul.blogspot.com

    ReplyDelete
  28. My apologies as I realise this is an old post. I'm desperately trying to find a way to add borders but I've been through various different blogger templates and I am unable to find the places to add the code. Main-wrapper etc. don't seem to be in the coding for any of the current templates. Could you tell me where I should be looking for body, sidebar, header with current templates?
    Thanks

    ReplyDelete
  29. These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post, writing is simply great, thank you for the post

    ReplyDelete
  30. Hi, where would I put these codes? Is it on advanced CSS or edit template HTML?
    Thanks for reply. ASAP

    ReplyDelete
  31. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  32. Hi there! I am trying to figure out how to make the seperator line between my posts and sidebar a dotted line rather than a solid. I cannot figure this one out. I use the simple template. Would you know how? If you need to see mine it is at www.chicagobungalov.com.

    Thanks!!!

    ReplyDelete
  33. Hi,
    I would love to have each of my blogpost with a border on my homepage.
    I cannot find the #main-wrapper, #main or #main-wrap in my html codes.
    Can someone help me with this pls?

    ReplyDelete
  34. These are great templates. I like the classy look of it. They're great! Thanks!

    ReplyDelete
  35. It is always a real pleasure to stumble upon creative blogs and helpful information and this is what your blog is all about.

    ReplyDelete
  36. Quality content and creativity of your blog is what keeps the traffic pouring in.

    ReplyDelete
  37. infinite thankssssssssssssssss

    ReplyDelete
  38. Can you take one section of your sidebar, put an image in it and make the background behind the image transparent and leave other images with the background they already have? For example, I made title button images to go over the various sections of my sidebar. I'm using awesome inc. template and I can have the background of them all totally transparent, but some of the section I don't want to be transparent or you couldn't read them (text like the labels list). Can I do that? Thanks!

    shadesofsafhire.blogspot.com

    ReplyDelete
  39. I mean leave other SECTIONS with the background they have, not other images with the background they already have

    ReplyDelete
  40. http://1.bp.blogspot.com/-RuofrOtLdoQ/UFjEhsByDEI/AAAAAAAAAgY/AWQAZ8JIFHg/s1600/Section+colors.jpg

    is a picture of what I need help with. Thanks :)

    ReplyDelete
  41. Hey, this was a pretty nice tutorial, i was able to use your code to design my blogger perfectly. it was so helpfull to me. keep your good work going.

    ReplyDelete
  42. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  43. Learn about Houston,the suburbs, neighborhoods, schools and the real estate market here. This blog is authored by real estate experts from all around Houston. If you're looking to stay updated on Houston Real Estate Market, this is the place for you.

    ReplyDelete
  44. This is did not worked on my blog. For now I have removed the code but after looking at my blog can you suggest any changes to above.

    Link: www.spicejaat.com

    ReplyDelete
  45. how to add this to my footer widgets? here is my blog BLOGGER Tips and Tricks! you can see the footer widget there!..


    Looking forward to your reply..
    Thanks for sharing this

    ReplyDelete
  46. Your site has great posts and links. Good job. All of our team from http://com-names.blogspot.com love it.

    ReplyDelete
  47. Your post is so helpful. Thank you for sharing.

    ReplyDelete
  48. please help me i want the border line just as in the mimbo pro[white border line around the whole blog] example above please please help me
    please give reply

    ReplyDelete
  49. Thank you very much for your interesting post !
    Quote:
    "Borders and background colors help separate areas of your blog, and can be used to highlight important content, such as your blog posts, or features in your blog sidebar."
    This exactly what i'm looking for .
    could you please give me the required code and where to put it ?
    to take a look : http://isecure-you.blogspot.com/
    thank's in advance

    ReplyDelete
  50. Good tips. Recently I have created the template the layout for my template and then change the margin and padding for the main element, but there is no distinguishing yet for my selected template. Later, conducting a search on the internet I saw some great examples of image styling at Simple website tutorials that provide an effective way to do it.

    ReplyDelete
  51. I can't stand sleeping in complete silence, so I always have a fan on. Also, I'lll admit that I use my ipod for most of my work day since
    http://www.arabie3lan.com الشيخ الروحاني
    I spend a lot of it working through paperwork. I also often use it for my walks, though, from time to time, I'll go without it and just listen to the sounds around me and take in the nice weather.

    ReplyDelete
  52. Orjinal Fx15 ile sağlıklı ve bitkisel kilo vermeniz artık hiçte zahmetli değil! Fx 15 in içeriği tamamen bitkisel kökenli karışımlar ile oluşmaktadır. Fx15 sayesinde doğal yönden hiç bir şekilde diyet ve zayıflama uğruna sizi terleticek aletler kullanmadan kilo verebilirsiniz. Sağlığınız için kesinlikle Orjinal fx15 kullanmanızı tavsiye etmekteyiz. Orjinal fx15'in içeriğinde bulunan bitkiler üzüm çekirdeği ekstresi, hücre zarlarını güçlendirir ve hücreleri oksidatif hasardan korur. Bu ürün hakkında olumlu veya olumsuz düşüncelerinizi Fx15 yorumlar sayfasından diğer kullanıcılarımız ile paylaşabilirsiniz. Fx15 kesinlikle bir ilaç değildir. Bu ürünün ilk kez kullanmaya karar verdiyseniz Fx15 kullanımı sayfamızdan, ürünün kullanımı hakkında detaylı bilgi edinebilirsiniz. Zayıflamada en son buluş olan FX15 sizi en hızlı şekilde zayıflatıyor. İnsan ömrünü düşündügümüzde yaklaşık olarak Türkiye de 65 yıl. Bu zaman diliminde her günün ne kadar önemli oldugunu anlayabilirsiniz, fx15 ile zaman kaybı yaşamadan en kısa sürede zayıflıyabilirsiniz. İnternet üzerinde uzun süreli araştırmalarımdan sonra fx15 hakkında insanların neler düşündügünü bulmaya çalıştım. Kullananlar üründen aldıkları verim hakkında çok güzel şeyler yazmışlar bazı yazılar ise neredeyse benimde ürünü kullanmama neden olacaktı. Fakat ben zayıf oldugumdan dolayı kullanamadım. Şimdi zayıflama kararı aldıgınızı varsayıyorum ve zayıflama sihirbazımız fx15 ‘i nereden temin edeceginizi sizlere burada yazacam. fx15 Zayıflama özelliğinin yanında içeriğinde bulunan diğer bitkiler, üzüm çekirdeği ekstresi, hücre zarlarını güçlendirir ve hücreleri oksidatif hasardan korur. Antioksidan alımı sadece hastalıklardan korunmamıza sağlamakla kalmaz, birde erken yaşlanmayı önler, gençleştiricidir ve enerji vericidir. Lotus yaprağı ekstresinin toksinlerden arındırıcı ve lipid düzeyini düşürücü etkisi vardır. Fazla kiloları gidererek sindirim sistemini düzenler. Yapılan araştırmalar ayrıca lotus yapraklarının damarları genişletip tansiyonu düşürdüğünü ispatlamıştır. Yeşil çay antienflamatuar ve hücre yenileyicidir.
    * Dolaşımı düzenler.
    * Kolestrolü düşürmeye yardımcıdır.
    Yeşil çayın cildi sıkılaştırıcı özelliği ile de zayıflama sürecindeki cilt sarkmalarını da önler. FX15 tok tutucu özelliği ile size doğal diyet yaptırır. Özel bi program uygulamanıza gerek yok ama tatlı – hamur işi gibi şeylere dikkat edersek daha iyi olur. Cildi sıkılaştırıcı özelliği ile gözler görülür incelme sağlar. Düzenli kullanıma devam ederek ideal kilonuza gelebilirsiniz. FX15'in bir ilaç olmadığını tekrar belirtmek isteriz. İçeriğindeki üzüm ekstresi sindirimi düzenlediği için mide rahatsızlığı gibi bir şikayetiniz varsa daha da fayda sağlayacaktır. Yüksek tansiyonu düşürücü özelliği vardır. FX15'i ideal kilonuza gelinceye kadar kullanmanızı öneririz. Minimum 60 günlük kullanım önerilir. Daha vermeniz gereken kilolar varsa devam edersiniz. Yediklerinize dikkat etmeniz çok güzel. Ama yerleşik yağların vücuttan atılması gittikçe zorlaşır. O yüzden yağları parçalayıp vücuttan atması için FX15'e devam etmenizi öneririz.. Sürekli bir diyeti bırakıp başkasına mı başlıyorsunuz? Peki buna rağmen değil bir kilo 100 gram bile veremiyor musunuz? O halde size önerimiz diyet kelimesini kesinlikle unutup küçük ayrıntılara özen göstererek fazlalıklarınızdan kurtulmanız. Bir dirhem et bin ayıp örter anlayışının tarihte kaldığını hepimiz biliyoruz. Ama dirhem dirhem vererek mutluluk veren bir bedene sahip olmak çok zor değil. Kilo vermek için 50 farklı değişiklikle formda vücuda bir adım daha yaklaşabilir, sağlıklı ve zayıf olmanın tadına varabilirsiniz. fx15 sayesinde fazla kilo ve yağlarınızdan kurtulabilirsiniz ve gönül rahatlığı ile hemen kullanmaya başlayabilirsiniz.

    ReplyDelete
  53. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    ReplyDelete

  54. Escorts in Houston Please click on of our Houston escorts for a full portfolio and biography. All of our escorts are 100% genuine, and what you see is what you get. We do update our escorts frequently so do check back often.

    ReplyDelete
  55. Austin Escorts provides person activity and escorts (incall & outcall) for Austin, including Sugar Area, Baytown, Galveston, Conroe, Galleria, Galena Park, Highlands, Pasaden, Woodland, and Meadows.

    ReplyDelete
  56. Houston escorts are accessible twenty four hours each day, 7 times weekly for one-on-one person leisure companies, 2 lady reveals, bachelor events, birthday events, fetishes, and position plays.

    ReplyDelete
  57. Please take the time to view our model rates and escorts in Austin gallery, as we are constantly updating our adult model portfolio, so do check back often. Feel free to also browse the webcam gallery full of ladies and couples ready to give you a private show from their computer screen to yours.

    ReplyDelete
  58. I can't do this because I can't fine #sidebar-wrapper { anywhere in my blog...

    My blog is http://karurosuphotoshop.blogspot.de/p/welcome.html

    ReplyDelete
  59. it's working on my blog..www.tecchnology151.club

    ReplyDelete
  60. Houston Seo services is catching on due to the current market conditions; it is not easy for a website to get a top ranking on the search engines and reach the targeted customers without the assistance of Houston Seo services. This shows that search engine optimization has become a necessity in the today’s competitive environment. The Houston Seo services have over the years helped businesses accelerate their online visibility by offering their website top ranking on the major search engines.
    http://actualseomedia.com/houston-seo-services/

    ReplyDelete
  61. Escort bayan'a
    ulaşmanın en iyi yolu Ankara escort sitesinden geçer.
    Ankara geceleri ve gündüzleri ile değil günün 24 saatinde bile ayrı bir güzelliğe sahiptir.Günün stresini atmak için
    ankara escort sitelerinde bulacağınız neşeli ve eğlenceli
    Ankara escort ile eğlenceli anlar geçireceksiniz
    Ankara escort siteleri ile bulacaınız escort kızlar
    ile yalnızlığınıza son vereceksiniz.Dilerseniz Yabancı Escort
    bayanlarda bulabilirsiniz. Türkiyede İzmit escort,
    Gaziantep escort,
    Kuşadası escort ve tabikide
    İstanbul escort bulabilirsiniz.
    İstanbul escort apayrı bi konu onu sonra açıklıcam...

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy