ClickHelp User Manual

Handling Content Styles

Each MS Word or HTML document can have a lot of styling inside. When importing this content into your ClickHelp portal, you may want those styles to remain or disappear. The importing function of ClickHelp supports three modes to handle the content styles. This topic will explain how those modes are different. Here are the style importing modes:

Optimize Style 

When this mode is selected, ClickHelp performs several optimizations for the styles and the content:

  • duplicated and unnecessary styles are deleted;
  • unnecessary HTML tags are removed (for example, list items are converted to proper <li> tags);
  • unnecessary styles produced by MS Word are removed (like margins and paddings), only essential formatting like font size and color is preserved;
  • other optimizations and cleanup.

When the Generate CSS classes checkbox is checked, inline styles are moved to a style file, and CSS classes are generated automatically for all unique combinations of essential style properties. So, for example, the system will apply the same CSS class with an automatically generated name to all parts of your content where the font is bold and red.

The CSS classes are either written to a new separate style file or appended to the end of an existing project's style file depending on the Import styles to option you select in the importing wizard. If you choose to write CSS classes to a new style file, later, if you ever decide to remove the imported styles, you can delete that CSS file without making any changes to your content.

When using this mode while the Generate CSS classes option is chosen, ClickHelp tries to keep as few inline styles as possible - this way, you have a single central place for all your styles defined in the CSS style file. This style importing mode is designed to produce a meaningful balance between keeping original styles and getting a clean markup that is easy to maintain.

However, if there are many different styles applied to your content, you can get a lot of automatically generated CSS classes that will be hard to maintain. For such situations, we recommend that you use the Do not import styles option.

Keep Precise Style 

When this mode is selected, all styles are kept as close to the original ones as possible.

The Generate CSS classes option is also available for this mode. If this option is chosen, the system will move most inline styles to a CSS file. However, ClickHelp will perform no cleanup for duplicated styles in the CSS file.

This mode is not recommended if you plan to change the imported content inside ClickHelp in the future - the content styles handling will be complicated. However, this mode is useful when you need to quickly move some content to ClickHelp to go online without too much editing. Then, you can take some time to import the content with better styles handling.

Do Not Import Style 

This mode gives you better control over the content styling. When this mode is selected, the styles of the imported content are completely removed. The system will clear all style properties like font size and color, paragraph and line spacing, margins, and paddings. No CSS classes are created, no inline styles are preserved.

At the same time, this mode preserves the element types: paragraphs, tables, headings, ordered lists, bulleted lists, links, etc. Thus, when you import your content into an existing project with styles, the new content will automatically use the existing styles defined on the element type level (tag selectors in CSS, rather than named classes). When you import your document into a new project, you can create a new stylesheet for this imported project and define the styles as you need.

This option is recommended when you have enough time for the content transfer and want to do things right and just one time. The clean markup you get with this mode will be easy to maintain and re-style. You can import the content to an existing project created from a ClickHelp template, and the styles of the majority of content elements will match the project template automatically.