Getting started

All the commands used in this chapter are found in scripts getting_started.sh (macOS, Linux) and getting_started.bat (Windows).

Generate a Web Help using the default "classic" layout:

docsrc/manual$ mkdir out/classic

docsrc/manual$ java -jar ../../lib/whc.jar \
    -toc toc.xml -index index.xml \
    out/classic *.html

• Execute "java -jar whc.jar" to invoke whc.
• The output directory, out/classic for the above example, must exist before invoking whc.
• File toc.xml contains the specification of the Table of Contents. File index.xml the specification of the “back of the book Index”. These files are typically automatically generated by tools embedding whc like XMLmind DITA Converter Manual and XMLmind Ebook Compiler Manual.

Generate a Web Help using the "simple" layout:

docsrc/manual$ mkdir out/simple

docsrc/manual$ java -jar ../../lib/whc.jar \
    -p layout simple \
    -toc toc.xml \
    out/simple *.html

The "simple" layout has no Index pane, so no need to use the -index command-line option.

Generate a Web Help using the "corporate" layout:

docsrc/manual$ mkdir out/simple

docsrc/manual$ java -jar ../../lib/whc.jar \
    -p layout corporate \
    -toc toc.xml -index index.xml \
    out/simple *.html

The "corporate" layout is similar to the "classic" layout but is more streamlined. Hence it's easier to give it corporate colors and fonts.

Tabs with labels, and not just icons

docsrc/manual$ mkdir out/classic_l

docsrc/manual$ java -jar ../../lib/whc.jar \
    -p --tab-icon-font-weight bold \
    -p --tab-icon-size 16px \
    -p --tab-icon-text-gap 4px \
    -toc toc.xml -index index.xml \
    out/classic_l *.html

It's "-p --tab-icon-font-weight bold" which is used by whc to detect that labels are to be added to the Contents, Index and Search tabs. Without this trick, there is no way to get labels next to the tab icons.

Other than this trick, the above command specifies a number of CSS variables in order to override some of those defined in various “theme” CSS template files such as NNtheme.classic.css.

Custom header and footer

docsrc/manual$ mkdir out/simple_h

docsrc/manual$ java -jar ../../lib/whc.jar \
    -p layout simple \
    -p user-css $scriptDir/wh_resources/xmlmind.css \
    -p user-header $scriptDir/wh_resources/header.html \
    -p user-footer $scriptDir/wh_resources/footer.html \
    -p user-resources $scriptDir/wh_resources/header_footer_files \
    -toc toc.xml \
    out/simple_h *.html

Custom header is found in wh_resources/header.html. Custom footer is found in wh_resources/footer.html. Parameters user-css and user-resources specify the resources needed to properly display header.html and footer.html.

Custom header/footer and custom colors

docsrc/manual$ mkdir out/classic_hc

docsrc/manual$ java -jar ../../lib/whc.jar \
    -p user-css $scriptDir/wh_resources/xmlmind.css \
    -p user-header $scriptDir/wh_resources/header.html \
    -p user-footer $scriptDir/wh_resources/footer.html \
    -p user-resources $scriptDir/wh_resources/header_footer_files \
    -p --navigation-background-color #F6FAFD \
    -p --field-background-color #F6FAFD \
    -p --panel-background-color #E3F5FF \
    -p --tab-selected-color #2176BB \
    -toc toc.xml -index index.xml \
    out/classic_hc *.html

Custom header and footer are specified as above. Custom colors by the means of CSS variables overriding some of those defined in various “theme” CSS template files such as NNtheme.css and NNtheme.classic.css.

Corporate fonts and colors

docsrc/manual$ mkdir out/corporate_green

docsrc/manual$ java -jar ../../lib/whc.jar \
  -p layout corporate \
  -p --corp-font-family "Palatino,Palatino Linotype,Book Antiqua,Georgia,serif" \
  -p --corp-background-color #edf7ee \
  -p --corp-color #202124 \
  -p --corp-accent-color #16803b \
  -toc toc.xml -index index.xml \
  out/classic_hc *.html

When using the corporate layout, four CSS variables, --corp-font-family, --corp-background-color, --corp-color, --corp-accent-color, are sufficient to generate Web Help which is consistent in terms of appearance with your “corporate theme”.

Specifying a few more CSS variables, --corp-font-size, --corp-heading-color, --corp-tabs-background-color, --corp-hover-background-color, --corp-hover-border-color, --corp-border-color, lets you customize more extensively the appearance of the corporate layout.

docsrc/manual$ java -jar ../../lib/whc.jar \
  -p layout corporate \
  -p --corp-font-family "Palatino,Palatino Linotype,Book Antiqua,Georgia,serif" \
  -p --corp-background-color #edf7ee \
  -p --corp-color #202124 \
  -p --corp-accent-color #16803b 
  -p --corp-font-size 15px \
  -p --corp-heading-color #16803b \
  -p --corp-tabs-background-color #c4e1c5 \
  -p --corp-hover-background-color #a8d3aa \
  -p --corp-hover-border-color #70b673 \
  -p --corp-border-color #9fb5a0 \
  -toc toc.xml -index index.xml \
  out/classic_hc *.html