Example PDF Templates

Adding a table of contents to the front of the document

A PDF template can be modified to display a table of contents at the beginning of the document.

Download Table of Contents template

table-of-contents <div>

In order to add the table of contents a <div> with an id of table-of-contents was added to the article-layout.html file. It displays the PDF template variable {{t_of_c}}.

table-of-contents &lt;div&gt;

Custom CSS

The following CSS is then added to the Custom CSS tab. The classes referenced in the CSS are output by the {{t_of_c}} template variable.

#table-of-contents {
  /* Name the page with this div so we can target header/footer and other props with @page */
  page: table-of-contents;
  
  /* So we don't get too close to the header/footer */
  padding-bottom: 8pt;
}

#table-of-contents .table-of-contents-title {
  /* The text for the <h1> tag displaying the t of c title */
  content: 'My Table of Contents';
}

#table-of-contents a {
  text-decoration: none;
  color: rgb(0,0,0);
}

#table-of-contents .step-tofc {
}

#table-of-contents .sub-step-tofc {
  margin-left: 50px;
}

#table-of-contents a::after {
  content: leader(".") target-counter(attr(href), page);
}

5 Comments

De Ribeiro Luc

Hello,

Can anybody help me with this? I'm lost with this explanation. I just want a simple table of content for the documents I create. Not starting to code in html or css, which I can't. ;-)

Cordialement, best regards, schéi Gréiss,

Luc De Ribeiro

Trevor DeVore

@Luc If you just want to install the example PDF template then click on the "Download Table of Contents template" link above. Then follow these instructions for importing a PDF template:

http://help.clarify-it.com/m/clarify/l/176353-importing-and-exporting-custom-pdf-templates

Adrian Bengtson

How do I add the header to the table of content page?

Also, the "Remove the header after page 1" trick does not work when a table of content is added.

Trevor DeVore

@Adrian: In the #table-of-contents CSS change:

page: table-of-contents;

to

page: content;

I just tried the CSS for removing the header after page 1 with the table of contents and it worked for me. I would confirm that you have the CSS entered correctly.

Adrian Bengtson

Yes, that worked, thanks!

Add your comment

E-Mail me when someone replies to this comment