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.
| Prev: How Can I Get a Step Image To Appear Below the Step Instructions? | Next: Customizing Step Title formatting in Blog Templates |
Comments (2)
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
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.
Add your comment