UPDATED: Full-featured topic template package

This is the place to share H&M templates and utilities with other users. Topic templates can be posted as text attachments (*.txt) or in the posting itself between

Code: Select all

 and 
tags. Print manual templates (*.mnl) are digital and can only be posted as attachments. Utilities and multiple files can be posted in ZIP archives. Please include plenty of comments so that users understand what you're doing! Registration is required to access this forum.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

UPDATED: Full-featured topic template package

Unread post by Tim Green »

Updated with version for Help & Manual 4

This package was originally created for Help & Manual 3. The template format has changed in Help & Manual 4 and the original version will not work properly there. You will now find two sets of files for this template below, one for Help & Manual 3 (HM3Version.zip) and one for Help & Manual 4 (HM4Version.zip).

Variant instructions for installing and using both versions are now included below.
------------------------------------------------------------------------------

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
  • Support for expandable/collapsable sections (a blue, underlined header that drops down the text it contains when the user clicks on it)
  • 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
How to use the template package:
  1. Download the appropriate version of the package for your version of Help & Manual (links below at the end of the tutorial).
  2. Help & Manual 3:
    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 topic template.)

    Help & Manual 4:
    Unpack all the files to an empty folder, which can be located anywhere you like. Then go to Project > Project Properties > Common Properties > Baggage Files and add all the .GIF graphics files and both of the .JS JavaScript files from the unpacked package to the Baggage Files list. These files are now part of your project and the originals on the disk can be deleted if you want.
  3. Help & Manual 3:
    Open your project (make a backup first!!) and go to Project > Project Properties > HTML Export Layout > Topic Pages.

    Help & Manual 4:
    Open your project (make a backup first!!) and go to Project > Project Properties > HTML Help > Topic Pages. (Topic Pages is also available in the Browser-based Help section -- it doesn't matter where you access it.)
  4. Help & Manual 3:
    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.)

    Help & Manual 4:
    Select "Let me edit HTML code directly" 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.)
  5. Both Versions:
    Delete the entire contents of the editing window, i.e. the entire current template (you have made a backup, haven't you?)
  6. 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.
  7. Click on Apply.
  8. Help & Manual 3 ONLY (Don't do this in H&M4!!):
    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:

    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
    
    Note: Leave out the [FILES] line if you already have one!

    If you are using the package for browser-based HTML output in H&M3 you must also manually copy all the files on the list above to your HTML output directory -- H&M3 will not do this for you automatically. Again, this is NOT necessary in H&M4 because you have added the files to the Baggage section. They will be included in your project automatically there.
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:

See the tutorial included in the ..\samples\DHTML-Examples\ folder in the Help & Manual program directory. The information you need is in the chapter on "Expanding and Collapsing Sections". The only difference is that you don't need to include the basic JavaScript with the expanding and collapsing functions in every topic because that is handled by the template in this package, which references dropdown.js for every topic page automatically.

More information:

Non-scrolling headers without JavaScript:
Forum member John Smith has produced a nifty set of CSS styles that produce non-scrolling headers without JavaScript. This may require a little more manual tweaking than the solution included here but it has two major advantages: 1) It works in browser-based HTML as well as HTML Help, and 2) No JavaScript, so it works even if your users have JS turned off:

http://helpman.it-authoring.com/viewtopic.php?t=1433

This method does have a disadvantage, however: Since the size of the header is absolute rather than dynamic it depends on the font sizes in the headers always staying the same. As soon as you add additional lines to a header in any topic or change the header font size it will no longer work properly. Also, it may create display problems for users who have changed their standard browser font sizes .

Non-scrolling headers:
Same tutorial as the drop-down text feature (see above)

Icons and mouseover buttons in headers:
http://helpman.it-authoring.com/viewtopic.php?t=12

Span tags for defining link styles:
http://helpman.it-authoring.com/viewtopic.php?t=7

Advanced text decoration for links:
http://helpman.it-authoring.com/viewtopic.php?t=918

Getting rid of whitespace around headers :
http://helpman.it-authoring.com/viewtopic.php?t=739

Non-scrolling sections within pages:
http://helpman.it-authoring.com/viewtopic.php?t=930

Alternative expandable sections (for advanced users only):
http://helpman.it-authoring.com/viewtopic.php?t=2145
You do not have the required permissions to view the files attached to this post.
Last edited by Tim Green on Thu Feb 16, 2006 7:55 am, edited 8 times in total.
hstumpf
Posts: 2
Joined: Mon Jul 05, 2004 5:44 pm

Full-featured topic template package

Unread post by hstumpf »

Tim,

Thanks for the quick and very informative response. I installed the updated template and it worked perfectly! The unwanted horizontal scroll bar is gone, and the margins all look good.

Thanks again. :)
Regards,

-Harry-
T. Abeln
Posts: 269
Joined: Wed Aug 28, 2002 2:02 pm
Location: Cologne, Germany

Unread post by T. Abeln »

Hi Tim,

I just tried to make the template package work for my browser-based output, and the non-scrolling header feature doesn't show up at all. When I browsed throgh the code in the template.txt, I couldn't find any reference to the "nonscroll.js" regarding browser-based output. Actually it looks like the code ONLY regards CHM output.

Am I blind? Misunderstood your post?

By the way: I really like the fact that you commented the code so properly. Very helpful - thanks!!

Regards.
Thorsten
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Thorsten,

The non-scrolling headers are deactivated in browser-based output because it's not possible to get them to work in the same way in all browsers. Sorry, I should have made this a little clearer. :?

The <IF_CHM> block activates the non-scrolling header for HTML Help only. The <IF_HTML> block activates the standard static header for browser-based help. The layout is the same, but the non-scrolling function is deactivated.

If you can come up with a script that works smoothly in all browsers you're very welcome to post it! The main problem is changing font sizes in the header. It's quite easy to create something using styles only, like this solution from John Smith:

http://helpman.it-authoring.com/viewtopic.php?t=1433

the problem is this creates a fixed-height header that stops working properly when you change the header font size. I think it also has problems on some browsers.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
bpiccone
Posts: 2
Joined: Tue Feb 14, 2006 8:50 pm
Location: Baltimore, MD USA

Unread post by bpiccone »

Thank you for this template. I love the mousover navigation buttons and the expandable/collapsable sections.

While testing the template on a sample set of documentation, I received the following errors during the compilte-to-HTML process. Not being much of an HTML person, I haven't been able to locate the source of the problem. Do you have any suggestions?
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Hi Bpiccone,
bpiccone wrote:While testing the template on a sample set of documentation, I received the following errors during the compilte-to-HTML process. Not being much of an HTML person, I haven't been able to locate the source of the problem. Do you have any suggestions?
The package was originally created for Help & Manual 3 and the template format has changed in H&M4. Thanks for reminding me of this -- I have updated the tutorial with two different versions and corresponding instructions for using the template in both versions of H&M. :)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
bpiccone
Posts: 2
Joined: Tue Feb 14, 2006 8:50 pm
Location: Baltimore, MD USA

Unread post by bpiccone »

Tim,

Thank you. I didn't have a single compilation error after following the revised instructions! :D

There is only one new feature after the fix. The text "IF_CHM>" displays at the top of the main page header. Might I impose on you for a little more magic?

Sincerely,
Ben Piccone.
Blue Sky Factory
Baltimore, Maryland USA
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Unread post by Tim Green »

Hi Ben,
bpiccone wrote:There is only one new feature after the fix. The text "IF_CHM>" displays at the top of the main page header.
Whoops! That was just a copying error. I've uploaded a corrected version now but the easiest way for you to correct this is as follows:

Open the template in Topic Pages for editing and locate the following piece of code:

Code: Select all

<!--These are the non-scrolling header styles for HTML Help -->  
IF_CHM><!-- NS header only works in HTML HELP-->
Now add a "<" character directly before the IF_CHM> on the second line, so that it looks like this:

Code: Select all

<!--These are the non-scrolling header styles for HTML Help -->  
<IF_CHM><!-- NS header only works in HTML HELP-->
That will fix it. 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
tinat
Posts: 223
Joined: Tue Aug 06, 2002 3:35 pm
Location: Auburn, New York
Contact:

Unread post by tinat »

Hi,
When I compile my browser based help now, I am getting this at the very bottom:

onload="highlight();">

Also, when I put the "<" to fix the CHM issue (as noted above), the Navigation link in my topic header changed from white to black. And the font is a different size also. If I remove the "<", the Navigation link goes back to the way it should. (However, I then have CHM> on my header. How can I fix this?

If you want, I can include the code I am using.
Thanks, Tina
tinat
Posts: 223
Joined: Tue Aug 06, 2002 3:35 pm
Location: Auburn, New York
Contact:

Unread post by tinat »

Never mind. I'm just a little slow.... Sorry!
Thanks, Tina
Post Reply