Highlight the TOC selection - On Premises 6.4

Magellan

TOC highlighting Whats in this section highlighting

When selecting a topic in the Table of Contents or What`s in this section list the topic can be highlighted, for example, with a different color or outline.

To highlight the TOC and What`s in this section selection:

  1. Open the mainstyles.css file.
  2. Locate the definition:

    ul.jqtree-tree li.jqtree-selected > .jqtree-element > .jqtree-title {

    Where:

    • ul.jqtree-tree is the selector for the ul (unordered list) which makes up the TOC.
    • li.jqtree-selected is the selected list item in the TOC.
    • > .jqtree-element selects the children of the selected item.
    • > .jqtree-title selects the text of the selected item.
  3. Copy the complete definition to the themestyles.css in your theme folder.
  4. Add some highlighting by adding more properties, such as:

    Add a box with shadow around the selection:

    Add a color and weighting to the text of the selection:

    border-radius: 2px;

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

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

    color: red !important;

    font-weight: 600;

    font-size:15px;

  5. With the resulting definition being:

    /* text for selected item */

    ul.jqtree-tree li.jqtree-selected > .jqtree-element > .jqtree-title {

    border-radius: 2px;

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

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

    color: red !important;

    font-weight: 600;

    font-size:15px;

    }