Thursday, July 5, 2007

Creating a Border Around Posts and Sidebar Items

I have been asked to explain how I created a thin-lined box around each of my posts and my sidebar items on my personal blog. When I first learned how to do this, it was from copying a template that I had made for me long ago, so hopefully I’ll be able to remember all the steps!

This may work with other Blogger templates, but I have used "Minima" for all of mine, so this is what I know best, and what I'll be using for this explanation.

First, find the place in the HTML for your template that says:


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}


You then need to add a few lines describing the border, as below. I added a background color which changes the color inside the box I’ve created, and "padding" which keeps the post text a certain distance from the box (like a margin). You can create a boarder with a wider pixel (px) width, but I like the thin look of 1 px.


Here are the changes:

.post {
background: #ffffff;
margin:.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid #000066;
border-bottom:1px solid #000066;
border-width:1px 1px 1px;
}



To do the same on the sidebar, find:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

And make similar changes as above, adding lines for background color, borders, and padding:

.sidebar ul {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid #000066;
border-bottom:1px solid #000066;
border-width:1px 1px 1px;
border-bottom:1px line #000066;

The numbers represent html color codes, you will choose colors you like, based on the rest of your template look.

12 comments:

Mary Vitamin (Helen) said...

Great Amy!
Thanks for explaining what you did.

Amy Caroline said...

When I tried to do it for my sidebar it didn't work! :( But it did for my main posts.

For The Love Of Learning said...

How do you create a text box with a different background color like Studeo's post HERE ?

Maureen
Trinity Prep School

Amy said...

Hi Maureen! Luckily (because I didn't know how to do it), Love2Learn Mom did a post on that right here.

(hope I got that link to work, lol)

The Bee said...

Hello Moms!
I figured out how to adjust my colors (thank you!) but I want to create a thin line (border) at the end of each post. So each post (including entries posted on the same day) have a thin line seperating them. How do I do this?

Amy Caroline said...
This comment has been removed by the author.
Amy Caroline said...

I use the minima template as well, but I cannot get the side bar one to work at all. I have been playing with it and I get nothing. If anything I get no border or lines at all (and that is only when I delete everything in the sidebar section and replace it with th code you gave). Otherwise it changes nothing.
Am I the only one this is happening to??

Popsqually & Company said...

I just want to have a border under each of my sidebar titles, dotted (like you have)--how do I do that?

Kristin said...

The code for the post worked but the sidebar only worked in sections. How do I make the whole sidebar white like yours?

Shannon said...

Thanks! This was really helpful.

dexcerpah.com said...

Greetings;
Thank you so much for the post. Finally i have got what i wanted for a long time.
Regards.

elena said...

Your tips were so easy and helpful, thank you so much!