Archive for the ‘Technical Tips’ Category

How to Upgrade to Reverb 2.0

Posted on: July 17th, 2018 No Comments
Have you ever tried to upgrade from PDF, WWH5 or Reverb 1.0 to a more advanced user-friendly output? We know it might seem difficult for a multitude of reasons. Perhaps you have inherited a project and you are not sure where to start or maybe you have several customizations in your output that make upgrading seem impossible.
With the release of ePublisher 2018.1, many ePubilsher customers have quickly and easily upgraded to Reverb 2.0. By utilizing the information in this article, this post will help get you started on the path to a Reverb 2.0 HTML5 advanced document set.

Here are a few reasons  why it is a good idea to upgrade to Reverb 2.0

  • Improved Customer Satisfaction
  • Increased Product Value
  • Measured Customer Engagement

Reverb 2.0 was designed to help you, the Content Creator, get the most relevant information to the customer in the least amount of time while maintaining an intuitive feel to your document sets. If you are looking to increase the value documentation brings to your organization Reverb 2.0 is a big step in that direction.

Process for upgrading

Find the Right Reverb 2.0 Skin

To view the Reverb 2.0 skins, we recommend adding a target to your existing ePublisher Designer project. This is so you can see what your source documents look like in the new skin and identify which customizations are going to automatically transfer over and which ones will need to be manually transferred. You always have the option of creating a new Designer project to see what the default output will look like.

How to add a target

  1. Click on the Project Tab in the menu bar and select Manage Targets
  2. In the Manage Targets window, you will select Add to create a new target
  3. Pick a target name and enter it in the Target Name box
  4. In Format Type, click on the drop-down arrow and select WebWorks Reverb 2.0
  5. Click OK
  6. Verify that the new target name appears in the Manage Targets window.
  7. Click Close

Once the new target has been added, it will now appear in your active target window. To view the new format simply select the target and generate all. Feel free to experiment with each new target, once you find the right Reverb 2.0 skin you can delete the other targets.

Choosing the Right Customizations

Once you have selected a skin the next step is to choose the right customizations. It is a simple process:

  1. Compare customizations from the old target
  2. Pick which new features to customize in Reverb 2.0
  3. Regenerate your output.

When comparing customizations (for more about ePublisher customizations click here) we recommend starting with the Style Designer. Any customizations in the Properties or Options tab will be automatically carried over to Reverb 2.0. Only review bolded items on the Target Properties or Target Options tab because they are not automatically carried over because they are Target specific.

After you have reviewed the old customizations you can add new ones. All new features available in this area will be listed in the Properties and Options tab. If you see a feature you would like to customize only for the selected target, look for the feature listed in the Target Properties or Target Options and make the changes.

Once you’re finished working in the Style Designer compare customization in the Target Settings window.

Hint: create an excel sheet with the categories in Target Settings that have been customized.

If a category carries over to Reverb 2.0, the name will be the same in the Target Settings window. For example, Company Information is the same category name in the Target Settings of WebWorks Help, Reverb 1.0 and Reverb 2.0. 

With the excel spreadsheet created you can compare target settings in Reverb 2.0 and determine which settings should be transferred.  After transferring the target settings you can scroll through the categories and determine which new features to customize. After all the customizations have been made, generate the new target. If the output meets all the requirements, we would recommend moving to the section “Putting on the Final Touches” If not, you will need to compare the Advanced tab customizations.

We recommended you have the person who created the Advanced tab customizations compare them. If that person is not available, you can create a support ticket to get help with the transfer. If you would like to learn more about the Advanced tab customizations there are several options available to you. We have ePublisher 201 training that covers Advance tab customization in detail. We also have Study Hall in which you could bring in a project and have someone help you determine the best way to customize a project. The optimal path is to take ePublisher 201 training for a solid overall understanding of the Advanced tab features and then Study Hall or a support ticket for one-offs.

Putting on the final touches

The final step of the process is to put on the final touches to your Reverb 2.0 output. Reverb 2.0 was developed with Sass technology to make it easier to customize colors, logo placement, and icons.

To change the color, logo placement or icon of your Reverb 2.0 output, navigate to the proper file under the Advanced tab (to learn more about Advance tab customizations click here.) Once you have selected either target or format customizations navigate to the Sass folder and make the necessary customizations in the correct file.

_colors.scss is the file to change the color scheme of your Reverb 2.0 output. This file is written so you can design a nice output with as few as three colors. You just enter the hex color code in the proper location as indicated in the picture below.

_sizes.scss is the file where you can control the dimensions of sections within the Reverb 2.0 layout. Sections include areas like menu, toolbar, and toolbar logo. The file is well noted and easy to navigate. Just find the right section and make the necessary changes.

These are just a few examples of the Sass system we are using to help you customize Reverb 2.0. For a full list of the Sass files and their descriptions, you can go here.

We at WebWorks have designed our newest output with your customers in mind. Reverb 2.0 has new and improved features to help you guide your customers to the information they need. We’ve made upgrading easy for you by decreasing the amount of time needed to do so and by helping make sure you hold on to the customizations you’ve added. When making the move to Reverb 2.0 feel free to reach out if you have any questions.

Screen Capture Programs

Posted on: August 15th, 2008

At a recent Open House, a discussion about good tools for capturing computer screens came up and I recalled that I had actually done quite a bit of research and experimentation with these types of tools. I also had put together a short write-up on my company’s internal wiki about the topic. Now I realize that others might find this information useful, so I have made it available on our main wiki site.

In a nutshell, here were my findings.

Best in Class for:

Static Screen Capture

    TechSmith’s: Snag It

Dynamic Screen Capture (category 1)

    Blue Berry’s: FlashBack

    Category 1: focuses on routine training and recording tasks where there are minimum requirements for modifying the resulting output

Dynamic Screen Capture (category 2)

    TechSmith’s: Camtasia

    Category 2: focuses on special applications requiring post editing, scaling, and the remixing of audio and video

Light-weight Static and Dynamic Screen Capture

    From the TechSmith folks: Jing

Adding Intuitive Icons to Your HTML Hyperlinks

Posted on: January 2nd, 2008

The following image is a recent screen capture of our website front page. Notice that there are icons placed after all the text hyperlinks.

Today’s blog entry will discuss a fairly straight forward CSS method for adding this behavior to any web content, including legacy files.


For our website, we wanted our text hyperlinks to be more obvious to our readers. In addition, we didn’t want to require any significant re-work of the exsisting content. So after studying how other popular websites were using this technique, we were able to modify a single CSS file and get the changes across our entire website, including our blog, online manuals, and technotes.

Additional requirements were:

  • () Identify to the reader external links that are not on or
  • () Identify to the reader links that jump to a different topic somewhere on
  • () Identify to the reader links that nest within a given topic, but are on a different page.
  • (plain) Identify to the reader links that stay on the same HTML page.
  • Make sure existing navigation links such as menus are not affected.
  • Provide a simple mechanism for overriding the icon behavior using the “class” attribute.
  • Be able to deploy it immediately without modifying any of the website.
  • Make sure it works as designed for both Mozilla 1.x and IE 7 class browsers.
  • Make sure that fallback behavior for non-supported browsers is functional.

Keys to Making it Work

  • Use a CSS attribute selector such as: “a[href]” to handle the default case.
  • Use a CSS attribute selector such as: “a[href^="http://"]” to determine type of link destination, by matching a beginning set of characters.
  • Set a background image with a right position and a padding-right value to create the trailing icon.
  • Use the correct order for each CSS rule so that the proper properties get set. For example: place the most general selectors first and then append other rules for additional exceptions based on pattern matching.
  • If necessary, prefix the selectors with ancestor element types to restrict their use to just the content areas of the website.

Coding It

Sample CSS code
  /* links to nested areas (drill down) */
  background: transparent url("/common/img/page.gif") no-repeat scroll right center;
  padding-right: 13px;

  /* links with in the same file */
  background: transparent none no-repeat 0 0;
  padding-right: 0px;

  /* links to external websites */
  background: transparent url("/common/img/www.gif") no-repeat scroll right center;
  padding-right: 13px;

  /* links to same website */
a[href^="/"], /* implicit */
a[href^="../"], /* out of current area, but still implicit */
a[href^=""] /* explicit */
  background: transparent url("/common/img/jump.gif") no-repeat scroll right center;
  padding-right: 13px;

  /* links that should not have a button (must remove it) */
  background: transparent none no-repeat 0 0;
  padding-right: 0px;
Limiting Behavior to Content Areas Only

Very likely you will want to limit this behavior to only the actual content parts of each HTML page, which will require a more complex CSS rule. Usually this can be easily accomplished using one or more ancestor prefixes for each CSS rule. Here is an example of the first CSS rule with an ancestor prefix in the selector.

  /* links to nested areas (drill down) */
div.content p a[href]
  background: transparent url("/common/img/page.gif") no-repeat scroll right center;
  padding-right: 13px;

See our wiki at: for more details.

Evaluating ePublisher Express instead of Pro

Posted on: December 18th, 2007

Today, I would like to briefly explain a change in the process for evaluating ePublisher that began with the 9.3 release.
The change was to have users download and install the component called: ePublisher Express instead of ePublisher Pro. The motivation being to more gradually introduce new users to the powerful design capabilities built into ePublisher by starting with easiest to configure component first, and then progressing to the Pro component once it is determined that users are ready to create their own Stationery for doing production work.

So how do I use Express without my own Stationery?

Try out one of the example stationeries located at:

~My DocumentsePublisher Stationery

To do this, follow these steps:

  1. Download and install ePublisher Express
  2. Navigate to the folder:
    My DocumentsePublisher Stationery

    and unzip the example files. This will create 3 example stationeries, each in a subfolder.

  3. Launch Express and create a new project, using any one of the example stationery files.
  4. Add your own documentation files to the project and generate all. For more information, see the tutorial here.

So then what?

First of all, note that this is a “one size shoe fits all” stationery, which has been configured to loosely work with many different types of documents and source files. However, it is not intended for production work and at a minimum will require some styling work before it will match your own requirements.
Next, experiment with creating projects using Express and your own documentation files. Take a look at the results for different output formats. Then determine the following:

  1. What format(s) are right for your needs?
    • WebWorks Help 5.0
    • Dynamic HTML
    • JavaHelp
    • PDF
  2. What behavior does your output require:
    • Topic splitting
    • Drop down text
    • Pop up windows
    • Context sensitive linking
    • Client-side search
    • Integrated PDF
  3. What style changes are required?
    • Page styling
    • Graphic styling
    • Paragraph styling
    • Table styling

Using this information, you are now ready to create your own Stationery using the ePublisher Pro component. This component works similar to Express accept that it allows you to perform a Save As Stationery operation, which creates your own Stationery for use with Express and AutoMap.

Note: Now you only have one more decision. Does your team require a completely hands-off process that integrates with your select VC/CM system?