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:
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: