Adding Borders to Images

• Tweet

• Tweet

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.