Adding Borders to Images

Image Borders

When designing a website it’s normal to use images throughout its pages to add interest and help get your message across. Photos placed directly on a page can look plain and a bit out of place without a border, but what are the options for adding one in Serif WebPlus? Well, you can always place a quickshape image behind your photo but this will increase the pages file size and slow down load times.

In this short tutorial I will demonstrate a method that prevents having to use an image at all and relies purely on CSS. Once it’s in place changing the colour scheme of the borders throughout your site is as simple as amending a couple of small lines of code.

Open your project site in WebPlus and in the workspace press ‘Alt + S’ this brings up the sites HTML Source view, from here you can edit parts of the code generated by Webplus.

Navigate to the section below:

/*Master Page StyleSheet*/

And paste over it with the following code:

.img-border {
         border:1px solid #000000;
         background-color:#333333;
         padding:5px;
 }

It should look something like this:

If you plan to use this method on only a single page you can paste the code over the ‘Page Stylesheet’ section rather than the Master page section.

Next you need to add a class attribute to the photo. To do this right click your photo and select ‘Attach HTML’ which will present you with a pop-up. Navigate to the first part like this:

__AddCode="here"

And paste over it with the following code:

class="img-border"

Previewing the page in your browser you should now see a border around your image.

So what’s happening and how can you edit the styles of the border?

Well, the class attribute ‘img-border’ that we added to the image tells the browser to look in the CSS for a class with the same name, you could name them anything you like as long as they match. The browser then reads the styles and gives them to the image.

To edit the border style you need to understand what each line does, it’s pretty straight forward but I’ll break it down for you.

This is the outer border line width and colour – Set the colour by changing the hex colour value:

border:1px solid #000000;

The colour for the area in between the image and the border:

background-color:#333333;

And finally the distance between the image and the outer border line:

padding:5px;

 

That’s it! Why not leave a comment if you find this tutorial useful or have something to add.

fold-left fold-right
About the author
Neil Judges enjoys creating, experimenting and sharing new techniques he discovers. Neil especially loves Serif Software and is on a mission to spread the word of this highly capable and inexpensive design suite. As well as this website he also runs Serif Addons and Serif Templates.

11 Replies to Adding Borders to Images

  1. Michael Qumi says:

    i don’t know what am not doing right, but cannot see the changes, please help.

  2. jure rokel says:

    “If you plan to use this method on only a single page you can paste the code over the ‘Page Stylesheet’ section rather than the Master page section.”

    Can you please help me , where exactly do i paste the code if i want it on a single page.
    Should i paste it over *page style sheet*/ or below it? I am a beginner, please excuse me.
    /*Master Page StyleSheet*/
    /*Page StyleSheet*/
    –>

    <script type="text/javascript" src….

    I am using webplus x4. Thank you very much for your help in advance

  3. tony cox says:

    Hi Neil,

    When I create a border around the edge of my website page, none of the buttons will work. If I remove the border they all work just fine….would you know how to get the buttons to work with the border in place?

    best,
    tony

  4. Rick says:

    Excellent! I noticed that when using this the Align tool messes up slightly!
    What I mean is I inserted 3 images using this method and it was great! When
    I tried to center the three on the page the Align tool doesn’t seem to know about the padding
    and it’s off center by the amount of the padding of all three images! BUT I like this alot
    and will be using it!!!
    Thanks!

  5. stevebuk says:

    when doing this, do you first have to have the images on the page, if this sentence is stupid then please forgive as i know not what i am talking about..

  6. Shaun says:

    Everything worked fine except the padding was not even on all four sides making it look disjointed..

Leave a Reply