Header Footer Alternate

Add alternating 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_alternate.css");
Figure 1. Alternating header and footer in the TOC
alternating header and footer
Figure 2. Alternating header and footer in the document body
alternating header and footer doc body

Common Customizations

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

Generate a map title in the header
header alternate map title
JSON 
/* Generate a map title in the header. */
@page:left {
    @top-left {
        content: "{map.title}";
    }
}
@page:right {
    @top-right {
        content: "{map.title}";
    }
}
Add a company name in the header
header add company name
JSON 
/* Add a company name in the header. */
@page:left {
    @top-right {
        content: "KRN Solutions";
    }
}
@page:right {
    @top-left {
        content: "KRN Solutions";
    }
}
Add copyrights in the TOC footer
footer add copyrights
JSON 
/* Add copyrights in the TOC footer. */
@page toc:right {
    @bottom-right {
        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;
    }}