Online Help | Desktop App

Customizing KB Article styles

Updated in 2022.1

This article describes how to customize the appearance, such as the font, color, size, etc., of Knowledge Base (KB) articles via Cascading Style Sheets (CSS).

Alloy Navigator displays KB articles in several modules, and every module has its own KB article stylesheet. To customize styles for a target module, go to the corresponding section in Settings:

  • Desktop App: General > CSS Styles >Knowledge Base Article > Desktop App

  • Web App: General > CSS Styles >Knowledge Base Article > Web App

  • Self Service Portal: General > CSS Styles >Knowledge Base Article > Self Service Portal

  • Alloy mobile apps: General > CSS Styles >Knowledge Base Article > Mobile Apps

INFO: For additional information about CSS, see, for example, CSS Reference at https://www.w3schools.com/cssref/default.asp.

To customize the current style:

  1. Customize CSS style definitions as you need. Make sure not to delete or modify existing CSS class names and selectors.

  2. Click Save on the Standard toolbar.

IMPORTANT: When customizing styles for web or mobile applications, make sure that you precede each CSS style definition with the special parent selector #kbarticle. The parent selector guarantees that your custom style definitions apply only to the user content, not the entire web page. For details, see Customizing style sheets for web and mobile apps.

To save the current styleshteet to a .css file:

  1. Click Save To File. The Save Stylesheet to window opens.

  2. Browse for the location to save the file to, then enter the file name and click Save.

To import the stylesheet from an external .css file:

  1. Click Load From File. The Load Stylesheet from window opens.

  2. Browse for the .css file and click Open.

  3. Click Save on the Standard toolbar.

TIP: When you import styles from an external file, you replace the current style definitions with the external ones. You may want to export your current stylesheet for backup purposes before importing the external stylesheet.

Related Information:

Knowledge Base

Customizing style sheets for web and mobile apps