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:

image info

Configure table style by document source

Imagine a Fluid Topics tenant where content is uploaded through either a Word source or a DITA source. In this case, it is possible to configure one style for Word documents and another style for DITA documents.

Step 1

Create custom CSS classes (as shown in the preceding image) as follows:

image info

Step 2

Use the custom CSS classes to define the style to apply to each type of document as follows:

image info

Configure title style

    .depth-1{
        margin-top: 4em;
        &::after{
              content: "";
              display: block;
              height: 2px;
              width: 100%;
              margin: 1em 0;
              background-color: #ff7f00;
        }
    }
    h1 {
        font-style: normal;
        font-weight: 400;
        font-size: 2.1em;
        letter-spacing: .025em;
        color: #c39260;
    }

    h2 {
        font-size: 1.7em;
        border-left: 4px solid #ff7f00;
        padding-left: 20px;
        color: #632d10;
    }

Output:

image info

Configure admonitions

Imagine a Fluid Topics tenant where content is available in English and French. It is possible to configure one style for admonitions in English and another one for admonitions in French as follows:

French

/* Notes : images et background colors - FR*/

/*Note*/
.content-locale-fr .note.note::before{
    content: url('../../public/admonitions/note.svg') " Note :";
    display: block;
    font-weight: 900;
    background-repeat: no-repeat;
    background-size:contain;
}


.content-locale-fr .note.note{
    font-weight:400;
    background-color:rgba(95,180,170,0.1);
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-top:10px;
}

image info

English

/* Notes : images and background colors - EN*/
/*Note*/
.content-locale-en-US .note.note::before{
    content: url('../../public/admonitions/note.svg') " Note:";
    display: block;
    font-weight: 900;
    background-repeat: no-repeat;
    background-size:contain;
}



.content-locale-en-US .note.note{
    font-weight:400;
    background-color:rgba(95,180,170,0.1);
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-top:10px;
}



.content-locale-en-US .notetitle{
    display:none;
}

image info

Configure syntax highlighting

It is possible to add codeblock to documents uploaded to the Knowledge Hub.

Example: Add codeblock to a DITA document

The default class name pre codeblock is available for DITA content. It is possible to add syntax highlighting by copying the text in the highlight.js file (attached) and pasting it in the custom.js file.

For more details, see highlight.js?

Output:

image info

For further reading, see DITA: Code (inline and block and codeblock.cd