Formatting Table of Contents
It is possible to format the generated Table of Contents with custom stylesheets. Read more about it here.
Description | CSS selector | Type | Variable (#) | 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 a 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 elements | 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; } |
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 } |
<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>
Last modified 5mo ago