A PDF template gives you access to the article and manual HTML that the content is inserted into. This allows you customize things such as the header, footer, table of contents, and title page.
Accessing the HTML
You will find the article and manual HTML in the Article Template and Manual Template tabs. Updating the HTML in either of these tabs will affect how your PDF output looks.
Variables used in templates
ScreenSteps uses variables inside of the HTML in order to inject dynamic content. Whenever you see text enclosed in {{ and }} then it is a variable. For example, in the <head> of the document you will see the {{meta_title}} variable. This variable is replaced with the title of the article or manual. The {{content}} variable is where the article or manual HTML will be inserted.
Example: Adding a title page to the article template
By default the article template does not have a title page but the manual template does. Let's look at how to add a title page to the article template.
Near the top of the manual template you will find the following HTML:
<div id="title-page">
<div id="title-page-wrapper">
<div id="title-page-title">
<div id="title-page-title-text">{{title_page_title}}</div>
</div>
<div id="title-page-logo">
<img id="title-page-logo-image" src="{{title_page_logo}}" alt="logo" />
</div>
</div>
<div class="title-page-footer">
<span id="title-page-footer-text">{{title_page_footer_text}}</span>
</div>
</div>Copy the HTML and switch to the article template.
Find the <body class="article"> tag in the article template. Paste the title page HTML after this tag. The end result should look like this:
...
</head>
<body class="article">
<div id="title-page">
<div id="title-page-wrapper">
<div id="title-page-title">
<div id="title-page-title-text">{{title_page_title}}</div>
</div>
<div id="title-page-logo">
<img id="title-page-logo-image" src="{{title_page_logo}}" alt="logo" />
</div>
</div>
<div class="title-page-footer">
<span id="title-page-footer-text">{{title_page_footer_text}}</span>
</div>
</div>
<div id="header">
...
Click the Update button to save your changes. The next time you create a PDF of an article you should see a title page.