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
/* 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
/* 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
/* 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
/* Start page numbering from the cover page*/
.cover-page-container {
    counter-reset: page 1 pages;
}
Add a border to the header
/* 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
@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
@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;
    }}