Adding a border to images that only shows on the website

Ade

Hi Folks.

I would like to add a thin black border to my images that doesn't affect the image itself but only shows on my web pages. Here is an example of what I'm looking for: http://www.paulbrowsephotography.com/event-photography/lovebox-2013/ (Thanks to Paul Browse)

I don't want the actual photos themselves to be altered in any way. The page I want to use this on is this one: http://www.adrianbrownphoto.co.uk/Pages/Weddings-Portfolio

Thanks in advance for any help guys

Ade

Allen

Your original photos are never altered in any way and they are used for printing. The border is just
a display thing that the photos are put in. All the display sizes that are generated do not get the border.

Ade

Your original photos are never altered...
Hi Allen and thanks for the reply.

When you say the images are never altered, how are you adding the border? According to the SmugMug heroes, using PicMonkey actually adds the border to the image itself, as it seems to be a picture editor rather than a web design application.

The SmugMug hero's response was 'The borders will be on the actual image after you edit with Picmonkey, so that’s out.' It was SmugMug that suggested posting a question here.

Allen

If you edit the photo to add the border it will change the original and regenerate all display sizes
with a border as the border is now part of the photo. If you add the border with CSS it does not
affect the original or any display sizes.

Ade

Css
Thanks again Allen.

This is my point in a nutshell. I don't know how do to this as I don't have any knowledge of CSS coding, hence the original question.

What I'm looking for is a method of how to achieve this, so if you know how to do it I'd be eternally grateful if you'd share it. Thanks so much for your responses.

AceCo55

Try this customisation by Aaron:
http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Add-Image-Border

He has LOTS of code to tweak your site, all arranged into categories.

Ade

Hi AceCo55

Thanks for the input. The code you've linked to works on galleries but not collages apparently but I will check his site and see if there is any code that might does the trick.

Cygnus Studios

Check these:

Hikin' Mike

Ade wrote: »

I don't want the actual photos themselves to be altered in any way. The page I want to use this on is this one: http://www.adrianbrownphoto.co.uk/Pages/Weddings-Portfolio

Thanks in advance for any help guys

Ade

Try this:

.sm-user-ui .sm-tiles-row-organic .sm-tile {
    border: 5px solid #000;
    }