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.
Subscribe to:
Post Comments (Atom)
12 comments:
Great Amy!
Thanks for explaining what you did.
When I tried to do it for my sidebar it didn't work! :( But it did for my main posts.
How do you create a text box with a different background color like Studeo's post HERE ?
Maureen
Trinity Prep School
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)
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?
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??
I just want to have a border under each of my sidebar titles, dotted (like you have)--how do I do that?
The code for the post worked but the sidebar only worked in sections. How do I make the whole sidebar white like yours?
Thanks! This was really helpful.
Greetings;
Thank you so much for the post. Finally i have got what i wanted for a long time.
Regards.
Your tips were so easy and helpful, thank you so much!
Post a Comment