Format content according to topic templates - Cloud


When you publish a book, the topic template names are included in the output files. These names can be used to identify a topic to then use css to apply borders or shading to the topic content. For example, you may have topics based on the Reference template. You can include css definitions to add a black border and grey shading to the topic heading and content for all topics using this template.

As this is concerning topic content customization, the appropriate code should be added to the contentstyles.css in your theme folder.

To format content according to topic templates:

  1. Open the contentstyles.css file in your theme folder.

    If this is the first topic customization, to keep the file well organized add a topics section using comments in a similar way to the sections already in the file.

  2. On separate lines add: /*#region TOPICS */ and /*#endregion TOPICS */.
  3. Between these two section markers, add the definition:

    #content_container .reference {


    • #content_container is the container in which all topics are displayed.
    • .reference is the name of the topic template you want to select.
  4. Add the following properties to the definition:

    border: 1px solid var(--light-gray-color);

    box-sizing: border-box;

    box-shadow: 1px 1px 3px var(--light-gray-color);

    margin:20px 0;

    padding: 0px 15px 10px 15px;



    This adds a light-grey solid border with shadow on all sides, plus some margin and padding and a lighter grey background shading.

Example reference topic before:

Magellan - reference topic before

Example reference topic after:

Magellan - reference topic after