Content styles - Fluid Topics - Latest

Fluid Topics Configuration and Administration Guide

Category
Reference Guides
Audience
public
Version
Latest

By selecting the Content styles tab in the Portal section of the Administration menu, the following options are available:

  1. Selecting Download downloads the content styles configuration as a content_styles_configuration_${tenantName}.json file.
  2. Selecting Upload uploads a previously downloaded content styles file.

To perform other actions, ADMIN and PORTAL_ADMIN users can choose from the following tabs:

  1. Topic Styles: selecting this tab displays a CSS editor where users can customize the content style of topics in the Reader page (class="topic").
  2. Title Styles: selecting this tab displays a CSS editor where users can customize the title styles in the Reader page (class="title").
  3. Background Images: selecting this tab displays the following sections:

    • A section where users can add one or more background images to display in the Reader page (class="background-image"). It is possible for users to use custom CSS classes to choose which image to display based on metadata.
    • A section with a CSS editor where users can customize the style of the background by referencing the LESS variable assigned to an image uploaded in the previous section (for example, @image1).
  4. Custom CSS Classes: selecting this tab displays a table where users can assign CSS classes to content based on its metadata. Users can then define the styles for these classes in the Topic Styles tab, enabling metadata-based content styling.

  • A screencast about configuring a background image at the map level is available.
  • It is also possible to configure a background image at the topic level.
  • It is possible to use font files stored in the Asset library.
  • It is not possible to use CSS variables defined with global scope (for example, :root { --main-bg-color: brown; };) inside the Content styles menu. Use LESS variables instead.
  • It is not possible to use @import inside the Content styles menu. To import stylesheets, add @import rules in the Custom LESS menu.
  • If using HEX color codes, it is necessary to enter them without quotation marks, for example: @example_of_element_name: #ffc107.