ClickHelp Documentation

Handling Content Styles

Each MS Word document has 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:

Keep Precise Styles 

When this mode is selected, all styles are kept as close to the original ones as possible. The majority of inline styles will be moved to a CSS file. However, no cleanup will be performed for duplicated styles in the CSS file.

This option is not recommended if you plan to change the imported content inside ClickHelp in the future - the content styles handling will be complicated.

This option is useful when you need to move some content quickly to ClickHelp to go online without too much editing. And then you can take the time to import the content with better styles handling.

Optimize Styles 

When this mode is selected, inline styles are moved to a CSS file. Additionally, ClickHelp performs a number of 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 is preserved (like font size and color);
  • other optimizations and cleanup.

CSS classes are generated automatically for all unique combinations of essential style properties. For example, the same CSS class with an automatically generated name will be applied 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.

When using this mode, 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 a lot of different styles applied to your content, you can get a lot of automatically generated CSS classes which will be hard to maintain. For such situations, we recommend that you use the Do not import styles option.

Do Not Import Styles 

When this mode is selected, the styles of the imported content are completely removed. All style properties like font size and color, paragraph and line spacing, margins and paddings will be cleared. 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, and so on. This is a very important specifics. When you import your content into an existing project that already has styles, the new content will automatically use the existing styles that are defined on the element type level (tag selectors in CSS, rather than named classes).

This option is recommended when you have enough time for the content transfer and want to do thing 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.