How To Customize Content with CSS - Fluid Topics

Business need

Fluid Topics is equipped with an editor that makes it possible to customize the look and feel of content uploaded to the Knowledge Hub.

This document proposes a collection of pre-configured templates that can prove helpful when getting started.

Overview of the solution

A basic understanding of CSS is a recommended prerequisite.

The educational website W3Schools provides the following free CSS tutorials: https://www.w3schools.com/css/default.asp

Procedure

When modifying CSS, the first step is to identify the CSS class as follows:

Right-click the zone to be modified.
Select the Inspect option in the context menu.

Using an incorrect CSS class name prevents modifications from being applied.

Templates

The following templates illustrate CSS modifications for tables, titles, admonitions and syntax highlighting.

Configure tables

Table 1

    .table thead th {
        padding: 10px 10px 6px;
        background-color: #f2f2f2;
        border: none;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
        border-bottom: 1px solid #979797;
        border-right: 1px solid #979797;
    }

Output:

image info

Table 2

    .table td, .table th {
        border: 1px solid #ddd;
        padding: 8px;
    }


    .table tr:nth-child(even){
        background-color: #f2f2f2;
    }


    .table tr:hover {
        background-color: #ddd;
    }


    .table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
    }

Output: