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:

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

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

Tab Description
Topic Styles Displays a CSS editor where users can customize the content style of topics in the Reader page (class="topic").
Title Styles Displays a CSS editor where users can customize the title styles in the Reader page (class="title").
Background Images Displays sections where users can add one or more background images to display in the Reader page (class="background-image"). Users can use custom CSS classes to choose which image to display based on metadata. Also includes a CSS editor to customize the style of the background by referencing the LESS variable assigned to an image (for example, @image1).
Custom CSS Classes 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.