Hi Dave,
These productivity tip boxes consist of just a table style and custom toggle icons. They are not an integrated feature of Help & Manual but they are quite easy to make.
You can also see examples of these elements in the full original source project of Help & Manual's own help, which is included with Help & Manual. You can find it in your Documents directory, in My HelpAndManual Projects > Examples > HelpAndManual7. In addition to this you should also look in the other projects in the Examples folder, you will find a lot of useful tips and tutorials there.
These table boxes are are basically just plain, single-celled tables, with borders and backgrounds if you like, and styles for the text inside them. The only tricky part is the offset icon over the corner in CHM and WebHelp, which is created using CSS styles. To make this work you need to assign IDs to the tables and the icons you use. Since you have to make quite a lot of entries for this it is a good idea to make blank versions of the tables complete with the icons and save them as "snippets" as explained above for the toggles, then you can insert the ready-to-use table with a couple of clicks.
Step 1: First you need to add the CSS code for the tables and the icons to your HTML page template. The example below has settings for the two different tables used in the Help & Manual help: overview-table is the one with the light bulb icon, callout-table is the one with the green flag or the gold star. There are two different definitions because the icons have different sizes and need different offsets. Also, I have applied some styles for any hyperlinks inside the tables. These styles can be adjusted any way you like depending on how you want your own links in these tables to look.
In your project go to Project Explorer > Configuration > HTML Page Templates > Default and add the following block of code directly before the closing </head> tag:
Code: Select all
<style type="text/css">
#callout-table, #overview-table {display:block; position:relative;
top:0; left:0;}
#callout-icon {display:block; position:absolute; top:-11px; left:-11px;}
#callout-icon-flag {display:block; position:absolute; top:-11px; left:-8px;}
#callout-table a {text-decoration: none; color: blue;}
#callout-table a:visited {text-decoration: none; color: blue;}
#overview-table a {text-decoration: none; color: black;}
#overview-table a:visited {text-decoration: none; color: black;}
#callout-table a:hover, #overview-table a:hover {text-decoration:
underline;}
</style>
The first block of three lines controls the icon positions, the second block of five lines controls the appearance of hyperlinks inside the tables.
Step 2: Locate the icon files you want to use in the "Graphics Buttons" subfolder of the HM help project and copy them to your graphics folder. (You can find this project in your Documents folder in My HelpAndManual Projects\Examples\HelpAndManual5 -- you can also look at and copy examples of the tables used in this project.)
Step 3: In an empty paragraph set centered alignment (to center the table) and create a new table with these settings:
Rows: 1
Columns: 1
Table-ID: callout-table (this MUST match the name applied in the CSS code above!!)
Size table manually, width: x pixels (set the width you want in pixels)
The most important setting here is the ID, which you MUST set to "overview-table" (for the lightbulb version) to match the ID referenced in the CSS code you inserted in step 1. It is also advisable to set a fixed width in pixels and have only one line and one row, for a single-cell table.
Step 4: When you insert the icon for the image in the corner you must also add an ID in the Picture ID: field and this ID must match the ID from the CSS code above, i.e. "callout-icon" or "callout-icon-flag" depending on the settings you want to use for that particular icon.
That is basically it. If you're not sure have a look at the originals in the source code in the Help & Manual help project. Here too, it's a good idea to save a ready-to-use toggle as a snippet so that you can insert it quickly.
Time-saving tip: Save objects as snippets for reuse
When you create formatted objects like this that you want to use frequently it saves a lot of time to save them as snippets so that you can use them again quickly. You can do this with the entire toggle, including both the heading and the table for the toggle content:
Create a dummy object that is set up exactly as you want to use it and select it in the editor, taking care to select everything that you want to reuse.
Select File > Save Snippet in the Project > Manage Topics tab and save the snippet in your project folder with a descriptive name.
To use the snippet, click in the place where you want to insert a new toggle, select the Snippet tool in Write > Insert Object and the options "From File" and "Copy & paste into text". Then select the snippet and click OK.