Add a border to your posts and sidebar
I was wondering if you knew the code you had to place in the HTML so that all of your posts and your sidebar are in separate boxes.
This is a fairly simple task. I'm working from the Minima template, so your template terminology may be slightly different. You will be looking for the sidebar area in your CSS style sheet.
Look for this in your template.
.sidebar .widget, .main .widget {Then you will replace it with this code:
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
.sidebar .widget, .main .widget {That will give you a nice border around your posts and your sidebar widgets!
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
Labels:
Blogger Beta,
Design,
Posts,
Reader's Emails,
Sidebars
29 Comments:
Hello Annie, how are you ?
I don't know if you remember me, but some time ago, I commented on Blog-U, under the pseudonym of "16 Them All", to help you about a comment-icon problem. Anyway, thanks to you, I learned many tips to modify CSS and HTML.
During march, I replaced 16 Them All by "WDPK webzine" (about music, again), and today I launch a new design for it. Without Blog-U, I would never do such modifications, for sure.
So THANK YOU !
Keep up the awesome work to help a lot of bloggers, goodbye.
WDPK webzine
@WDPK webzine, of course I remember you! You left great tip here:Pretty up the "Business End" of Your Post!
When I put it in there was no separation between the posts only things on the sidebar.
@Anonymous, Since the posts are actually widgets, it won't separate each post. If you have your blog set up to show one post per page, then it will be enclosed. If you have it set up for two posts per page, it will enclose two posts...etc.
Each sidebar widget is a separate widget, so they will each be enclosed individual.
Putting a border may give a different look but it is bad for the adsense adds shuffling.
Can I use dome specific color to the border?? or the border color will be followed by the template color?
@Keyamoni, you can change the border color either in the */Variable definitions, the Fonts and Colors tab, or in the above code replace $bordercolor with #XXXXXX (a hex color).
Hi annie, can Blogger use Linkworth in their system..? if yes, how to add Linkworth to Blogger...? I get little bit confuse here.
I'm sorry for my OOT question.. thx in advance :)
@Blogger-Holic, Yes,blogger can us Linkworth. I do! I add the links in a 'Link' widget to my sidebar. (Look under 'Sponsers' in my sidebar.) I also use TextLink ads in the same way.
BTW, if you sign up, use my link! I will get some credit for it. Thanks!!
please helpi have scoure the cod on my template and cannot find the reference point to insert the code
thank you here's my blog http://offthestripdining.blogspot.com/
@The Davis', You template already has the post and sidebar areas defined, so it wouldn't be a good idea to try this.
i have found several strings of code that pretty much give me what i want with border & background but I do NOT know where to insert it to make it border the POST & Border the sidebar & comments
your help is greatly appreciated
please check it out at http://davisinlasvegas.blogspot.com/
i have a sample blog i'd like to have a somewhat similar layout without 3 columns
thanks again
I love the border, but how do you keep the background the original color? Not a white background?
you rock!!!!!!!!!!! Thanks ;)
I like redesiging the sidebar since the sidebar for me suck an important part for a blog.
Thank you for the tips but what happen to your blog?
The sidebar for this blog does not really look awesome.
Please take a look at your sidebar for the "my other blog" part!
This little code bit here, what EXACTLY what I have been looking for. Well, almost, do you have the code to make that box wrap around each post individually, rather than all the posts? Also, the box doesn't quite extend far enough to the right- where in the code do I change that?
i want to add border around the side bar . this method isn`t working!!
How do you get it to make it a double line? I tried experimenting but I'm not sure which fields should be changed. Thanks, this site is awesome!
@Daniel, I did a post for you! Add a double line border
Good info to increase blogging knowldge
Low Cast Web Development Packages in Pakistan
That worked like a charm! Thank you!
Hi there,
How do I create sidebar Something like a divider between the post area and the right sidebars. Meaning border without the top and the bottom. Thanks
This tutorial really helped me in converting my blog to a tidy one.
Thanks
www.zindagiilive.com
Hi there
first of all thanks for the tutorial...but I have two questions. The first is related to your tutorial. Can I take the border off from the central bit . I want borders on the sidebars but not in the centre bit. The second question is not related to your tutorial. Do you have any idea about how I can take the image borders off, please.
Thanks
the URL of my blog is http://bongskitchen.blogspot.com/
and my email address is nspal@bigpond.net.au
TY for sharing!
:)
It would be amazing to get all these tutorials in an e-book. Do you have an e-book, Annie? I did a search on Google and could't find one. If later on you decide to make one, I will definitely be one of the many who will get in line for a copy.
Hiya there, thank u for this tip:) But i wanna make my border edge round and different border on each post. Is there anyway i can do it?
Nice tips, Annie....
I love this...
Nice information.Nice blog.Thanks
http://
bestwayofblogging.blogspot.com/