Common Customizations

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

Generate a map title in the header

/* 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

/* 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

/* 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;
    }}