Frequently Asked Questions:

Q: How do I add a simple border around all my images that I post?

Q: How do I add a simple border around all my images that I post?

A: Open up “Stylesheet” (style.css) from within your WP admin area, under “Design (’Presentation’ in WP 2.3 and earlier)” –> “Theme Editor.” Scroll way down near the bottom of the file, around line 511, look for this big ugly-looking chunk of code.

body.search div.entry-content img,
body.category div.entry-content img,
body.archive div.entry-content img,
body.home div.entry-content img,
body.single div.entry-content img {
     margin: 15px 0;
     text-align: center;
}

Add the lines shown highlighted in red. Change the number of pixels or color code specified in the first red line to customize your border.

body.search div.entry-content img,
body.category div.entry-content img,
body.archive div.entry-content img,
body.home div.entry-content img,
body.single div.entry-content img {
     margin: 15px 0;
     text-align: center;
     padding:0;
     border: 1px solid #666666;
}

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Friday, February 1st, 2008 and is filed under Customizing ProPhoto, Frequently Asked Questions. You can leave a response, or trackback from your own site.

7 Responses to “Q: How do I add a simple border around all my images that I post?”

  1. On May 16th, 2008 at 5:21 pm Travis Allison said:

    Does this fix still work? The code is different at 511 than it is here.

    I NEED to make this fix. Thanks for the help.

    One other thing: I looked through the FAQs (how I ended up here) and I can’t find the answer. I can’t get headings to bold in the main body of the blog. Is there a fix that I’m missing?

    Thanks,

    Travis

  2. On May 17th, 2008 at 1:02 pm Jared said:

    Travis - your stylesheet may look a little different, because of when you purchased. Try looking for a very similar looking couple lines of code. If you can’t find it, email me and I’ll try to help.

    You can make headers bold by adding a CSS line that says:

    font-weight:700;

    to the style that affects the post titles.

  3. On June 13th, 2008 at 8:10 am Jes said:

    This didn’t work for me. Any ideas why?

  4. On June 13th, 2008 at 8:27 am Jared said:

    @Jes: it looks like you inserted your images using the gallery shortcode, and that you already turned off the borders for gallery images. that would explain why you’re not getting borders. if you insert images without the gallery code your borders will probably work.

  5. On June 26th, 2008 at 10:18 pm Renee said:

    thanks for this…. Done!!!!
    it worked ok for me

  6. On June 28th, 2008 at 12:09 am maya said:

    i have added the simple border - but i would like the simple border to be white around my images - and the actual blog backround is white - how do i change the color of the backround to another color so you can see my blog border or add another slight border to that one so that it the border will show up?

  7. On June 28th, 2008 at 7:55 am Jared said:

    @maya: if you want to change the background of the blog, try this post.

    In CSS it’s not possible to add two colors of border around your image. If you really wanted to do that, you’d need to do it in Photoshop before you uploaded the image.

Leave a Reply