Formatting Table of Contents

It is possible to format the generated Table of Contents with custom stylesheets. Read more about it here.

Table of Contents selectors

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; }

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 a Table of Contents

<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>