Create a custom Web Help theme

Publish

Platform_KC
On Premises

This topic describes, at a high-level, the steps for creating and customizing a theme. We recommend you look at the default and gray examples provided with the Web Help templates to see how the changes have been made to create the customized gray theme. Use the files for the custom gray theme as a reference point when you are creating your own custom theme.

To create a custom Web Help theme:

  1. Create a copy of the xtheme-gray.css in which to make your changes. Rename the file so it refers to your custom theme (for example, xtheme-custom.css).
  2. In the custom file, make changes to your styles. For example, if the background of a panel is light blue in “ext-all.css” you can change it to green by overwriting that style in “xtheme-custom.css" file.
  3. open the index.htm file and add the reference line for your custom css file under the reference to the ext-all.css. For example:

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-custom.css" />

    <link rel="stylesheet" type="text/css" href="stylesheet.css" />

    <link rel="stylesheet" type="text/css" href="webhelp.css" />

  4. Update the style formatting in your custom css file and the images and URL references.

    Styles:

    • Layout

      These are applied first from ext-all.css then xtheme-custom.css. The xtheme-custom.css contains the style formatting that you want to use instead of what’s in the ext-all.css file. For example, if the background of a panel is light blue in ext-all.css you can change it to green by overwriting that style in xtheme-custom.css.

      Note: Your css file can have any name you like - not necessarily xtheme-gray.css - as long as the href in the link tag of the index.htm file is correct.

    • Content styles

      Modify styles in the webhelp.css to suit the new theme. During publishing, the stylesheet.css file is created from Style object settings in Author-it. Use the section in the webhelp.css for overwriting the Author-it stylesheet.css styles to add the style formatting specific to your Web Help custom theme.

      Images and URL references:

      There are two "images" folders you'll use when changing a theme:

    • Extjs image folders in the Web Help template's extjs Resources folder: extjs\resources\images.

      This folder contains two subfolders:

      Default folder, which contains the “default” extjs default theme images (light blue).

      Gray folder which contains the gray theme images.

      Note: The Default folder contains all Extjs images while the Gray folder contains only the images required by the gray theme. If you create a custom folder for your images, add it as a child folder here. Then use the same method the xtheme-grey.css file uses to handle to overwrite the image URLs for the gray theme in the xtheme-custom.css file by updating the URL to your custom folder.

    • Web Help images folder in the Web Help template folder.

      This folder contains the main set of icons and background images used in Web Help.