...
| Redirect | ||||
|---|---|---|---|---|
|
With Custom style sheets it is possible to format the generated Table of Contents.
Table of Contents selectors
...
Description
...
CSS selector
...
Type
...
Variable (#)
...
Usage example
...
The table of content area
...
table-of-contents
...
class
...
none
...
.page.table-of-contents { color: red }
...
Define a hierarchy level
...
cex-toc-container-level-#
...
class
...
The hierarchical level of the container
...
.hierarchical .cex-toc-container-level-1 {
margin-left: 20px; }
...
In case of hierarchical export add a level
...
cex-toc-container
...
class
...
none
...
.hierarchical .cex-toc-container {
margin-left: 20px; }
...
All elements on the hierarchical level
...
cex-toc-item-level-#
...
class
...
The hierarchical level of the item
...
.cex-toc-item-level-2 { font-weight: bold; }
...
All elemements
...
cex-toc-item
...
class
...
none
...
.cex-toc-item { text-decoration: line-through; }
...
A page row in the Table of Contents
...
cex-toc-ref-to-page
...
class
...
none
...
.cex-toc-ref-to-page { text-decoration: line-through; }
...
A header row in the Table of Contents
...
cex-toc-ref-to-header
...
class
...
none
...
.cex-toc-ref-to-header { text-decoration: line-through; }
...
The original header level
...
cex-toc-original-header-#
...
class
...
The original header level
...
.cex-toc-original-header-1 { font-size: 16px; }
...
The header level in the printed Table of Contents
...
cex-toc-normalized-header-#
...
class
...
The generated header level after header optimization
...
.cex-toc-normalized-header-2{ font-size: 14px; }
...
The ID of each Table of Content rows
...
cex-toc-level-#-#-#
...
id
...
The generated numbering of the row
...
#cex-toc-level-1-2-3 { border: 1px solid; }
Content selectors related to Table of Contents
...
Description
...
CSS selector
...
Type
...
Variable
...
Usage example
...
Page level
...
page-title-lvl-#
...
class
...
The hierarchical level of the page.
...
.page-title-lvl-0 { color: red }
...
Headers level on the page
...
toc-header-#
...
class
...
The hierarchical level of the header.
...
.toc-header-0 { color: red }
...
The HTML syntax of Table of Context
| Code Block | ||
|---|---|---|
| ||
<div class='page table-of-contents hierarchical'>
<h1>Table of Contents</h1>
<div class="cex-toc-container cex-toc-container-level-1">
<div class="cex-toc-item cex-toc-item-level-1 cex-toc-ref-to-page" id="cex-toc-level-1">
<a class="cex-toc-counter" href="#Bookmark1">1. - </a>
<a class="cex-toc-text" href="#Bookmark1">Table of Contents sample page Home</a>
<a class="cex-toc-page-number" href="#Bookmark1"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-1">
<a class="cex-toc-counter" href="#Bookmark2">1.1. - </a>
<a class="cex-toc-text" href="#Bookmark2">Heading one</a>
<a class="cex-toc-page-number" href="#Bookmark2"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-1-1">
<a class="cex-toc-counter" href="#Bookmark3">1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark3">Heading two</a>
<a class="cex-toc-page-number" href="#Bookmark3"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3"
id="cex-toc-level-1-1-1-1">
<a class="cex-toc-counter" href="#Bookmark4">1.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark4">Heading three</a>
<a class="cex-toc-page-number" href="#Bookmark4"></a>
</div>
</div>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-2">
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-2">
<a class="cex-toc-counter" href="#Bookmark5">1.2. - </a>
<a class="cex-toc-text" href="#Bookmark5">First page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark5"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-1">
<a class="cex-toc-counter" href="#Bookmark6">1.2.1. - </a>
<a class="cex-toc-text" href="#Bookmark6">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark6"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-1-1">
<a class="cex-toc-counter" href="#Bookmark7">1.2.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark7">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark7"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-3" id="cex-toc-level-1-2-1-1-1">
<a class="cex-toc-counter" href="#Bookmark8">1.2.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark8">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark8"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-2">
<a class="cex-toc-counter" href="#Bookmark9">1.2.2. - </a>
<a class="cex-toc-text" href="#Bookmark9">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark9"></a>
</div>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-3">
<a class="cex-toc-counter" href="#Bookmark10">1.2.3. - </a>
<a class="cex-toc-text" href="#Bookmark10">Subpage</a>
<a class="cex-toc-page-number" href="#Bookmark10"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-3-1">
<a class="cex-toc-counter" href="#Bookmark11">1.2.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark11">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark11"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-2 cex-toc-normalized-header-2" id="cex-toc-level-1-2-3-1-1">
<a class="cex-toc-counter" href="#Bookmark12">1.2.3.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark12">Heading Two</a>
<a class="cex-toc-page-number" href="#Bookmark12"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-page" id="cex-toc-level-1-2-4">
<a class="cex-toc-counter" href="#Bookmark13">1.2.4. - </a>
<a class="cex-toc-text" href="#Bookmark13">Subpage with not ordered headers</a>
<a class="cex-toc-page-number" href="#Bookmark13"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-1">
<a class="cex-toc-counter" href="#Bookmark14">1.2.4.1. - </a>
<a class="cex-toc-text" href="#Bookmark14">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark14"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-4">
<div class="cex-toc-item cex-toc-item-level-5 cex-toc-ref-to-header cex-toc-original-header-3 cex-toc-normalized-header-2" id="cex-toc-level-1-2-4-1-1">
<a class="cex-toc-counter" href="#Bookmark15">1.2.4.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark15">Heading Three</a>
<a class="cex-toc-page-number" href="#Bookmark15"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-5">
<div class="cex-toc-item cex-toc-item-level-6 cex-toc-ref-to-header cex-toc-original-header-5 cex-toc-normalized-header-3" id="cex-toc-level-1-2-4-1-1-1">
<a class="cex-toc-counter" href="#Bookmark16">1.2.4.1.1.1. - </a>
<a class="cex-toc-text" href="#Bookmark16">Heading Five</a>
<a class="cex-toc-page-number" href="#Bookmark16"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-4 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-2-4-2">
<a class="cex-toc-counter" href="#Bookmark17">1.2.4.2. - </a>
<a class="cex-toc-text" href="#Bookmark17">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark17"></a>
</div>
</div>
</div>
<div class="cex-toc-item cex-toc-item-level-2 cex-toc-ref-to-page" id="cex-toc-level-1-3">
<a class="cex-toc-counter" href="#Bookmark18">1.3. - </a>
<a class="cex-toc-text" href="#Bookmark18">Second page in the space</a>
<a class="cex-toc-page-number" href="#Bookmark18"></a>
</div>
<div class="cex-toc-container cex-toc-container-level-3">
<div class="cex-toc-item cex-toc-item-level-3 cex-toc-ref-to-header cex-toc-original-header-1 cex-toc-normalized-header-1" id="cex-toc-level-1-3-1">
<a class="cex-toc-counter" href="#Bookmark19">1.3.1. - </a>
<a class="cex-toc-text" href="#Bookmark19">Heading One</a>
<a class="cex-toc-page-number" href="#Bookmark19"></a>
</div>
</div>
</div>
</div>
</div> |