How to Create a NetHelp Theme with a Button that Opens a PDF

If you single-source and create both NetHelp (browser-based Help) and a manual, you have probably wondered if there was a way to make it easy for your customers to open that PDF directly from NetHelp. This has two advantages: It allows your customers to access both versions from a single location, plus, it makes the printing of multiple topics (or all topics) quick and easy.

You can do this by adding a PDF button to your NetHelp Theme. I’ve done just that in the Doc-To-Help NetHelp. You can see it (and try it out) here: Doc-To-Help 2013 NetHelp.

To create your own “Open PDF” button, all you need to do is make a small change to your NetHelp Theme. Doc-To-Help’s visual Theme Designer makes this easy.

It only takes 3 steps —

  1. Create a theme
  2. Add a PDF button
  3. Customize the button

Let’s break it down.

Create a Theme

To create a new NetHelp Theme:

  1. Click the Theme button to open the Theme Designer. (If the Theme Designer doesn’t open, make sure you have chosen a NetHelp Target from the Select Target drop-down.)
  2. Click the Add New Theme button in the Theme Designer.
  3. Choose a Theme from the drop-down. (The default themes included with Doc-To-Help are Tabs and Accordion. Use one of those, or use a custom Theme you’ve already created. Since you are creating a new Theme, your original is safe.) Then enter the name for your new theme and click OK.

Create a Theme

Now that you have your new Theme, let’s add the PDF button.

Add a PDF button

The Theme Designer is interactive, so when you choose any area on the left, it will be highlighted in yellow, and the fields you need to edit will automatically appear on the right.

To create a new button, click in the button toolbar area to expose the fields you need to edit.

fields

You’ll notice that all of the current buttons are listed on the right. To add your button, click the “wrench” on the right. In the Edit toolbar buttons dialog box, click Add new button…

add button

and give it a name …

OpenPDF

Now it will appear in the list of buttons (it has a star for an icon by default). You can use the up/down buttons to move the button.

newButton

Use the “up” key to move the new button before the “Created with Doc-To-Help” button. Then click the wrench at the top so we can tell the button what we want it to do.

buttonprops

Customize the Button

Each button has 4 fields you can change. Here is what each one does:

  • Label — This text will be the tooltip for the button. If the Show Label check box is also selected, this same text will appear on the button itself.
  • Icon  — As you noticed, the default button icon is a star; we can change that with this field.
  • Show Label  — If checked, the Label text will appear on the button.
  • Click  — This tells the button what action to take when clicked.

Fieldsofbutton

Now let’s customize these fields.

We’ll do the easiest ones first — click in the Label field and enter “Open User Guide PDF”. We will not select the Show label check box because we don’t want that text on the button.

Now we’ll change the icon. Click the star and in the Choose icon dialog box, choose Standalone custom icon files and Custom icon set #2 (or any of the others, you can create up to 20 custom icon sets).

icon

Then click the Default state button and navigate to the icon you want to use. Doc-To-Help has a library of icons stored here:

\\Program Files (or Program Files (x86)\ComponentOne\DocToHelp\
Node\node_modules\connect\lib\public\icons

Navigate there and choose page_white_acrobat.png.

acrobat

Each state of the icon will automatically use that icon, unless you specify otherwise.

iconcomplete

Now we are ready to specify the Click field.

my PDF

There are two options …

  • If you want to call a PDF that is already posted on the web, use the script below (replace the green text, of course):
window.open('http://www.componentone.com/newimages/products/documentation/Doc-To-Help_User_Guide_2013.pdf', '_blank').focus()
  • If you want to call a PDF that is not posted on a website, you can drop the PDF in your NetHelp Target folder and use script below. You will also need to create a window in Doc-To-Help named mywindow so that the PDF opens in a new window. Creating a new window will be explained below. [Please note, when you rebuild NetHelp, all files are deleted from the Target folder, so you will have to replace the PDF in that folder if you do a rebuild.]
javascript:{var wnd =window.open('Doc-To-Help_User_Guide_2013.pdf','mywindow','  ');}

To create a custom Window, in Doc-To-Help, go to the Project tab and click the Windows button. Add a new window named mywindow. (You can name the window anything, just make sure to adjust the javascript accordingly.)

create window

Build and Try it Out

Now click the Build button and test out your Theme.

NetHelp completed

That’s it! There are many other uses for this button too — including opening a Getting Start Guide or Quick Reference.

For More Information

There are a many more customizations you can make to NetHelp, please see this post for a list of resources, which includes several blog posts, videos, and more: How to Customize NetHelp.

Also check out this free hands-on workshop: Doc-To-Help Summer School: Branding Your Web-Based Outputs.

A special thanks to Doreen Marson for inspiring this post.

This entry was posted in Doc-To-Help and tagged , , , on by .

About Nicky Bleiel

I am the Lead Information Developer for Doc-To-Help and a Doc-To-Help trainer. I have 19 years of experience in technical communication; writing and designing information for software products in the documentation, media, industrial automation, simulation, and pharmaceutical industries. I am the President of the Society for Technical Communication and have presented talks at the STC Summit, WritersUA, tcworld, CIDM (Content Management Strategies/DITA North America), and LavaCon on many topics, including embedded help, tools and technologies, user assistance design, single sourcing, wikis, social media, agile, and convergence technical communication. I have been published in STC's Intercom, Tieline, STC conference proceedings, tcworld magazine, TechCom Manager Newsletter, and the WritersUA and the Content Wrangler websites. Additionally, I teach Technical Writing at the Community College of Allegheny County.

Leave a Reply