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:
- Open the mainstyles.css file.
- 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.
- Copy the complete definition to the themestyles.css in your theme folder.
- 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;
- 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;
}