How Do I Add An Image Border When Exporting To Blog?

This lesson will show you how to modify a ScreenSteps HTML template so that your images have a border around them when exporting to blog. This lesson uses inline CSS since not all blogs allow you to customize the CSS files used for displaying your posts.

Locate The HTML Template

Open the HTML Templates preference pane (1) and select the Blogs tab (2). Right-click on the template you would like to customize and select Reveal Template Folder (3).

Edit index.html

The template folder will have a file named index.html. This file contains the instructions that ScreenSteps uses whenever it posts a lesson to your blog. Open index.html in your favorite text editor.

Edit MEDIA:IMAGE Section

At the end of index.html template file is the MEDIA:IMAGE section of the template. This instructs ScreenSteps what to do with images when uploading to your blog.

Add Border Styling

Do add a border to your images add the style attribute (1) to the img tag (2). In this example all images will have a 1 pixel solid border that is light gray.

Sample

Here is an example of what the image border will look like when you post to your blog.