How do I modify Themes or CSS styles?
Question asked by Karla Griffin - July 24 at 11:27 AM
Answered
On the SubMain Editions Comparison page you mention the following feature; however, I cannot find any instructions on how to do this: Create own themes for help documentation Modify existing themes or create your own help documentation theme Are there instructions anywhere? Thanks.

1 Reply

Reply to Thread
0
Serge B. Replied
Employee Post Marked As Answer
Hi Karla,

The tutorial is on our list and I was trying to see if I can push it up the list. We should have it published shortly and I'm including instructions to get you started. 

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 new version of GhostDoc.  

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

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

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

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

I'm always here to answer any questions you may have as you are modifying the theme.

Thanks!
Serge Baranovsky
SubMain Software
(800) 936-2134

Reply to Thread