Follow @20SB

Tech Help: Dividers

I have been trying to fool around with the html to figure out how to add a divider (below) between posts. I'm not having any luck.. so does anyone know how to do this? Thank you!

Tags: Graphics, Technology

0 members like this

Attachments:

divider.jpg, 3 KB

▶ Reply to This

Replies to This Discussion

Permalink Reply by Gina on August 20, 2010 at 1:47pm

If you are using Blogger, here is a snippet from the tutorial at thecutestblogontheblock.com

You will need to upload your image to an image storing site like photobucket. You may need to resize the image to fit your main column perfectly. To find out the size of your main column go to your 'layout' page and click 'Edit HTML' . Hit ctl 'f' and paste this in the find box #main-wrapper right under that you will see the width of your main wrapper. Let's say it is 410px. Now go back to photobucket and click 'Edit' above the image and then click on 'Resize'. Change the width to whatever the width of your code was (410px). Click 'Appy' and 'Replace Original'.
Go back to your 'layout' page and 'Edit HTML'. Find the part of the code where is says this (use ctl 'f' to type .post { in the find box):

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

Replace that entire code with this:

.post {
background: url(http://postdivideraddress.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.0em;
}

Now replace the orange highlight code with the 'Direct Link' from photobucket. You can also adjust the padding from 5.0 to 5.5 or 4.0 depending on what it looks like on your blog. Click preview to see if you need to adjust the padding and save!

I've done this on my blog, and it worked perfectly. Good luck!