MadCap Software
Tutorials Guide: Top Navigation
Advanced Template
Flare 11
Copyright 2015 MadCap Software. All rights reserved.
Information in this document is subject to change without notice. The software described in this document
is furnished under a license agreement or nondisclosure agreement. The software may be used or copied
only in accordance with the terms of those agreements. No part of this publication may be reproduced,
stored in a retrieval system, or transmitted in any form or any means electronic or mechanical, including
photocopying and recording for any purpose other than the purchaser's personal use without the written permission of MadCap Software.
MadCap Software
7777 Fay Avenue
La Jolla, California 92037
858-320-0387
www.madcapsoftware.com
THIS GUIDE WAS CREATED USING MADCAP FLARE.
CONTENTS
CHAPTER 1 Introduction
5
CHAPTER 2 Simple Conversion
7
CHAPTER 3 Advanced Conversion
17
CHAPTER 4 Cross-References
43
Creating Cross-References
45
CHAPTER 5 Drop-Downs
49
Style Properties
First-Level Drop-Downs
Second-Level Drop-Downs
Applying Drop-Down Styles
50
52
60
63
CHAPTER 6 Image Sizing and Positioning
Purpose of Images
Max Height/Width and Thumbnails
Positioning with Floats and Div Styles
CHAPTER 7 Lists
Types of Lists
CSS Styles
Create Lists and Apply Styles
APPENDIX PDF Guides
67
68
69
73
77
78
81
85
107
iv
CHAPTER 1
Introduction
The Top Navigation Advanced project template in Flare contains several starter topics and
other files intended for online HTML5 output with top navigation like a modern website,
instead of the more traditional tripane format. It includes several features that you might use
in online output, and the content and files have been designed to maximize single-sourcing
capabilities. This template starts you out with two HTML5 targets and a skin that has
responsive output based on the device width. This means the content display changes automatically depending on the device (browser, tablet, or mobile phone). You can add other
kinds of targets and skins if you like.
We're not going to attempt to explain every aspect of this template. Instead, we'll focus on some of the features and tasks that raise the most questions.
We will also show how to convert your existing project to create Top Navigation output. There are steps for
a simple conversion (see "Simple Conversion" on page 7), as well as steps for a more advanced conversion where some files are imported from the Top Navigation Advanced template (see "Advanced Conversion" on page 17).
6
CHAPTER 2
Simple Conversion
Following is an example of a simple conversion of a Flare project from Tripane to Top Navigation output. We show how you can create and add just a few pieces to achieve a similar
look that is seen in Flare's Top Navigation Advanced template project. The biggest difference is that we are not attempting to create an elaborate Home page similar to the one
found in the template. Also, while we are adding a context-sensitive menu, it is not as fancy
as the one in the template. If you would like to achieve those end results, see "Advanced
Conversion" on page 17.
EXAMPLE
Let's say you have a Flare project with a Tripane format that looks something like this in the output:
You want to convert to HTML5 Top Navigation output using as few steps as possible. For this
example, let's say you want to accomplish the following:
Add the navigation elements (search and menu) at the top of pages.
Use your company logo.
Add a context-sensitive menu on the same page as each topic.
Use only the single stylesheet you already have in your project.
Let's say you've already completed some of the preliminary tasks to make sure your output will
work well with the new format. You've restructured your TOC to avoid very long vertical lists of
items, and you've even removed some TOC items that you decide are not necessary.
First, you select Project>New>Add Skin. In the Add File dialog you select the HTML5 - Top Navigation factory template, give it a name, and add it.
8
CHAPTER 2│Tutorials Guide: Top Navigation Advanced Template
9
In the Skin Editor that opens as a result, you look at the fields on the Setup tab and decide to keep
all of the settings. The flyout pane (for responsive output) will be positioned on the right, the depth of
menu items from the top menu will be limited to the first three, and the logo will be linked to your
Home (startup) topic (the default setting).
However, you need to change the logo image. So you select the Styles tab and expand
Logo>Background. You click
10
and select the logo image.
You also decide to align your new top menu to the right. So in the Styles tab you expand Menu>Alignment and set the Horizontal field to right.
CHAPTER 2│Tutorials Guide: Top Navigation Advanced Template
11
Next, you repeat the steps to add a new skin (Project>New>Add Skin), but this time you select
HTML5 Component - Menu. This is the special skin component that will display a context-sensitive menu, depending on the topic that is open.
12
In the Skin Editor that opens as a result, you can modify the look of the menu and its individual
items in many ways. However, for the purpose of this example, let's say you just keep the plain
default look.
Now you need to tell Flare to use your new HTML5 Top Navigation skin. So you open your HTML5
target and select the Skin tab. In the Skin field you select your new Top Navigation skin.
CHAPTER 2│Tutorials Guide: Top Navigation Advanced Template
13
For this example, we'll assume that you've already been using a master page for your online output,
perhaps to include breadcrumbs above all topics. You want your new context-sensitive menu to
appear on all topics, so you open the master page. You navigate to an empty paragraph above or
below the Topic Body proxy and select Insert>Proxy>Insert Menu Proxy. In the dialog that
opens, you select the TOC you want to base the menu on. You also keep all of the check boxes
selected, as well as the default depth level. Finally, you select the new Menu skin component that
you added to your project.
14
Because you're working with an existing project, we are going to assume you've already completed
the other necessary steps for tying everything together. This includes associating your stylesheet
with the project, target, or appropriate files; associating your master page with the target; and setting your intended Home page as the startup topic in the target. For more information about these
tasks, see the online Help.
So now you just build the target. In the end, your output might look something like this:
CHAPTER 2│Tutorials Guide: Top Navigation Advanced Template
15
You might be thinking, It looks good, but I really want the context-sensitive menu to appear on the
side of topics, not below them. Like this:
That is certainly possible, but that type of configuration requires some extra work in your regular
stylesheet and master page. You will need to create some styles and apply them to the area where
you've inserted the Menu proxy in the master page.
If this kind of advanced styling is beyond your ability, you can either find someone who is very knowledgeable in CSS to help you, or you can follow the other scenario where you borrow some files and
styles from one of Flare's Top Navigation templates, where this look has already been achieved.
See "Advanced Conversion" on page 17.
16
CHAPTER 3
Advanced Conversion
Following are examples of how HTML5 Top Navigation was incorporated into an existing project by borrowing some files and styles from a Flare Top Navigation project template. Specifically, these examples show how we modified Flare's actual online Help project,
converting it from Tripane to Top Navigation output.
STEP 1: CHOOSING AN APPROACH
Because Flare's Top Navigation project templates contain some elements that we wanted to use
(e.g., the look and feel of the Home page and the side context-sensitive menus), we decided to borrow those pieces and make changes to them in our existing project. So we first selected File>New
Project and created a small Flare project based on the Top Navigation Advanced template.
Once we had that small project, we had to make a decision. Do we bring all of the files from our
existing project into the new small project, or do we bring the necessary files from the small project
into our big one? Importing fewer files is always easier than importing many of them, so we decided
to bring the few files from the small project into the big one.
The next decision was how to bring the files into the big project. One option was to simply open the
project folders in Windows and manually copy the files from one project to the other. Another option
18
was to use Flare's interface to import different types of files separately. The third option was to use
Global Project Linking to create an import file in the big project and import only the files we wanted
all at once. There isn't really a wrong answer, and regardless of the method, we would have to do a
little bit of cleanup in the big project, so we decided to go with the third option—Global Project Linking—which seemed like the easiest, most streamlined way to do it.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
19
STEP 2: PREPARING FOR TOP NAVIGATION
INTEGRATION
With Flare's online Help project, we had been creating traditional Tripane output since the first version of the software. So we knew there would need to be some preparation work before switching to
a different output model.
First up was the issue of limiting our menu items. Taking an initial look at our TOC, we knew something would have to change. Some books contained lots of other books and TOC entries.
20
For Tripane output, you can do something like that because there is more real estate to work with
and a scroll bar lets end users find items that are not immediately in view. But we knew it would
probably be an issue in Top Navigation output. So we had to decide what to do about it.
We could have turned off the top menu by increasing the responsive output tablet width on the Skin
tab in the Target Editor. This would force the output to use the side flyout menu only, even if the output was being viewed in a regular browser. But we wanted to keep the top menu, so we decided
against that.
In the end, we decided to restructure much of the TOC, placing items into different categories to
keep books shorter. This was especially the case for the first couple of levels of the TOC, because
we decided to use a default depth of 2 for the top menu (the root menu at the top and one submenu
under it). Any levels deeper than that would show up in a side context-sensitive menu, where the
number of items is less important than it is in the top menu. We also removed some TOC items that
we felt did not need to be in a menu; instead, they would be accessible through search and links
from higher profile topics.
This turned out to take more time than any of the other steps. But it was a good exercise because
some TOC books had grown a great deal over the years, and it was time for some reorganization
anyway. Once this was done, we were ready to proceed with importing files from the template project.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
21
STEP 3: IMPORTING FILES VIA GLOBAL
PROJECT LINKING
Next, we had to decide which of the files from the small Top Navigation project we wanted to
import. Obviously we wanted the Top Navigation skin and its related files that give the Top Navigation project template its look and feel. We also knew we wanted to emulate the Home page in our
project, including some images. But we didn't need most of the topics and many of the images, as
well as most of the project files. So after taking a closer look at the files in the small project, we
decided to import the following (your list of files might be different):
Home.htm This is the only topic file we imported. It is the unique topic used for the Home page
in the template. We would replace the startup topic in our existing project with this one.
BackgroundImage.png This is the large "hero" background image seen on the Home page. We
had our own background image in mind, but we thought it was best to bring this one over
because there were references to it elsewhere in the template project. Once we had imported the
image, we would replace it with our own image, which we would give the same file name. That
way, we wouldn't have to "re-hook" it where other files referenced it.
BasicSteps.png This is one of the circular images used in the slideshow on the Home page. We
wanted to use the same image in the same kind of slideshow, so this was an easy decision.
FacebookIcon.png This is the small Facebook image seen in the footer of the Home page.
KeyFeatures.png This is another slideshow image we wanted to use.
TwitterIcon.png This is the small Twitter image seen in the footer of the Home page.
WhatsNew.png This is the third slideshow image we wanted to use.
HomePage.flmsp This is the master page that is associated with the Home topic. It contains a
unique configuration and references to styles we needed, so we definitely wanted this file, even
though we already had a master page (which we would no longer use).
OtherTopics.flmsp This is a second master page in the template project that is used for all of
the topics except the Home page. Again, it has a unique configuration, especially with its inclusion of a Topic Toolbar proxy and the context-sensitive Menu proxy, which we wanted to add to
our output.
22
StylesForHomePage.css This is the stylesheet created specifically for use by the Home page.
This is where a lot of the hard work exists to get the Home page to look the way it does, so it was
one of the most important files we wanted to import. However, we decided not to import the other
stylesheet in the template project because we already had our own stylesheet for the rest of our
topics. However, there was one style in the template's main stylesheet that we wanted to use,
because it affected the look of the context-sensitive menu. But because it was just one style, we
just decided to copy it over manually into the main stylesheet in our big Flare project.
HomeSearchBar.flskn This is a special skin component that the template project uses for the
central search bar on the Home page. It's already designed the way we want, so we brought it
into our project.
HTML5 - TopNavigation.flskn This is the main HTML5 Top Navigation skin that gives the output the top menu and search bar, as well as the side flyout menu when the output is displayed on
smaller devices.
SideMenu.flskn This is a special skin component used for the context-sensitive menu that
appears next to each topic when it is opened. It was already modified with the look we wanted,
so we imported this too.
TopicToolBar.flskn This is a special skin component used for the topic toolbar that appears
above each topic. It was already modified with the look and alignment we wanted, so we chose
this file as well.
To bring the desired files into our project, we first created a project import file. We did this by opening the Project Organizer, right-clicking the Imports folder, and selecting Add Flare Project
Import File.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
23
After naming the import file, the Project Import Editor opened. In this editor, we pointed to our small
Top Navigation project that we created from the template, and we told Flare to import all of the files,
even though we really didn't want all of them. We'll explain in a moment why we did this.
We saved the import file. Next, in the local toolbar we clicked Import. This opened the Accept
Imported Documents dialog, which listed and automatically selected all of the files in the small project. However, we didn't want to import all of the files, but rather only a few of them. So we clicked
24
Clear All to remove all of the check marks. Then we clicked in the check boxes for the files that we
wanted to bring into our big project. Also, we wanted to avoid importing files that were already in our
project with the same name, so we were careful not to select any of the files with green text next to
them.
After clicking Accept, all of the selected files were imported into our big project. The imported files
were placed in the same locations where they existed in the small project, ensuring that any links to
and from each other were not broken. That would save us some work.
Finally, after all of the files were imported, we closed the Project Import Editor, opened the Project
Organizer, and deleted the import file.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
25
We did this for a few reasons. First, we wouldn't need it anymore. Second, Global Project Linking
creates a link from the files in the source project to those in the child project, so anytime we tried to
edit one of these files in our big project, Flare would give us a warning. And third, there is an option
in the Project Import Editor that, if not deselected, would automatically import all of the files from the
source project (not just the ones we want) if we begin to generate output. But we did not plan to use
the import file the way you might normally use it for Global Project Linking, and we were all done
with it. So by deleting the file, it removed any links between the small source project and our big
one. Therefore, we wouldn't see any warnings when we tried to edit a file, and we wouldn't accidentally import files we didn't want.
One final note. After importing the files, we also placed condition tags on all of them. This isn't something that you must necessarily do with your own project, but our workflow is to always have a condition tag on every file in our project, so we made sure to put the correct condition on each file we
imported.
26
STEP 4: REPLACING CONTENT AND LINKS
Now that the borrowed files were in our big project, we could make some adjustments to them. This
meant replacing some content and links.
First, we opened the Home.htm topic, where most of our work would be done. Initially the file didn't
look much like the output from the template project, but that was okay, because we knew it needed
to receive some information from us, including which stylesheet it should use. In this topic, we did
the following:
We replaced the few variables in it with our own, and we also entered different text in some
places. Due to the way the Home page topic is designed—with elements such as multiple
columns of information—we tried to keep our content to about the same amount and sizes as
that used in the template. If you do that, your transition will go much more smoothly, and you will
have to do less tweaking in the stylesheet. However, even in our case, we weren't able to do this
precisely. Under our "Welcome to Flare" section in the Home page, we added a bit more text
than is found in the same area in the template. This resulted in buttons overlapping with text
when the output was viewed on a mobile device. Therefore, we adjusted a couple of styles in the
Home page stylesheet to make it look right. For details on what we did, see step 8.
There were also some missing links to images for PDF guides. We just right-clicked on each
"Missing file" bar, selected Image Properties, and selected the images we wanted to use. (We
also resized our images to the same size as those in the template project so they would look
good.)
We replaced the cross-references, as well as the image links on the slideshow and PDF guides
so they would point to our own files.
We removed the fourth slide of the slideshow, because we weren't going to use it. Then we
added two new slides with different images.
And finally, we wanted to include videos, but we needed them to have different YouTube links,
so we changed those too.
Also, remember the big hero background image that we imported? We created our own hero image,
named it the same thing ("BackgroundImage.png"), and in Windows we simply replaced the image
we imported with our new one.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
27
Next, we opened the HomePage.flmsp master page file. In this file, we did the following:
We replaced the missing logo file with our own.
We replaced the text and links to topics with different ones.
We replaced the broken variable with our own.
We also would have changed the links on the Twitter and Facebook images, but the template projects already point to our Documentation Team pages, so we didn't have to do anything with them.
We didn't need to replace content or links in any other files, so we were ready to move on to the next
step.
28
STEP 5: INCORPORATING THE TOP
NAVIGATION SKIN
We imported the Top Navigation skin from the template project, so we didn't need to add one. Also,
we decided to keep the look of the skin, with a few small exceptions.
First, we opened the Top Navigation skin in the Skin Editor, and we replaced the generic logo with
our own.
To do this, we selected the Styles tab and expanded Logo>Background. Then we clicked
and
selected our logo image.
We also decided to align our new top menu to the right. Therefore, in the Styles tab we expanded
Menu>Alignment and set the Horizontal field to right.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
29
Next, we told Flare to use our new HTML5 Top Navigation skin. We opened our HTML5 target and
selected the Skin tab. In the Skin field we selected the Top Navigation skin that we imported.
30
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
31
STEP 6: INCORPORATING TOPICS
The only topic we imported was the Home.htm topic. We already made some text, link, and image
changes to it in a previous step. And we didn't add that topic to our TOC, because the best practice
is not to include the Home topic in the top menu, but rather to link it from the logo. To make sure this
happens, we just needed to tell Flare to use it as the startup topic.
So on the General tab of the Target Editor, we selected it in the Startup Topic field.
The default setting in the Skin Editor is to link the startup topic to the logo, so we didn't need to
make any changes in the skin.
32
STEP 7: INCORPORATING MASTER PAGES
We imported two master pages—one to be used for the Home page and the other to be used with
the rest of the topics. The good news is that we didn't need to do anything else to the master page
for the Home topic, other than the few changes we made in a previous step. The Home topic is
already tied to its master page via a style. The only thing we needed to do was associate the other
master page with the rest of the topics.
So we opened our HTML5 target and selected the Advanced tab. From the Master Page field we
selected the file that we imported.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
33
STEP 8: INCORPORATING STYLESHEETS
Remember when we initially opened the imported Home topic and it didn't look right? By incorporating the stylesheets we fixed that.
In our large project, we had one stylesheet set at the project level so that all content files would use
it automatically. But then we imported another stylesheet from the template project that is designed
to work solely with the Home topic. This meant we had to change the way we work with styles,
associating stylesheets to individual files rather than to the entire project.
First, we selected Project>Project Properties, and in the dialog we selected the Defaults tab. We
set the Master Stylesheet field to (default).
Next, we opened the File List window pane (View>File List). We set the filter to show all topic files,
and in the grid we selected all of the files except for the Home.htm file.
34
With those files highlighted, we selected Home>Properties (or F4). In the Properties dialog, we
selected the Topic Properties tab and in the Stylesheet field we chose styles (the name of our
existing stylesheet that we planned to use for all of our topics except Home.htm). After clicking OK,
Flare applied that stylesheet to all of the selected topics.
The only other file that needed to be associated with a stylesheet was the "OtherTopics" master
page. So we opened that file. When we did this, we saw a message telling us that the stylesheet
linked to the master page was missing. That's because it was associated with a stylesheet in the
small template project that we didn't import into our big project.
With the master page opened, we selected the Home ribbon and clicked Stylesheet Links. In the
dialog, we saw the old stylesheet still linked to the master page.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
35
We used the arrow buttons to remove the old stylesheet and add the one we wanted.
For the most part, we didn't touch the stylesheet that we used for the Home page topic
(StylesForHomePage.css). However, previously in step 4 we mentioned that content shifted in the
output so that buttons overlapped with text when viewed on a mobile device.
36
On larger screens, this didn't happen. So we needed to adjust the stylesheet so that we would have
more space between the last bullet item and the first button below it, but only when the output was
displayed on small screens like smart phones.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
37
First, we opened the Home page, hovered over the div structure bar containing the bulleted list, and
discovered it was using a style class called "left-content."
38
We opened the StylesForHomePage.css stylesheet in the Internal Text Editor. We scrolled to the
bottom and found a medium called "screen and (max-width: 40em)." This medium contains style settings only for small screens, such as smart phones. Within this medium, we added the following:
.left-content
{
margin-bottom: 80px;
}
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
39
After generating the output again, the spacing was much better.
40
There is one final thing we did related to styles. Although we didn't want to use the
"MainStyles.css" stylesheet from the small template project, there was one style that we wanted.
It's a style that positions the context-sensitive menu in topics just the way we want it, and allowing
content to flow under it. In the small template project, we right-clicked on this file and selected
Open with>Internal Text Editor. We scrolled all the way to the bottom of the file and copied this
style and its definitions:
div.sideContent
{
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 33.33%;
}
Then in our big Flare project, we opened our primary stylesheet (in our case, it's named
"styles.css") and we pasted this style into it.
CHAPTER 3│Tutorials Guide: Top Navigation Advanced Template
41
STEP 9: SETTING RESPONSIVE OUTPUT
HTML5 Top Navigation output is automatically set to use responsive output. But we wanted to set
one last option to make the responsive output based on the width of specific devices, rather than
based on the width in the browser. That way, the top menu would always be shown when the output
is viewed in a browser, regardless of how small the output display gets. But the side flyout menu
would be used when the output is viewed on a tablet or mobile phone.
So we opened the target, and on the Skin tab we selected Use device width media queries.
And that's it. The next time we generated our target, it displayed in the new HTML5 Top Navigation
format.
42
CHAPTER 4
Cross-References
When it comes to creating internal links in a project (e.g., links from one topic to another),
cross-references are preferred over hyperlinks. That's because they're smarter and require
much less maintenance. Hyperlinks are best for external links (e.g., to a website or PDF).
In this template, we wanted links from one topic to another in the online output to look like
this:
44
Creating Cross-References
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet, and at the top of the Stylesheet Editor, click in the Medium drop-down and
select default.
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If you plan to use cross-references on the Home page topic, which uses the other
stylesheet, you can make the same changes there as well.
b. In the local toolbar, make sure the first button displays
. If the button displays
instead, then click it.
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. On the left side of the Stylesheet Editor, select the MadCap|xref style.
e. From the Show drop-down list on the upper-right side of the editor, select
.
f. In the Properties section, expand the Font group and choose the settings shown in the following image:
CHAPTER 4│Tutorials Guide: Top Navigation Advanced Template
45
g. Expand the Unclassified group, scroll down, and click in the cell to the right of the mc-format
property.
h. In the dialog that opens, type the following in the Enter format field:
{para}
Note: There are lots of other formats that we could have created in this dialog. But we
liked {para} because it's simple and does just what we want—displays the first text it
finds in the file we point to, which is usually the heading.
i. Click OK.
j. Now you need to tell Flare what to do when someone hovers over the cross-reference. On the
left side of the Stylesheet Editor, expand the MadCap|xref style. Then under that, expand
(Pseudo Classes).
k. Select hover.
l. In the Properties section, expand the Font group and choose the settings shown in the following image:
46
m. Click
to save your work.
GET THE CSS (ADVANCED USERS)
Enter this in the default medium in the stylesheet:
MadCap|xref
{
color: #2d8dcc;
font-weight: bold;
mc-format: '{para};
text-decoration: underline;
}
MadCap|xref:hover
{
color: #bed230;
}
CHAPTER 4│Tutorials Guide: Top Navigation Advanced Template
47
Note: There are lots of other formats that we could have created in this dialog. But we liked
{para} because it's simple and does just what we want—displays the first text it finds in the
file we point to, which is usually the heading.
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If
you plan to use cross-references on the Home page topic, which uses the other stylesheet,
you can make the same changes there as well.
2. Whenever you insert a cross-reference, select the MadCap:xref style.
Note: You can also create classes of the MadCap:xref style. We just happened to use the
parent MadCap:xref style in this template.
48
CHAPTER 5
Drop-Downs
Creating drop-downs is quite easy in Flare. It's just a matter of selecting the content that you
want to be in the drop-down (both the header and the content below) and clicking a button or
two. In this template, we used styles to make some adjustments to the look of drop-downs.
For more information see the online Help.
This chapter discusses the following:
Style Properties
First-Level Drop-Downs
Second-Level Drop-Downs
Applying Drop-Down Styles
50
52
60
63
Style Properties
Here are some of the main properties that we adjusted for our styles:
Border We added borders to the bottom of drop-downs to make it easier for the reader to distinguish
one drop-down from another when there are many of them in row. We also created a style class that
displays the final drop-down in a series without a bottom border.
50
Icons We associated custom icons with the drop-downs to distinguish first-level drop-downs from
second-level drop-downs. Furthermore, we used multiple icons to display the drop-downs when they
are expanded and collapsed.
Hover Color We styled the drop-down hotspot so that it shows a different color when users hover
over it.
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
51
First-Level Drop-Downs
We used the parent drop-down style for first-level drop-downs.
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet, and at the top of the Stylesheet Editor, click in the Medium drop-down and
select default.
The online output is going to use the default settings, so that's where we're making our
changes. For more information see the online Help.
b. In the local toolbar, make sure the first button displays
instead, then click it.
52
. If the button displays
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. On the left side of the Stylesheet Editor, select the MadCap|dropDown style.
e. From the Show drop-down list on the upper-right side of the editor, select
.
f. In the Properties section, expand the Box group and choose the settings shown in the following image:
g. Expand the Unclassified group, scroll down, and click in the cell to the right of the mc-closedimage property. Select [Browse for Image] and use the dialog to find and select an image you
want to use. This is the image that is used when the drop-down is in a closed (or collapsed)
state. In our template, we selected an image called "DropDownClosed" that we stored in the
Resources/Images subfolder of the Content Explorer.
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
53
h. Scroll down more in the Unclassified group and click in the cell to the right of the mc-openimage property. Select [Browse for Image] and use the dialog to find and select an image you
want to use. This is the image that is used when the drop-down is in an open (or expanded)
state. In our template, we selected an image called "DropDownOpen" that we stored in the
Resources/Images subfolder of the Content Explorer.
i. Now you need to give the first-level drop-down a bottom border. On the left side of the
Stylesheet Editor, select the MadCap|dropDownBody style.
j. In the Properties section, expand the Border group and choose the settings shown in the following image:
k. Next, let's account for the final drop-downs that we don't want to have borders. On the left side
of the Stylesheet Editor, select the MadCap|dropDownBody style.
l. In the local toolbar, click Add Class.
m. Type a name for the new style class (we named ours "Final") and click OK.
54
n. With that new style class selected, expand the Border group and choose the settings shown
in the following image:
o. And finally, you need to give a unique look to the drop-down link, including a different color
when users hover over it. On the left side of the Stylesheet Editor, select the
MadCap|dropDownHotspot style.
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
55
p. In the Properties section, expand the Font group and choose the settings shown in the following image:
q. Now expand the MadCap|dropDownHotspot style, and then expand (Pseudo Classes)
under that.
r. Select hover.
56
s. In the Properties section, expand the Font group and choose the settings shown in the following image:
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
57
GET THE CSS (ADVANCED USERS)
Enter this in the default medium in the stylesheet (replacing the example images with your own):
MadCap|dropDown
{
margin-bottom: 6px;
margin-top: 6px;
mc-closed-image: url('../Images/DropDownClosed.png');
mc-open-image: url('../Images/DropDownOpen.png');
}
MadCap|dropDownBody
{
border-bottom: solid 1px#bed230;
}
MadCap|dropDownBody.Final
{
border-bottom: 0px;
}
MadCap|dropDownHotspot
{
color: #404040;
font-size: 0.9em;
font-weight: bold;
}
58
MadCap|dropDownHotspot:hover
{
color: #bed230;
font-weight: bold;
}
2. Click
to save your work.
3. Now that you've got your styles, you just need to apply them to the correct parts of the drop-down.
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
59
Second-Level Drop-Downs
We created a style class to make second-level drop-downs indented.
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet, and at the top of the Stylesheet Editor, click in the Medium drop-down and
select default.
The online output is going to use the default settings, so that's where we're making our
changes. For more information see the online Help.
b. In the local toolbar, make sure the first button displays
instead, then click it.
60
. If the button displays
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. On the left side of the Stylesheet Editor, select the MadCap|dropDown style.
e. In the local toolbar, click Add Class.
f. Type a name for the new style class (we named ours "SecondLevel") and click OK.
g. From the Show drop-down list on the upper-right side of the editor, select
.
h. With the new style class selected, expand the Box group and choose the settings shown in
the following image:
i. Expand the Unclassified group, scroll down, and click in the cell to the right of the mc-closedimage property. Select [Browse for Image] and use the dialog to find and select an image you
want to use. This is the image that is used when the drop-down is in a closed (or collapsed)
state. In our template, we selected an image called "DropDownClosedSecondLevel" that we
stored in the Resources/Images subfolder of the Content Explorer.
j. Scroll down more in the Unclassified group and click in the cell to the right of the mc-openimage property. Select [Browse for Image] and use the dialog to find and select an image you
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
61
want to use. This is the image that is used when the drop-down is in an open (or expanded)
state. In our template, we selected an image called "DropDownOpenSecondLevel" that we
stored in the Resources/Images subfolder of the Content Explorer.
You don't need to set anymore styles for the second-level, because the second level will inherit all of
the other settings from the parent (first-level) styles.
GET THE CSS (ADVANCED USERS)
Enter this in the default medium in the stylesheet (replacing the example images with your own):
MadCap|dropDown.SecondLevel
{
margin-left: 10px;
mc-closed-image: url('../Images/DropDownClosedSecondLevel.png');
mc-open-image: url('../Images/DropDownOpenSecondLevel.png');
}
2. Click
to save your work.
3. Now that you've got your styles, you just need to apply them to the correct parts of the drop-down.
62
Applying Drop-Down Styles
1. Insert a drop-down. For more information see the online Help.
2. In the local toolbar at the bottom of the XML Editor, click
and
to turn on the structure bars.
Block bars are displayed to the left of the content, and span bars are displayed above it.
3. Do the following to apply the appropriate styles to the different parts of a drop-down.
TO MAKE A SECOND-LEVEL DROP-DOWN
a. Right-click the MadCap:dropDown structure bar.
b. In the content menu, select Style Class.
c. Select the class you created for the second level. In this template, our class is named
"MadCap:dropDown.SecondLevel."
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
63
You don't need to apply a style to make a first-level drop-down, because when you insert a dropdown, it initially uses the parent style that we're using for the first level.
TO REMOVE THE BOTTOM BORDER
You don't need to add the bottom border, because we've designed the styles so that they will all initially have a bottom border when first inserted. Use the following steps to remove the bottom border
for the final drop-down in a sequence (i.e., the final first-level drop-down or the final second-level
drop-down in a row).
a. Right-click the MadCap:dropDownBody structure bar.
b. In the content menu, select Style Class.
c. Select the class you created to remove the bottom border. In this template, our class is named
"MadCap:dropDownBody.Final."
64
4. Click
to save your work.
CHAPTER 5│Tutorials Guide: Top Navigation Advanced Template
65
66
CHAPTER 6
Image Sizing and Positioning
There are multiple topics in this template that contain images. Sizing is always a major concern with images, because you want them not only to be the right size, but also to look as
good as possible. In addition, some images in this template were positioned in such a way
to let text flow to the right or left of it. . For more information see the online Help.
In this template, we controlled the quality, size, and position of the images.
This chapter discusses the following:
Purpose of Images
Max Height/Width and Thumbnails
Positioning with Floats and Div Styles
68
69
73
Purpose of Images
If you look at the files in the Resources/Images subfolder in the Content Explorer, you'll see several
PNG image files.
These images have been used in the template for a variety of purposes. Some are used as regular images
inserted into topics. Some are used in place of bullets in lists. Some are used for special effects, such as
drop-downs. And so on…
For more information about how we associated images with bulleted lists, see "Lists" on page 77.
68
Max Height/Width and Thumbnails
We wanted to control the height of some pictures, such as the check mark and red X images that you see
in tables.
In addition, we wanted some of the larger images to be shown as thumbnail images that enlarge when
clicked.
CHAPTER 6│Tutorials Guide: Top Navigation Advanced Template
69
To accomplish this, we created multiple image style classes and placed settings on them to control the
size or turn them into thumbnails.
70
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet, and at the top of the Stylesheet Editor, click in the Medium drop-down and
select default.
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If you plan to use images in the same way on the Home page topic, which uses
the other stylesheet, you can make the same changes there as well.
b. In the local toolbar, make sure the first button displays
. If the button displays
instead, then click it.
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. On the left side of the Stylesheet Editor, select the img style.
e. In the local toolbar, click Add Class.
f. Type a name for the new style class and click OK. In this template, we created the following
image style classes:
ReduceButtonSize This style class is used on small "button-size" images that we
want to be shrunk (when necessary) to no more than 18 pixels high.
Thumbnail This style class is used on larger images that we want to display as a
thumbnail in the output.
g. From the Show drop-down list on the upper-right side of the editor, select
.
h. Select each new style class one at a time and choose the settings shown in the following
images.
ReduceButtonSize
CHAPTER 6│Tutorials Guide: Top Navigation Advanced Template
71
Thumbnail
GET THE CSS (ADVANCED USERS)
Enter this in the default medium in the stylesheet:
img.ReduceButtonSize
{
max-height: 18px;
max-width: auto;
}
img.Thumbnail
{
mc-thumbnail: popup;
}
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If
you plan to use images in the same way on the Home page topic, which uses the other
stylesheet, you can make the same changes there as well.
2. Click
to save your work.
3. Now that you've got your styles, you just need to apply them to the appropriate images. For
example, let's say you have already inserted a large image into a topic and want it to show as a
thumbnail in the output. In that case, you can right-click the image and from the context menu select
Style Class>img.Thumbnail.
72
Positioning with Floats and Div Styles
To position some images (and their figure captions in print output), we created div style classes and placed
float settings on them. A div tag essentially acts as a container, allowing us to place other tags within it.
CHAPTER 6│Tutorials Guide: Top Navigation Advanced Template
73
Tip: Placing images in div tags can be especially useful if you want to include other content in the
container as well. For example, if you decide to also create print-based output from the project,
you can add text that serves as a figure caption, with autonumbering applied to it. Because the figure caption is in the div tag with the images, it travels with the image wherever it is positioned.
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet, and at the top of the Stylesheet Editor, click in the Medium drop-down and
select default.
b. In the local toolbar, make sure the first button displays
. If the button displays
instead, then click it.
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. On the left side of the Stylesheet Editor, select the div style.
e. In the local toolbar, click Add Class.
f. Type a name for the new style class and click OK. In this template, we created the following
div style classes related to images:
ImagesFloatLeft This style class is used on images that we want to be positioned to
the left of the main body text.
ImagesFloatRight This style class is used on images that we want to be positioned to
the right of the main body text.
g. From the Show drop-down list on the upper-right side of the editor, select
74
.
h. Select each new style class one at a time and choose the settings shown in the following
images.
ImagesFloatLeft
ImagesFloatRight
CHAPTER 6│Tutorials Guide: Top Navigation Advanced Template
75
GET THE CSS (ADVANCED USERS)
Enter this in the default medium in the stylesheet:
div.ImagesFloatLeft
{
clear: both;
float: left;
margin-right: 10px;
padding: 5px;
}
div.ImagesFloatRight
{
clear: both;
float: right;
margin-left: 10px;
padding: 5px;
}
2. Click
to save your work.
3. Now that you've got your styles, you just need to apply them to the appropriate images. For
example, let's say you've inserted an image that you want to float to the left, so that the main topic
text floats to the right. To accomplish this, do the following:
a. Click in the middle of the inserted image to select it.
b. Press Tab on your keyboard.
c. In the Create Group dialog, select div.ImagesFloatLeft.
d. Click OK.
76
CHAPTER 7
Lists
This template contains a topic named "Lists" that contains many different kinds of lists that
you can use or re-create in your own topics.
Creating these lists involved the following:
CSS Styles We created and modified styles to give each list a particular look. For bulleted lists, this included associating the style with a custom bullet image.
Creating Lists and Applying Styles Once the styles were created, we inserted the
lists and applied styles to them where necessary.
This chapter discusses the following:
Types of Lists
CSS Styles
Create Lists and Apply Styles
78
81
85
Types of Lists
Here are the kinds of lists found in our template:
Simple Numbered List
Simple Bulleted List
Lists With Paragraphs Between Items
78
Multi-level Numbered List
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
79
Multi-level Bulleted List
Multi-level List (Mixed)
80
CSS Styles
1. Do one of the following:
USE THE STYLESHEET EDITOR (BEGINNERS)
a. Open a stylesheet.
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If you plan to use lists in the same way on the Home page topic, which uses the
other stylesheet, you can make the same changes there as well.
b. In the local toolbar, make sure the first button displays
. If the button displays
instead, then click it.
c. In the upper-left corner of the editor, click in the Show Styles field and select
.
d. From the Show drop-down list on the upper-right side of the editor, select
.
e. At the top of the Stylesheet Editor, click in the Medium drop-down and select default.
f. Create the following style classes:
ol.LowerAlpha This is a special heading style class that we used for a second-level
numbered list.
ol.LowerRoman This is a special style class that we used for a third-level numbered list.
ul.SecondLevel This is a second special style class that we used for a second-level bulleted list.
g. On the left side of the Stylesheet Editor, select ol.
h. On the right side of the Stylesheet Editor, set the following properties and values (some of
these are default values that may already be set):
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
81
Note: We set the list-style-image to "none" because it helps to prevent bullets from
being shown mistakenly as numbers in mixed lists.
i. On the left side of the Stylesheet Editor, expand ol and select the LowerAlpha style class.
j. On the right side of the Stylesheet Editor, set the following properties and values:
k. On the left side of the Stylesheet Editor, under ol, select the LowerRoman style class.
l. On the right side of the Stylesheet Editor, set the following properties and values:
m. On the left side of the Stylesheet Editor, select ul.
n. On the right side of the Stylesheet Editor, set the following properties and values (some of
these are default values that may already be set):
82
In our template, we have an image in the Content Explorer named "Bullet1.png" that we selected. You can select your own image.
o. On the left side of the Stylesheet Editor, under ul, select the SecondLevel style class.
p. On the right side of the Stylesheet Editor, set the following properties and values:
GET THE CSS (ADVANCED USERS)
Enter the following in the default medium in the stylesheet. (The referenced images are ones we
have already added to the Resources folder in the Content Explorer. You can replace these with
your own images.)
ol
{
list-style-image: none;
}
ol.LowerAlpha
{
list-style-type: lower-alpha;
}
ol.LowerRoman
{
list-style-type: lower-roman;
}
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
83
ul
{
list-style-image: url('../Images/Bullet1.png');
margin-left: 2.1em;
padding: 0;
}
ul.SecondLevel
{
list-style-image: url('../Images/Bullet2.png');
}
Note: The Top Navigation Advanced template has two stylesheets. We modified the
styles primarily in the one called "MainStyles.css," which is used for most of the topics. If
you plan to use lists in the same way on the Home page topic, which uses the other
stylesheet, you can make the same changes there as well.
Note: We set the list-style-image to "none" because it helps to prevent bullets from being
shown mistakenly as numbers in mixed lists.
2. Click
84
to save your work.
Create Lists and Apply Styles
1. Place your cursor in the document where you want to insert a list. Then do the following, depending
on the type of list:
SIMPLE NUMBERED LIST
a. Select the Home ribbon. In the Paragraph section click the down arrow next to the list button
and select Numbered List.
b. After providing the content for a list item, press Enter. Then enter the next list item text, and so
on. To exist the list format, press Enter again on a blank list item.
SIMPLE BULLETED LIST
a. Select the Home ribbon. In the Paragraph section click the face of the list button
. Altern-
atively, you can select the down arrow next to it and select Bullet List.
b. After providing the content for a list item, press Enter. Then enter the next list item text, and so
on. To exist the list format, press Enter again on a blank list item.
LIST WITH PARAGRAPHS BETWEEN ITEMS
a. Follow any of the steps in this topic for creating a particular kind of list.
b. Click in the list where you want to add a paragraph item. For example, if you want to add a comment between steps 2 and 3, place your cursor at the very end of step 2.
c. Select the Home ribbon. In the Paragraph section click the down arrow next to the List
Actions button
.
d. Select Make Paragraph Item(s). A <p> tag is added after the <li> tag.
e. To add lines without a number or bullet, simply press Enter on your keyboard and type your
content.
f. To continue the numbering or the bullets, click the paragraph item icon . Doing this simply
starts another <li> tag.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
85
MULTI-LEVEL NUMBERED LIST
To replicate the same multi-level numbered list that you see in the template, do the following:
a. Select the Home ribbon. In the Paragraph section click the down arrow next to the list button
and select Numbered List.
b. Provide text for the first list item and press Enter. Then enter text for the second list item and
press Enter.
c. Press Tab on your keyboard. It should look something like this now:
d. Provide text for the first list item and press Enter. Then enter text for the second list item and
press Enter.
e. Press Tab on your keyboard. It should look something like this now:
f. Provide text for the first list item and press Enter. Then enter text for the second list item and
press Enter.
86
g. In the Home ribbon, click
. It should look something like this now:
h. Click the yellow arrow button. It should look something like this now:
i. In the Home ribbon, click
.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
87
j. Click the yellow arrow button. It should look something like this now:
k. Provide text for the final list item.
88
l. Make sure the structure bars are turned on. Right-click the ol structure bar that represents the
second-level list.
m. From the context menu, select Style Class>ol.LowerAlpha.
After the style is applied, the list should look something like this:
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
89
n. Right-click the ol structure bar that represents the third-level list.
90
o. From the context menu, select Style Class>ol.LowerRoman.
After the style is applied, the list should look something like this:
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
91
MULTI-LEVEL BULLETED LIST
To replicate the same multi-level bulleted list that you see in the template, do the following:
a. Select the Home ribbon. In the Paragraph section click the face of the list button
. Altern-
atively, you can select the down arrow next to it and select Bullet List.
b. Provide text for the first list item and press Enter.
c. Repeat the first two steps two more times so that you have three bullet items and a blank bullet
item at the end.
Note: In our template, we also selected some text at the beginning of each list item
and applied a span style class to display the text in a green font matching the bullet
image.
d. Press Tab on your keyboard. It should look something like this now:
e. Provide text for the first list item and press Enter. Then enter text for the second list item and
press Enter.
92
f. In the Home ribbon, click
. It should look something like this now:
g. Click the yellow arrow button. It should look something like this now:
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
93
h. Repeat the steps above to add two more first-level items, followed by two more second-level
items, and finally two more first-level items. It should look something like this now:
94
i. Make sure the structure bars are turned on. Right-click the ul structure bar that represents the
initial second-level list.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
95
j. From the context menu, select Style Class>ul.SecondLevel.
After the style is applied, the list should look something like this:
96
k. Repeat the previous two steps for the other second-level list. When you are finished, it should
look something like this:
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
97
MULTI-LEVEL LIST (MIXED)
To replicate the same multi-level list (mixed) that you see in the template, do the following:
a. Select the Home ribbon. In the Paragraph section click the down arrow next to the list button
and select Numbered List.
b. Provide text for the list item and press Enter.
c. Press Tab on your keyboard. It should look something like this now:
d. Provide text for the list item and press Enter. Then enter text for the next list item and press
Enter.
e. In the Home ribbon, click
98
. It should look something like this now:
f. Click the yellow arrow button. It should look something like this now:
g. Provide text for the list item and press Enter.
h. Press Tab on your keyboard.
i. Provide text for the list item and press Enter. Then enter text for the next list item and press
Enter.
j. Press Tab on your keyboard. It should look something like this now:
k. Provide text for the list item and press Enter. Then enter text for the next list item and press
Enter.
l. In the Home ribbon, click
.
m. Click the yellow arrow button.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
99
n. Provide text for the list item and press Enter.
o. In the Home ribbon, click
.
p. Click the yellow arrow button.
q. Provide text for the final list item. It should look something like this now:
100
r. Make sure the structure bars are turned on. Right-click the ol structure bar that represents the
initial second-level list.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
101
s. From the context menu, select Style Class>ol.LowerAlpha.
After the style is applied, the list should look something like this:
102
t. Right-click the ol structure bar that represents the other second-level list.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
103
u. From the context menu, select Style Class>ol.LowerAlpha.
After the style is applied, the list should look something like this:
104
v. Right-click the ol structure bar that represents the third-level list.
w. From the context menu, select Type>Bullet List.
CHAPTER 7│Tutorials Guide: Top Navigation Advanced Template
105
The list should look something like this:
2. Click
106
to save your work.
APPENDIX
PDF Guides
The following PDF guides are available for download from the online Help:
Accessibility Guide
Key Features Guide
Analyzer Guide
Language Support Guide
Autonumbers Guide
Movies Guide
Condition Tags Guide
Navigation Links Guide
Context-sensitive Help Guide
Print-based Output Guide
DotNet Help Guide
Project Creation Guide
Eclipse Help Guide
Pulse Guide
Getting Started Guide
QR Codes Guide
Global Project Linking Guide
Reports Guide
HTML Help Guide
Reviews & Contributions Guide
HTML5 Guide
Search Guide
Images Guide
SharePoint Guide
Importing Guide
Shortcuts Guide
Index Guide
Skins Guide
Snippets Guide
Templates Guide
Source Control Guide: Git
Topics Guide
Source Control Guide: Perforce
Touring the Workspace Guide
Source Control Guide: Subversion
Transition From FrameMaker Guide
Source Control Guide: Team Foundation Server Tutorials Guide: Product Foldout 3-Fold Template
Source Control Guide: Visual SourceSafe
Tutorials Guide: Top Navigation Adv Template
Styles Guide
Tutorials Guide: Tripane and PDF Adv Template
Tables Guide
Variables Guide
Tables of Contents Guide
WebHelp Outputs Guide
Targets Guide
What's New Guide
108