H&M3 Template Only:
This is an H&M3.x template -- it won't work in H&M4. The alternative expanding sections are also not needed in H&M4 -- the standard versions that you can find in the DHTML tutorial in the \Samples folder in your program directory now works fine in H&M4's Browser-based Help output.
This version of the template package includes a different script for expandable/collapsable sections that is compatible with more browsers. The old version based on Microsoft's DHTML code is fine if you are only outputting to HTML Help, as it is fully compatible with the Internet Explorer subset that is used in the HTML Help viewer. However, if you are outputting to browser-based HTML this version will provide better results across more browsers.
The original script the expandable sections feature is based on is by M.C. Matti (email@example.com / http://matti.net) and can be found here:
For more details see the Better Expandable Sections tutorial in the Tutorials & Guides section.
This little package includes a fully-commented topic template that provides the following features:
- Non-scrolling headers for HTML Help
- Navigation icons with mouseover effect in the topic headers
- Two versions of support for expandable/collapsable sections in topics -- the standard Microsoft DHTML version included in the original template package (see here) and a more advanced version that is compatible with more browsers
- Link styles with underlines only displayed on mouseover (hover attribute) and different colors for topic links (green), popup links (red) and web links (blue)
- No white border around the topic header
- Download the files.zip package (link below at the end of the tutorial).
- Unpack all the files except topic_template.txt to your project folder (same folder where your .hm3 project file is). (You can actually store topic_template.txt anywhere you want, you are just going to use it as a source for your template text.)
- Open your project (make a backup first!!) and go to Project > Project Properties > HTML Export Layout > Topic Pages.
- Select "Edit HTML template directly" in the Design Mode: field, then select the "Main" window type in the HTML Template for Window Type: field. (You must repeat the procedure for any other window types where you want to use these features.)
- Delete the entire contents of the editing window, i.e. the entire current template (you have made a backup, haven't you?)
- Open topic_template.txt in a text editor and copy and paste the entire contents into the template editing window for Topic Pages > Main in Help & Manual.
- Click on Apply.
- Now go to Project > Project Properties > HTML Help Export > Extended .HHP settings and copy the following text into the Additional settings for the HHP file: window to include all the additonal files we are using in the .CHM output file:
Note: Leave out the [FILES] line if you already have one!
Code: Select all
[FILES] ..\nonscroll.js ..\dropdown.js ..\button_main.gif ..\button_main_h.gif ..\button_prev.gif ..\button_prev_h.gif ..\button_prev_d.gif ..\button_next_h.gif ..\button_next.gif ..\button_next_d.gif ..\minus.gif ..\plus.gif
That is then basically it for the non-scrolling headers, link styles and navigation buttons. You can replace the buttons with your own versions of course, but then you also have to edit the template with the new button names.
Using the expandable/collapsable sections feature:
This template package includes both the standard Microsoft code for expandable sections, which is fine if you are only generating HTML Help, and a new, more advanced version that is compatible with more browsers.
For instructions on using the advanced version see the next message in this thread and the Better Expandable Sections tutorial in the Tutorials & Guides section.
See the DHTML Examples tutorial included with H&M in the ..\samples\DHTML-Examples\ folder in the Help & Manual program directory.
Icons and mouseover buttons in headers:
Span tags for defining link styles:
Advanced text decoration for links:
Getting rid of whitespace around headers:
Non-scrolling sections within pages: