I recently did a webinar on image maps and afterwards, received an email asking about how I made the popup windows look so not-white-and-boring.
Here’s what the emailer was referring to:
I didn’t do that by changing the look/feel of the pop-up window CSS, I handled it via a different masterpage.
Here’s my regular masterpage:
The XML Editor view of the masterpage is here:
You’ll see that it has a lot of stuff:
- Breadcrumbs
- Topic proxy
- Multiple borders
- Two logos
- Links to printed versions of the help
- Contact info (blurred out in the lower right corner
And it looks nice when shown on a regular sized help page…but on a pop-up window, it would simply be too much.
There’s more design than text if I were to use the regular masterpage. I need to create a simpler masterpage for these popup windows.
Before I go further, I do want to mention that the topics that will appear in these popup windows will not appear anywhere else. So I put them in their own little folder so I don’t get them confused with other topics. These also will not appear in the TOC (and I’ll be sure to turn off the ability for them to be found in a search).
First thing I do is make a copy of my current masterpage and rename the copy to masterpage_popup.
Now I’m going to do several things:
- Delete the Breadcrumbs proxy
- Delete both icons
- Delete all the footer text
This is what I’m left with:
And the preview looks like this:
OK – so I have my popup masterpage – now what? I’m going to assign it to my popups via an HTML class in my CSS.
I open my stylesheet, go to the <html> tag, and create a new class called html.popup_only.
In that class, I scroll down to the Unclassified section and look for mc-master-page. From the drop-down list of masterpages, select masterpage_popup.
Now I go back to the topics in the popups folder and assign that masterpage to them. To do this, I right-click on the topic and select Properties. In the Topic Style Class field, I select popup_only. While I’m there, I’m going to uncheck Include topic when full-text search database is generated so these little topics don’t appear when folks do a search.
And I’m done!
Try it out and let me know how it goes.
I used Flare v8.1.2 for this post.
The other day I showed you how to create a caption for figures that looked just liked a styled <caption> tag that you may have used for tables.
Now I’ll show you how to number those figures and tables. Something to remember: you’re going to set the numbering in the styles and then let the code do the work. (It is pretty cool!)
Let’s start with numbering figures.
In the earlier post, I created a style class called p.caption_figure and it looks like this:
p.caption
{
font-size: 11pt;
font-weight: bold;
font-style: italic;
margin-left: 10px;
padding-bottom: 0px;
margin-bottom: -5px;
}
Let’s add some autonumbering. I scroll down to the Autonumbering section and click in the mc-auto-number-format area. The auto-number format window opens.
I select Show Format Commands from the list of available commands. Click {b} (this will make my figure text bold).
Now, I type Figure immediately after the {b}. If I hit the space bar, I will add a space in the figure label.
Next, I select Show AutoNumber Commands from the list of available commands.
I choose {n+}. This will increment the figure numbers starting with 1. Then I add a space, a dash, and another space. (If you skip the last space, the figure title will be jammed up next to the figure number.)
I need to close the bold setting – so I go back to Show Format Commands and select {/b}.
I click OK and, when I get back to the stylesheet, I see this:
And to show the entire code for the p.caption_figure:
p.caption
{
font-size: 11pt;
font-weight: bold;
font-style: italic;
margin-left: 10px;
padding-bottom: 0px;
margin-bottom: -5px;
mc-auto-number-format: '{b}Figure {n+} - {/b}';
}
Technically, I’m done! So, let’s see what things look like over on my topic.
How lovely!
Try it and let me know how it works for you.