Flare Tip: Controlling the Look-and-Feel of Popups

In this Flare tip, you will learn how to create an alternate master page for your popup topics and then apply the alternate master page to those specific popup topics using your stylesheet.

Setting the Background Color for Popup Topics

How do you make your topic popups look like traditional WinHelp/HTML Help popups in Flare? The key is changing the background color of the popup topics to make them appear with a faded yellow background color. The easiest way to control the background of popup topics is using master pages.

To create a new master page

First, you need to create a new master page for the popup topics.

1. Select Project > Add Master Page.

2. Select MasterPage from the list of templates.

3. Type a name for the master page (for example, “popup”) and click Add.

4. Delete the breadcrumbs proxy and the mini-toc proxy. Make sure you leave the topic body proxy in the master page. If you accidentally delete it, reinsert it by selecting Insert > Proxy > Insert Body Proxy.

5. Select Format > Background Color and select the color you want to use.
   

Tip: If you want to use the standard popup yellow, click More Colors and in the Color box at the top left of the Color Picker, enter the following hex value: #ffffcc. Click Add To My Colors to use the Hex value you entered, then click OK.

6. Click Save All (or File > Save All).
   
   
7. Close the master page.

Creating a Style Class

Now you need to apply the popup master page to the popup topics. The easiest way to do that is to create a class for the html tag in your stylesheet.

Why would you use the html tag?

The HTML tag is the highest level tag in the topic and is the place where you can specify a specific master page to use for a topic.

Why not just edit the HTML tag directly?

If you specify a master page directly in the html tag, the master page would be used by all topics in the project because they all use the html tag. You could create a class of the HTML tag and use that class to assign the color to your popup topics, but using the master page approach gives you greater control over what appears in the topic.

To create a subset of topics that use a special master page, you can create a class of the html tag.

What is a class?

Classes are like substyles. They belong to the parent tag but change (or override) some of the attributes associated with that tag. In Flare, classes are the way you create your own custom tags. The most obvious way to add classes is using the Stylesheet Editor.

To add a class using the stylesheet editor

1. On the Content tab under Resources > Stylesheets, open your stylesheet (.CSS file).

2. Click on the html tag.
   

Hint: You can select Topic Styles from the list at the top of the Stylesheet Editor to filter the list of styles.

3. Now right click on the html tag and select Add Class.

4. Type a name for the class (for example, popup), and then click OK.

5. On the right side of the Stylesheet Editor, click the field for the mc-master-page attribute and select the master page you created for the popup windows.

6. Click Save All (or File > Save All).

Applying a Class to a Topic

Now you need to assign the newly created class for the html tag to your popup topics.

To apply a class to a topic (with the topic open)

1. Open the topic that you want to display in a popup window.
   
2. On the structure bar on the left side of the XML Editor, click the HTML tag bar.

3. Select Style Class and then from the submenu select the HTML class that you created (in this example, we called it “popup”).
   Note: If you don’t see the structure bar, click . If you don’t see the class you created, make sure you click Save All .

To apply a class to a topic (with the topic closed)

You can also apply a class to a topic through the Topic Properties.

1. Right click on the topic and select Properties.

2. Select the Topic Properties tab.

3. In the Topic Style Class list, select the html class that you created.
   
   Note: If you don’t see the class here, make sure that you clicked Save All. If you still don’t see it, make sure the class you created in the stylesheet actually appears under the html tag.

4. Click OK to close the topic properties.

Hint: You could use the topic properties in conjunction with the File List feature to assign the class to multiple topics at the same time.

Creating a Topic Popup Link

To finish the process, you need to create the topic popup link.

To create a topic popup link

1. Open the topic where you want to create the popup link.

2. Select the link text.

3. Insert a hyperlink (Insert > Hyperlink) or cross reference (Insert > Cross Reference).

4. Link to the popup topic where you applied the class.

5. Select Popup Window for the Target Frame, and then click OK.

Testing Your Popups and Alternate Master Pages

Now generate your primary target and test the popup link.

Note: You have to generate the help to test the changes you made because the Preview will not show you the alternate master page when you click on the topic popup link.