Header and Footer

Add running headers and footers to the Table of Contents (TOC) and the document body.

Overview

Resource location: @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/styling/header_footer.css");
Figure 1. Header and footer in the TOC
table of content header and footer
Figure 2. Header and footer in the document body
doc body header and footer

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Generate a map title in the header
gray pdf table of content
JSON 
/* Generate a map title in the header. */
@page:left{
    @top-left{
        content: "{map.title}";
    }
}
@page:right{
    @top-left{
        content: "{map.title}";
    }
}
Generate a topic title in the header
Topic title in the header
JSON 
/* Generate a topic title in the header. */
article.topic h1.title.topictitle1 {
    string-set: chapter-title content() !important;
}

/* Override the imported {map.title} with topic titles */
@page:left {
    @top-left {
        font-size: 18px;
        color: #000;
        font-style: normal;
        font-weight: bold;
        text-transform: none;
        content: string(chapter-title) !important;
        letter-spacing: 0.025em;
        line-height: 1em;
    }
}

@page:right {
    @top-left {
        font-size: 18px;
        color: #000;
        font-style: normal;
        font-weight: bold;
        text-transform: none;
        content: string(chapter-title) !important;
        letter-spacing: 0.025em;
        line-height: 1em;
    }
}
Add a company name in the header
header and footer company name
JSON 
/* Add a company name in the header. */
@page:left{
    @top-right{
        content: "KRN Solutions";
    }
}
@page:right{
    @top-right{
        content: "KRN Solutions";
    }
}
Add copyrights to the TOC footer
footer copyrights
JSON 
/* Add copyrights in the TOC footer. */
@page toc:right{
    @bottom-left{
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
        }
}
@page toc:left{
    @bottom-left{
        content: "Copyright © 1993-2020 KRN Solutions Inc.";
        }
}
Start page numbering from the cover page
PYTHON 
/* Start page numbering from the cover page*/
.cover-page-container {
    counter-reset: page 1 pages;
}
Add a border to the header
JSON 
/* Add a border to the header. */
@page:left{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
@page:right{
    @top-left{
        border-bottom: 3px solid #6f6f6f;
    }
    @top-right{
        border-bottom: 3px solid #6f6f6f;
    }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the header color
JSON 
@page:left{
    @top-left{
        background-color: #6f6f6f;
        color: white;
    }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
@page:right{
    @top-left{
        background-color: #6f6f6f;
        color: white;    
        }
    @top-right{
        background-color: #6f6f6f;
        color: white;    
        }
}
article {
    margin-top: 15px;
}
nav > ul:first-child::before {
    margin-top: 25px;
}
Change the footer color
JSON 
@page:left{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;}}
@page:right{
    @bottom-left{
        background-color: coral;}
    @bottom-right{
        background-color: coral;
    }}
@page toc:left{
    @bottom-left{
        background-color: coral;
    }
    @bottom-right{
        background-color: coral;
    }}
@page toc:right{
    @bottom-left{
        background-color: coral;
        }
    @bottom-right{
        background-color: coral;
    }}