Page cover image

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

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>

Last updated

Was this helpful?