The orginal question was regarding how to add a custom image divider or border at the bottom of WordPress posts.
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
Tags: WordPress Post Custom Image Border, WordPress Post Custom Image Divider
Categories: Wordpress Tips - Tricks - Fixes
I replied on your previous post earlier today. And now it’s gone for some reason. I want to add a image post divider between posts. Where in CSS do I post your code from example #2 at the top of this post?
I’ll take a stab at this once my head is cleared. I only got 3 hours of sleep last night. I was up all night excessively coughing.
Someone made me a post divider image at 609×90. Will this size be ok or does the size really matter?
Thank you Ed that was very helpful.
Jeannette
As far as the width and height go you just need to add the dimensions in the CSS code properties. Hmm which just made me look at your CSS code again. 1000 pixels seems awfully wide for a main content area. It might be that this is a page border for the container not just the posts content area divider. I will look at the PhotoLounge Theme and update this post with the exact CSS code you need.
*** UPDATE ***
Ok I was able to view your Blog site. Now do you want a divider between all your posts or do you just want a bottom border for the entire page? I see that you added CSS to the page template itself instead of adding the CSS to your Theme’s stylesheet = style.css. I assume this is an old left over original attempt at modifying the border. 😉 The postmetadata CSS class is the CSS class where you would add your custom divider CSS modifications for a divider between each post. If you are trying to modify the page border – the 2 grey lines at the bottom of pages then it looks like the CSS in added directly to the template files for that Theme and is not controlled by CSS in your stylesheet. If you want to change the page borders then I would recommend creating a new CSS div class to handle this instead of what is going on with that Theme right now – CSS is added directly in a div in the Theme template.
Thanks,
Ed
Ed,
Thank you for your reply. I should have posted my blog addy. You viewed my site which is under maintenance. Actually they are both under maintenance. I operate on a Mac with Safari.
http://www.jeannettekaufmannphotography.com
Here is my CSS for the PhotoLounge Theme.
*** Comment edited to just show the relevant CSS code by Ed ***
.postmetadata { clear: center;} #pageborders { width:1030px; min-height:100%; background-image:url(images/border-sides.png); background-repeat:repeat-y; margin:auto; } #border-bottom { height:15px; width:1000px; background:url(images/border-bottom.png); }Hi Jeannette,
I deleted all the rest of the CSS code you added in your comment. It appears that what you need to modify is just #border-bottom. The current bottom border is an image file called border-bottom.png in your images folder. It is 15 pixels in height and 1000 pixels in width. So if you created a new image and named it border-bottom.png your new image would take the place of the current bottom border image. If you don’t want a bottom border you could just comment it out by adding /* before the line of code you want commented out and this */ after the line of code you want commented out. Like this /* background:url(images/border-bottom.png); */
So let’s say you want a new image for your bottom border and it is 2 pixels in height and 1000 pixels in width. You would create the image, name it border-bottom.png, put it in your images folder to overwrite the current border-bottom.png and then just change the height CSS property from 15 pixels to 2 pixels.
Thanks,
Ed
Where in CSS do I add this post divider code?
Hi Jeannette,
Your website is under maintenance right now so I could not look at what WordPress Theme you are using. Typically a quick way to determine the name of CSS classes and divs is to right mouse click on a website page in Internet Explorer and select View Source. Since your site is not up you will have to look at your Theme’s template files to find the name of the CSS class or div that pertains to the divider. Typically the divider CSS name will be somewhere near Comments in a WordPress Theme’s template files. Open your WordPress Theme index.php file and look for the word Comments. As an example this code below is from my index.php Theme file:
So the CSS class name for the section of my WordPress Theme files that deals with the divider area is called postmetadata. Your Theme class name may be the same or may be totally different. Most likely different. This should get you looking in the right direction. If you need more help then I will need the name of the WordPress Theme that you will be using. If you provide that info I can tell you the exact answer you are looking for.
Thanks,
Ed