The ScreenSteps Online Knowledge Base Everything you need to know about ScreenSteps
Blue mango logo white 250
  • Table of Contents
  • Contact Us
ScreenSteps Documentation » Customizing HTML Templates » Customizing Step Title formatting in Blog Templates

Topics

  • Overview 4
    • What is an HTML Template?
    • The ScreenSteps Templates Folder
    • The Anatomy of the Template File
    • Installing/Sharing Templates
  • Customizing Templates 13
    • Setting the Maximum Height/Width for Step Images
    • Changing the Text Encoding of Output
    • How Do I Add My Company Logo to a Template?
    • How Can I Get a Step Image To Appear Below the Step Instructions?
    • How Do I Add An Image Border When Exporting To Blog?
    • Customizing Step Title formatting in Blog Templates
    • How to Add Whatever Font You Want to Your HTML Template
    • How Do I Make The Image Appear To the Left of the Text in an HTML Template?
    • Using Image Zoom in Templates
    • How to center images in an HTML template
    • Customizing Lesson Navigation Links In Manual Templates
    • Creating an XML Template
    • Removing The Lesson Description From the Table of Contents

Quicklinks

  • Downloads
  • View forums
  • Submit a help request
  • Contact us
  • Retrieve a lost license key

This manuals will show you how to perform some advanced customizations to HTML and XML templates in ScreenSteps. The main ScreenSteps manual is available here.

Last Updated

Nov 18, 2010

Download Lesson PDF

Download Manual PDF

Other Resources

  • ScreenSteps Desktop & Workgroup

  • ScreenSteps 2.9
  • ScreenSteps Workgroup
  • Customizing HTML Templates
  • ScreenSteps: Tips & Tricks
  • Creating Word Templates
  • Publishing to Blogs & Wikis
  • ScreenSteps Live

  • ScreenSteps Live
  • Setting up a New Admin, Editor or Author on ScreenSteps Live
  • ScreenSteps Live Support Client
  • Integrating ScreenSteps Live With Other Services
  • Collaborating on ScreenSteps Live
  • ScreenSteps Live Remote Authentication
  • ScreenSteps Live API
  • API Examples
  • Implementation Guides

  • Creating a Software Manual With ScreenSteps
  • Creating a ScreenSteps Live Support Site
  • Zendesk and ScreenSteps Live
  • Help Scout and ScreenSteps Live
  • FAQs

  • FAQs

Comments

1 comment for this lesson

  • Prev: How Do I Add An Image Border When Exporting To Blog?
  • Next: How to Add Whatever Font You Want to Your HTML Template

Customizing Step Title formatting in Blog Templates

View Your Blog Templates

Media_1290027834230

Open your preferences window and select HTML Templates > Blog.

Review Template Folder

Media_1290027850225

Right click on the template you want to edit and select Reveal Template Folder.

Duplicate the folder

Duplicate_the_folder

Duplicate the folder and rename it.

Media_1276543003195

Here I have renamed the folder to "My Blog Template".

Update Styling Info

Update_styling_info

If you look for the [-- START STEP TITLE --] section you will see the formatting that will be used for the step title. The default is an h3 tag but you can change this to any tag you would like. The only part you need to keep is the %Title% string (that is where the title gets inserted.

If you want to add inline styling to the tag just update the text in the style attribute. For example, I could enter the following:

style="font-size:14px;font-style:italic;color:#CC6600;font-weight:normal;"

That would give me an h3 tag that is orange, italic, not bold and 14 pixels in size.

 

Save and Use

Now just save the file and use it the next time you want to upload a post to your blog.

  • Prev: How Do I Add An Image Border When Exporting To Blog?
  • Next: How to Add Whatever Font You Want to Your HTML Template

Comments (1)

Kevin Lossner Monday Jun 14 at 03:52 PM

Super, Greg! That's a great help :-)

Add your comment

E-Mail me when someone replies to this comment
Blue Mango Learning Systems © 2012