Blue Mango
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.
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).
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.
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.
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.
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: How to Add Whatever Font You Want to Your HTML Template |
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