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;

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 {
margin:0 0 0;
padding:0 0 0;

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

.sidebar ul {
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.


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 ?

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

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

elena said...

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