Custom theme in files & folders

Publish

Platform_KC
On Premises

The Web Help templates come with two default color schemes, but you can customize the look and feel by creating your own themes. If you decide to create your own custom theme, make sure you have a working knowledge of CSS, HTML, and JS.

Customize your theme using the Web Help files located in your publishing templates folder (Templates\Web Help).

To create a theme, start by copying the xtheme-gray.css file. Then modify the existing images, or create new images as needed, and change style formatting in the webhelp.css.

webhelp.css

Cascading Style Sheet that controls style formatting used in the Web Help "frame" layout and page content. 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 Folder

Contains the toolbar icons used in the published output, and logo files if used. By default the folder contains blue and gray versions of all of the toolbar and content pane icons.

To customize the theme: You can create new icons by modifying copies of the existing icons or creating your own.

EXTJS\Resources Folder

Contains the css files and the background images used to create the Web Help "frame" layout.

  • EXTJS\Resources\css

    Store any new theme css files that you create in the EXTJS\Resources\css folder. Update the head section in the index.htm file so it references your css file (if you are using a copy of the xtheme-gray.css file then ensure the comment code has been removed).

  • EXTJS\Resources\images

    To customize the theme, modify copies of the existing background images or create your own images. Images used by each section of the Web Help layout are stored in separate folders. Most of the files you need are stored in the "button", "panel", "tabs", and "toolbar" folders.

Important - Notes for css files and image naming conventions:

The image names are hard coded into various files used to build Web Help. If you change or create new background images, make sure you use the existing naming convention format from the css file.

For example, the "collapse all" icon in the default ext-all.css file is called collapse_all.gif, while the icon in the xtheme-gray.css file is called collapse_all_gray.gif.