How to apply our post divider images

You will find the free post divider images in the ‘Free Extras’ collections packs.  Once you download the kit (directions found here) below there are 2 different ways you can apply the post divider image to your blog.

1. To use it as a divider between your posts:  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’.

2. The other way is if you would like it to appear between different sections of your sidebar:  You can add it on your sidebar under ‘add a gadget’ and ‘picture’.  This will shrink the image and you can place it between different sections of your sidebar. If you have a white background  behind the image you will need to apply it differently.  Upload the image to an image storing site like photobucket.  Once it is uploaded copy the direct link.  Go to ‘add a gadget’ on your layout on the sidebar.  Click ‘picture’ and paste this code in the box under ‘from the web’.  Save.

You may want to backup your template before making any changes to it.  Go back to your ‘layout’ or ‘design’ 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;


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;


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!