Tip:
Highlight text to annotate it
X
Customize Web Help output in Author-it. The look of your published HTML output can
be customized to match your branding needs. You can easily customize elements of a page,
such as its banner and theme, footers, and styles using Author-it’s out of the box
templates and styles. Author-it uses external HTML templates to
control the look of your HTML pages. And, your styles are easily customizable via Author-it's
styles. Author-it produces the cascading style sheet file automatically when published so
you don't need to know how to write HTML code or modify a .css file to update your look
and feel. Alternatively, you can create your own custom
HTML templates and use your own custom css to give you a different look.
Let’s take a look at customizing your HTML output now.
We're going to customize the look of styles and make changes to the HTML templates so
that we can modify our HTML Web Help output. Let’s open up our product manual, which
we’ll use to test our customizations. Now Author-it provides you default templates
for your Web Help output, and when we publish this document to Web Help we can view those
default outputs. And we do that by downloading the .zip file from the email, unzipping it,
and launching the index.htm page. Here is our default Web Help output.
So what we are going to do is go through and show you how to customize both your styles
and some of the other elements that you can add to, or remove from, your Web Help output.
So let's go back in to Author and we will start with styles.
In every topic in the Editor, you are going to see the list of styles here in you styles
toolbar. The top list is for character, or in-line
styles and the bottom list is for paragraph styles.
And to apply those styles for character styles you simply highlight the text, you can apply
the character style from the styles toolbar, and for paragraph styles you can simply select
the paragraph style from the list. You can customize your own styles toolbar to use the
styles that you use most frequently, then they are displayed and can be selected. Every
paragraph you click on it will show you if their are any character styles applied and
what paragraph style is applied. Both at the top and in the bottom status bar. Here we
have our note style with no character formatting applied. Now, we are calling this styles for
ease of use, but they are actually tags behind the scenes.
Styles are a type of component in Author-it and we can quickly open them directly from
the editor. We want to make a change to our Note style;
we can simply double-click the Note style in the status bar.
Each style has multiple tabs because it is configured for multiple outputs.
The Style Definition tab is what that style is going to look like specifically in Author
only, rather than your published output. You can adjust the Font, Paragraph, Tabs,
Borders, Bullets, Numbering, and things like that.
We are going to be dealing with our HTML output so let’s move to the Web tab.
All of the formatting options that you need to customize the look of the style are available
here. Style settings for your Web outputs are defined
directly in the user friendly Web tabs. These style settings are saved to a cascading style
sheet that is generated each time you publish, that means you don’t have to know how to
maintain a .css file, or know the HTML code number of a certain color to make a change.
You can customize the settings of any of these styles to meet your branding needs.
Let's change the Font color from black to blue. Notice how the text is still black inside
of Author, because we only changed what the color would be when we publish to HTML.
Besides customizing styles, you can also customize the page layout of your HTML pages.
Two components use external HTML templates to build your Web outputs. They are the book
and the media object. Books build the overall framework that your content displays in. The
media objects control the page layout of each topic in the book. Some outputs, like Web
Help, can use both components to provide even more customization capabilities. Let’s first
take a look at the external HTML files associated with our book.
Now let's go to the properties of our book and go to the Web tab; and we'll be able to
see any frameset template or index file needed, as well as any additional files required.
These are grayed out because they are controlled in the template. Which, again, makes it very
easy to have a consistent look and feel for all of your documents when you publish to
a Web Help type output. The specific files you define here are dependent
on the type of Web output that you want to publish.
Author-it provides you with all of the files that you need in the Common - Company Share
- Templates directory in Files. You can customize the look of these default files using your
preferred HTML editor. Next, let’s take a look at Media objects.
Media objects are assigned to topics and control the topic’s page layout when published.
We can look at the properties of a topic, go to the Web tab, and see what Media object
is referenced. We can also create custom HTML templates that display additional design elements
on the HTML page when the topic is published to HTML.
We call the HTML template "external" because the HTML file is saved in Files, and it's
linked to our Media object. Author-it supports publishing to HTML and
XHTML. The exact flavor of HTML you publish to, for example HTML4 or HTML5, is controlled
by your template. Let’s publish our document out to Web Help again, we'll be able to view
the changes to the style that we made and then we'll also be able to look at the HTML
templates and make changes. Again, we downloaded the output, we have extracted
the content from the .zip file, and we'll launch the index.htm file to start the Help
system. If we go down to our Installing the Software topic, we will see that the note
text is now blue, instead of black. Now we want to change other elements on the
page. We will start by looking at the footer. Currently we have the last modified date and
time of the topic we're on, but we want to add who was the last person to make that change.
This footer is designed inside of our external HTML template. So let's take a look at this
template. I'll download it from Files first, then open it in Notepad, and review it. With
the Web Help output, there are actually two files that control the footer information
and where the footer is going to be. That is the index.htm file and the topic.htm file.
We will go into Files and download both of those.
I have downloaded both the index.htm and topic.htm and we will open it in notepad and review
it. The first one we look at is index.htm. In our index we have a lot of information
that talks about our cascading stylesheets, any script that's being run, then we get into
the body where our content is going to go. We have it automatically bring in the name
of the book and put that in the title. We then have some links going to the top of the
page and then we have our footer information, and then we have a lot of cool features here
that are set up in the template to very easily turn buttons on or off in your output template.
Those buttons are located in our output here across the top, as well as we can add some
additional Collapse All and Expand All buttons here. I like the Print this page button, the
send feedback button, and also email the page button, but these other two buttons are to
be able to edit this content in Author-it and the people that will be viewing this content
won't have access to Author-it, so I'm going to turn those buttons off.
So, when we come into our customization, we can see the Print this Page, Send Feedback,
the Default feedback text, Email this page, but then Edit in Author-it Live icon we are
going to turn that value to false, as well as the Edit in Author-it icon. With our navigation
tree, we are going to keep those shown. With our Expand All and Collapse All they weren't
there, now we're going to go ahead and turn those buttons on. So these are just some things
that we can modify with our index file. Now the other thing that we have is we do
have the information of modifying our content, and again it brings in the modified information
from Author-it, but we also want it to include who it was modified by. So let's go ahead
and add that text. So this will put who modified that content underneath the date and time
stamp that was already there in our footer. Let's go ahead and save the changes that we
made. No we just need to specify what content in
actually going to be within that tag. We use the Topic.htm template to do that. So here
we have just some basic information in our topic, again some script information at the
top. The description of the topic in going to go in as the title of our page here. Then
we have our body tag; and in our body tag, we have the first bracket which is .
What this is going to do, is this is going to take all of our content, both the heading
of the topic and the body of the topic, and put it into our output. Now, we also have
the option to split those up. To put the heading in one place, and the body in another. What
we will do is we will put in the Author-it variable, and we'll use the heading. And,
below the heading, we will put in the body. It just allows us to move these anywhere that
we want on our HTML template and can put additional information between the heading and the body
if we wanted to. Alright, here we have the footer with the
Last Modified, and it going to bring in the date and time stamp from Author-it.
Now we want to add in the Modified By. So, we will just update this one. Change that
to Modifedby, we're going to change our text, and we'll change our variable. And we'll go
ahead and save it. All of the system variables that we are using here are very easily found
on our Knowledge Center. Alright, so we've updated our templates on
our local machine. Remember, in order to make these changes available to all users, we need
to replace our previous HTML templates out in our Common directory using Files.
To replace any items on Files, we need to rename them or delete them before we upload
the new ones. Now we have both of those templates out there
and updated so the next time we publish, we’re going to be using those templates instead
of our original templates. Our best practice is to test publish as you
make customizations to view the results of your changes.
As we look look at our published output. Here we have the changes to the buttons, they
are no longer at the top of our screen. We can also see the footer has the Modified By:,
and on the left hand side we have added the Collapse All and Expand All buttons. We will
also see, when we go to the Installing the Software topic that our note text is still
in blue, and the last modified date and time and who modified this topic is actually different
than the Copyright notice. Here, Tex Ryta is the last one who has made the update. So
we modified the text, we've modified the template, we've added and removed buttons, and now we
have a customized Web Help output. If you are looking to learn more, visit the
Author-it Community, our Learning Center, our Knowledge Center, or the Developer Community.