Categories
General

How to change the photo border

Paul asked how to change the border around images. I’m not sure whether he wanted to know for flickpress or Photopress, but it doesn’t really matter. Photopress adds a custom CSS class to images it inserts, but most likely you’d want to change the appearance of all images in your posts, no matter which tool inserted them.

You’ll need to edit your theme’s style file, which you should be able to do as an admin at Appearance -> Editor. It should bring up the Stylesheet, but if not it’ll be in the list on the right side. You need to add something like this:

a img {
padding: 2px;
border: 2px solid #ccc;
}

a:hover img {
padding: 2px;
border: 2px solid #c33;
}

The “hover” part will make the border change on mouseover – if you don’t want that then leave it out. The “padding” part adds a gap between the image and the border. This only adds borders for linked images. If you want borders for all images, whether they’re linked or not, do something like this:

img {
padding: 2px;
border: 2px solid #ccc;
}

You probably just want this to affect images in posts, not the images in your header or sidebar. It depends on your theme, but most themes wrap each post in a “div” element with the class “post” – this will restrict the change to images in that class:

.post img {
padding: 2px;
border: 2px solid #ccc;
}

If in doubt, view the source of your site to see what you might be able to use – there’s often a “div” with the id “content” that wraps the whole content area.

Avatar photo

By isaac

I like cats. he/him