Follow @BPSPro

WordPress Custom Divider Image For Posts – WordPress Custom Border Image For Posts

7 Comments RSS Site Feed Author: AITpro Admin
Published: May 15, 2010
Updated: October 6, 2012

The orginal question was regarding how to add a custom image divider or border at the bottom of WordPress posts.

LOL you’re working on your WordPress site right now. I tried to look at your WordPress site to get a better idea about your question and the visual look changed. 😉 To modify the formatting of your posts div containers and classes would be something you would modify in the style.css file for your particular WordPress Theme. Example #1 – The typical div class name in your style.css file for WordPress is .postmetadata. This displays a standard solid border between posts. To add your custom image for the dividing bottom border see Example #2.

Example #1

.postmetadata {
clear: left;
line-height:20px;
color:#ffdc8e;
background-repeat:no-repeat;
padding:10px 0px 10px 0px;
margin:0px 0px 0px 0px;
text-align:right;
border-bottom:solid 1px #0f4254;
}

Example #2 – adding your own custom image as the divider / bottom border in posts

.postmetadata {
clear: left;
line-height:20px;
color:#ffdc8e;
background-image:url(images/your-custom-divider.jpg);
background-repeat:no-repeat;
position: absolute; left: 0; bottom: 0;
padding:10px 0px 10px 0px;
margin:0px 0px 0px 0px;
text-align:right;
}

If this is WordPress Theme you are coding from scratch you will obviously need to create a style.css. Good Luck!

Official WordPress Resource Page on CSS

Skip to toolbar