Header 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
/* Generate a map title in the header. */
@page:left{
    @top-left{
        content: "{map.title}";
    }
}
@page:right{
    @top-left{
        content: "{map.title}";
    }
}
Add a company name in the header
header and footer company name
/* 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
/* 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
/* 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;
    }}