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.

5 Comments

Bruce Bird

Afraid I'm not having any joy with this.
My \Application Data\ScreenSteps\2.0\Templates\HTML\Blog\Blog HTML Neutral now looks like this:

http://screencast.com/t/BmJwn9v0a

But continues to produce this: http://screencast.com/t/JGwv3T3DHn

Regards

Bruce

Trevor DeVore

Update: We looked at Bruce's template folder and he had renamed the original template and modified a copy. ScreenSteps uses the first file in the directory that defines a template and uses it. So ScreenSteps was finding the original file and not the copy that Bruce had updated.

Violet

Same question as topic but for exporting to Word 2013.

Trevor DeVore

@Violet: It is not possible to customize the image borders in Word output using a ScreenSteps template.

David Glasgow

Same issue as Violet, and surprised to find borders not possible. Many of my screens are primarily white, which looks horrible when exported to Word. You just can't see where page ends and image begins. I wouldn't even mind if we could switch on a thin frame as a graphic on top of the image in ScreenSteps, which would be exported along with the image into whatever format was used.

Add your comment

E-Mail me when someone replies to this comment