Page Headers and Footers

Edit online

The headers and footers are part of the page definitions. To see how the default page layouts are defined, see: Default Page Definitions.

To change the font for all the headers and footers, in your customization CSS add a CSS rule similar to this:

@page {
    font-size: 12pt;
    font-family: "Arial";
}

If you want to change the settings only for a specific page type (for example, the table of contents), use the name of the page:

@page table-of-contents {
    font-size: 12pt;
    font-family: "Arial";
}

© 2017 - My Company Ltd
All rights reserved

For this, you need to specify a rule that matches all the right pages and adds that content in the bottom-center. In your customization CSS, add the following CSS rule:

@page :right{
    @bottom-center {
        content: "© 2017 - My Company Ltd \A All rights reserved";
        font-size: 0.5em;
        color: silver;
    }    
}

@page :right, table-of-contents:right {
  ...
}

A common use-case is to add a background image to one of the page corners.

@page :left {
    @bottom-left-corner{
        content: " ";
        background-image: url('https://www.oxygenxml.com/resellers/resources/OxygenXMLEditor_icon.svg');
        background-repeat:no-repeat;
        background-position:50% 50%;        
    }
}

Another use-case is to use one of the @top-left or @top-right page margin boxes. These boxes have an automatic layout and they can be very small if they have no content. If there is no text to be placed over the image, use a series of non-breaking spaces (\A0) to increase the box width as in the following example (alternatively, you can use the technique described in How to Decorate the Header by Using a Background Image on the Entire Page):

@page :left {
    @top-left{
        content: '\A0\A0\A0\A0\A0\A0\A0\A0\A0\A0';
        background-image: url('https://www.oxygenxml.com/resellers/resources/OxygenXMLEditor_icon.svg');
        background-repeat:no-repeat;
        background-position:50% 50%;
    }
}

If you want to precisely position artwork and the page margin boxes are not sufficient, it is possible to use a background image for the entire page.

This technique consists of creating an image (SVG is the best since it is a vector image) as wide as the page that would contain the logo and placing other decorations at the desired locations. This offers the best results and the position of the artwork does not depend on the page margin contents.

Example:

@page :left, chapter:left, chapter:first:left { 
 background-image: url('img/page_background_image_with_logos_and_artwork_for_left_page.svg');
 background-repeat: no-repeat;
 background-position: 50% 50%;
}

For a list of all the possible page names, see: Default Page Definitions.

The headers display information such as map title, part title, chapter title, and section title, ending in the page number.

content: string(maptitle) string(parttitle) string(chaptertitle) string(sectiontitle) " | " counter(page);

This might be too much if you have long titles. The solution is to override the default header content.

In your customization CSS, add the following CSS rule:

@page :left {
    @top-left {
        content: string(chaptertitle) " | " counter(page);
    }
}
@page :right{
    @top-right {
        content: string(chaptertitle) " | " counter(page);
    }
}

@page :left, table-of-contents:left, chapter:left{
  ...
}
@page :right, table-of-contents:right, chapter:right{
  ...
}

My Publication | Introduction | Getting Started 

There might be cases where you want to change this separator. You will need to recompose the header content using the above string sets. Suppose you want to use " - " as a separator. In your customization CSS, add the following CSS rule:

*[class ~= "topic/topic"][is-part] > *[class ~= "topic/title"] {
    string-set: parttitle " - " counter(part, upper-roman) " - " content(), chaptertitle  ""; /* Avoid propagating a past chapter title on a new part */
}
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"] {
    string-set: chaptertitle " - " counter(chapter) " - " content();
}

If you enabled the Deep Numbering - Built-in CSS, then use:

/* 
 * Alter the string sets that are shown in the header of the page.
 */
*[class ~= "topic/topic"][is-part] > *[class ~= "topic/title"] {
    string-set: parttitle " - " counter(part, upper-roman) " - " content(), chaptertitle  ""; /* Avoid propagating a past chapter title on a new part */
}
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/title"] {
    string-set: chaptertitle " - " counter(chapter) " - " content(), sectiontitle "";
}
*[class ~= "topic/topic"][is-chapter]:not([is-part]) > *[class ~= "topic/topic"] > *[class ~= "topic/title"] {
    string-set: sectiontitle " - " counter(chapter) "." counter(section1) " - " content();
}

To modify the styling of the default page headers, add the following CSS rule in your customization CSS:

@page :left {
    @top-left {
        color:navy;
        font-style:italic;
    }
    @top-right {
        color:red;
    }
}

If you intend to modify just the headers of the table of contents, use the table-of-contents page rule selector:

@page table-of-contents:left {
    @top-left {
        color:navy;
        font-style:italic;
    }
    @top-right {
        color:red;
    }
}