Cover

Implement an A4 portrait cover page.

Important: By default, the cover page layout is not affected by the DITA @outputclass attributes. For more information, see Orientation Size Module.

Overview

Resource location: @import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/cover_responsive.css");
@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/cover_generic.html");
Figure 1. Gray Cover Page
gray pdf cover page
Figure 2. Color Cover Page
color pdf cover page

Common Customizations

You customize the templates by pasting the following code snippets at the bottom of the CSS tab or into the Cover page HTML tab.

Add a custom logo
Replace the following underlined code with a custom logo. For more information, see Graphics Implementation.
<h1 class="cover-page-container">
    <div class="cover-page-content">
        <div class="title-text">{map.title}</div>
            <div class="bottom-stripe">
                <div class="logo-container">
                    <div class="logo">
                        <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_generic_200px_500px.png"/>
                    </div>
                </div>
            </div>  
        </div>
    </div>
</h1>
custom cover page logo

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

Center the logo
pdf cover centered logo
/* Center cover logo */
.logo-container {
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}
Style the cover page title text
custom cover text
/* Custom cover page title text. */
.title-text {
    color: cyan;
    font-style: normal;
    font-weight: bold;
    size: 70px;
    line-height: 80px;
    letter-spacing: 0.08em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Change the cover page primary background color
custom cover background color
/* Custom cover page background. */
.cover-page-container {
    background-color: darkorange;
}
Change the cover page secondary background color
custom cover bottom stripe
/* Custom cover page stripe background. */
.bottom-stripe {
    background-color: skyblue;
}
Add a border to the cover page
custom cover border left
.cover-page-container,
.bottom-stripe {
    border-left: 50px solid teal;
}
Change the cover page layout
Examine the template code and apply required modifications.

Add topic metadata to the cover page

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.

cover page topic metadata

DITA - Topic metadata example

<prolog>
        <copyright type="primary">
            <copyryear year=""/>
            <copyrholder>My Company</copyrholder>
        </copyright>
        <metadata>
            <prodinfo>
                <prodname/>
                <vrmlist>
                    <vrm modification="" release="" version="1.0.0"/>
                </vrmlist>
            </prodinfo>
        </metadata>
</prolog>
cover page topic metadata source
Important: We recommend adding metadata only to the first topic in the map.
Figure 3. Multiple versions.

If you add the same metadata elements to multiple topics in a single map, multiple metadata values will be added to the cover page.

cover page topic metadata multiple versions

Cover Page HTML

The entire cover page HTML code needs to be commented-out except for a single empty <div/> element.

<!-- <h1 class="cover-page-container">
    <div class="cover-page-content">
        <div class="title-text">{map.title}</div>
            <div class="bottom-stripe">
                <div class="logo-container">
                    <div class="logo">
                        <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
                    </div>
                </div>
            </div>  
    </div>
</h1> -->
<div/>

XSLT

In the XSLT tab, add the code under the <xsl:import> tag(s).

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

<!-- Add this code -->
    <!-- Enables you to develop cover pages in the XSLT tab -->
    <xsl:template match="*[contains(@class, ' map/map ')]" mode="chapterBody">
        <body>
            <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/>
            <xsl:if test="@outputclass">
                <xsl:attribute name="class" select="@outputclass"/>
            </xsl:if>
            <xsl:apply-templates select="." mode="addAttributesToBody"/>
            <xsl:call-template name="setidaname"/>
            <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
            <xsl:call-template name="generateBreadcrumbs"/>
            <xsl:call-template name="gen-user-header"/>
            <xsl:call-template name="processHDR"/>
            <xsl:if test="$INDEXSHOW = 'yes'">
                <xsl:apply-templates select="/*/*[contains(@class, ' map/topicmeta ')]/*[contains(@class, ' topic/keywords ')]/*[contains(@class, ' topic/indexterm ')]"/>
            </xsl:if>
            <xsl:call-template name="gen-user-sidetoc"/>
            <xsl:call-template name="cover.page"/>
            <xsl:variable name="map" as="element()*">
                <xsl:apply-templates select="." mode="normalize-map"/>
            </xsl:variable>
            <xsl:apply-templates select="$map" mode="toc"/>
            <xsl:call-template name="gen-user-footer"/>
            <xsl:call-template name="processFTR"/>
            <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
            <xsl:apply-templates select="/normalized/*[contains(@class, ' topic/topic ')]" mode="child.topic"/>
        </body>
    </xsl:template>

    <!-- Enables you to generate a map title -->
    <xsl:template name="get.map.title">
        <xsl:choose>
            <xsl:when test="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]">
                <xsl:apply-templates select="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"/>
            </xsl:when>
            <xsl:when test="//*[contains(@class, ' map/map ')]/@title">
                <xsl:value-of select="//*[contains(@class, ' map/map ')]/@title"/> 
            </xsl:when>
            <xsl:when test="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]">
                <xsl:apply-templates select="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"/> 
            </xsl:when>
            <xsl:otherwise>
                <xsl:comment>No title specified</xsl:comment>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

    <!-- Enables you to override the HTML cover page -->
    <xsl:template name="cover.page">
        <h1 class="cover-page-container">
            <div class="cover-page-content">
            <div class="title-text"><xsl:call-template name="get.map.title"/>
                <div class="topic-meta"> <!-- DEFINE TOPIC METADATA ELEMENTS OR ATTRIBUTES HERE -->
                    <div class="meta-value">v<xsl:value-of select="//vrm/@version"/></div>
                    <div class="meta-value"><xsl:value-of select="//copyrholder"/></div>
                </div>
            </div>
                <div class="bottom-stripe">
                    <div class="logo-container">
                        <div class="logo">
                            <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
                        </div>
                    </div>
                </div>  
            </div>
        </h1>
    </xsl:template>

<!-- End of add this code -->
</xsl:stylesheet>

CSS

To style topic metadata on the cover page, you can add the following code at the end of the CSS tab.

/* Style the cover page title. */
  div.title-text > h1.topictitle1 {
    color: #fff;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    font-size: 80px;
    word-wrap: normal;
    letter-spacing: 0.025em;
}

/* Style topic metadata on the cover page */
div.meta-value:first-of-type {
    width: 65%;
    border-top: 2px solid white;
    margin-top: 15mm;
    padding-top: 8px;
}
div.topic-meta {
    font-size: 35%;
    font-weight: normal;
    line-height: 1.25em;
}

Add a back cover

Figure 4. Sample Back Cover
sample back cover

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.

Cover Page HTML

The entire cover page HTML code needs to be commented-out except for a single empty <div/> element.

<!-- <h1 class="cover-page-container">
    <div class="cover-page-content">
        <div class="title-text">{map.title}</div>
            <div class="bottom-stripe">
                <div class="logo-container">
                    <div class="logo">
                        <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
                    </div>
                </div>
            </div>  
    </div>
</h1> -->
<div/>

XSLT

In the XSLT tab, add the code under the <xsl:import> tag(s).

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>
<!-- Add this code -->
<xsl:template match="*[contains(@class, ' map/map ')]" mode="chapterBody">
    <body>
      <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/>
      <xsl:if test="@outputclass">
        <xsl:attribute name="class" select="@outputclass"/>
      </xsl:if>
      <xsl:apply-templates select="." mode="addAttributesToBody"/>
      <xsl:call-template name="setidaname"/>
      <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
      <xsl:call-template name="generateBreadcrumbs"/>
      <xsl:call-template name="gen-user-header"/>
      <xsl:call-template name="processHDR"/>
      <xsl:if test="$INDEXSHOW = 'yes'">
        <xsl:apply-templates select="/*/*[contains(@class, ' map/topicmeta ')]/*[contains(@class, ' topic/keywords ')]/*[contains(@class, ' topic/indexterm ')]"/>
      </xsl:if>

      <xsl:call-template name="gen-user-sidetoc"/>
      <xsl:call-template name="cover.page"/>
      <xsl:variable name="map" as="element()*">
        <xsl:apply-templates select="." mode="normalize-map"/>
      </xsl:variable>
      
      <xsl:apply-templates select="$map" mode="toc"/>
      <xsl:call-template name="gen-user-footer"/>
      <xsl:call-template name="processFTR"/>
      <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
      <xsl:apply-templates select="/normalized/*[contains(@class, ' topic/topic ')]" mode="child.topic"/>
      <xsl:call-template name="back.page"/>
    </body>
  </xsl:template>

    <!-- Generate cover page -->
    <xsl:template name="cover.page">
        <h1 class="cover-page-container">
            <div class="cover-page-content">
                <div class="title-text"><xsl:call-template name="get.map.title"/></div>
                    <div class="bottom-stripe">
                        <div class="logo-container">
                            <div class="logo">
                                <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
                            </div>
                        </div>
                    </div>  
            </div>
        </h1>
    </xsl:template>

   <!-- Add back page -->
   <xsl:template name="back.page">
        <!-- You can embed any HTML code you want -->
        <h1 class="cover-page-container back-cover-page-container">
            <div class="cover-page-content">
                <div class="title-text"/>
                    <div class="bottom-stripe">
                        <div class="logo-container">
                            <div class="logo">
                                <img src="https://jorsek.github.io/pdfgen.github.io/styles1.1/media/logo_placeholder_150px_350px.png"/>
                            </div>
                        </div>
                    </div>  
            </div>
        </h1>        
    </xsl:template>

   <!-- Generate map title -->
   <xsl:template name="get.map.title">
        <xsl:choose>
            <xsl:when test="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]">
                <xsl:apply-templates select="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"/>
            </xsl:when>
            <xsl:when test="//*[contains(@class, ' map/map ')]/@title">
                <xsl:value-of select="//*[contains(@class, ' map/map ')]/@title"/> 
            </xsl:when>
            <xsl:when test="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]">
                <xsl:apply-templates select="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"/> 
            </xsl:when>
            <xsl:otherwise>
                <xsl:comment>No title specified</xsl:comment>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

<!-- End of add this code -->


</xsl:stylesheet>

CSS

Add the back cover styling in the CSS tab.

/* Style the cover page title. */
  div.title-text > h1.topictitle1 {
    color: #fff;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    font-size: 80px;
    word-wrap: normal;
    letter-spacing: 0.025em;
}
/* Style the back cover */
.back-cover-page-container .logo-container {
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
}