How to modify GhostDoc Help Documentation Themes or CSS styles

Applies to
  • GhostDoc Enterprise Edition
GhostDoc Enterprise allows creating new custom help documentation theme styles and tweak the layouts by modifying the existing themes to create your own branding.

The custom themes can be used to generate help documentation output using the GhostDoc Enterprise Edition.
Note: Custom themes cannot be ported to Pro or Community editions, you must use the Enterprise edition when generating help docs with the custom them.

This article will help you get started with the theme modification.

You will find theme files in the <Documents>\GhostDoc Enterprise for VSxxxx\Help Template\Theme\ folder - there are several *.theme files in there. The *.Frame.theme files are obsolete themes for compatibility with the older version of GhostDoc and these are to be retired eventually.
└───HelpTemplate
    ├───Colorizer
    ├───html
    ├───icons
    ├───Images
    ├───Scripts
    ├───Shared
    ├───Styles
    ├───Templates
    ├───Theme
    │   │   Classic.Frame.theme
    │   │   Classic.theme
    │   │   FlatGray.Frame.theme
    │   │   FlatGray.theme
    │   │   FlatMain.Frame.theme
    │   │   FlatMain.theme
    │   ├───Content
    │   └───transforms
    └───UserImages    
The three supported themes are this point are 
  • FlatMain
  • FlatGray
  • Classic
The themes are zip files with extension .theme. Make a copy of the .theme file of your choice and rename it to .zip - this will allow unzip it using the File Explorer. When you are done making your custom theme changes and ready to try it, zip the folders up, rename the file to {name}.theme, and copy it into the <Documents>\GhostDoc Enterprise for VSxxxx\Help Template\Theme\ folder.

Important: Choose a unique name for your custom theme for your theme to avoid it getting overridden when you update to a new version of GhostDoc.  

Style Changes

For simple style changes, edit the styles\lightweight.css file.
├───FlatCustom.theme
│   ├───icons
│   ├───images
│   ├───scripts
│   ├───styles
│   │       highlight.css
│   │       lightweight.css
│   │       lw-code.css
│   └───web

Changing Images and Icons

To make changes to the web help images, replace them in the theme's web folder.

Content Layout Changes

Content layout changes require editing the theme's XSLT files - please contact us for advice on which transformation is to be modified for the specific layout you require.

Deploying Custom Theme

When a theme selected in the Build Help Documentation dialog, the content of the selected .theme is deployed to corresponding folders within the <Documents>\GhostDoc Enterprise for VSxxxx\Help Template\. If you want a custom version of any of the files in Help Template\icons, Help Template\Images, or tweak a layout, you want to place your custom file in the corresponding theme file folder with the same filename you want to replace.

When you are done making your custom theme changes and ready to try it, zip the folders up, rename the file to {name}.theme, and copy it into the <Documents>\GhostDoc Enterprise for VSxxxx\Help Template\Theme\ folder

We are always here to answer any questions you may have as you are making the theme modifications.