66 lines
No EOL
7.8 KiB
HTML
66 lines
No EOL
7.8 KiB
HTML
<!DOCTYPE html
|
|
SYSTEM "about:legacy-compat">
|
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta name="copyright" content="(C) Copyright 2020"><meta name="generator" content="DITA-OT"><meta name="description" content="You add a custom header to include a publication title, company logo, or other common branding elements in HTML output. A custom footer can also be added with copyright information, legal boilerplate, or other fine print."><meta name="keywords" content=", header, footer, , div, HTML header, HTML footer, role, HTML5, headers, footers, CSS, adding custom, HTML5, CSS"><link rel="stylesheet" type="text/css" href="../css/commonltr.css"><link rel="stylesheet" type="text/css" href="../css/dita-ot-doc.css"><title>Adding custom headers and footers</title></head><body id="custom-html-header"><header role="banner"><div class="header">
|
|
<p>DITA Open Toolkit</p>
|
|
<hr>
|
|
</div></header><nav role="toc"><ul><li><a href="../index.html">DITA Open Toolkit 3.6</a></li><li><a href="../release-notes/index.html">Release Notes</a></li><li><a href="../topics/installing-client.html">Installing DITA-OT</a></li><li><a href="../topics/building-output.html">Building output</a></li><li><a href="../topics/input-formats.html">Authoring formats</a></li><li><a href="../topics/output-formats.html">Output formats</a></li><li><a href="../parameters/index.html">Parameters</a></li><li><a href="../topics/html-customization.html">Customizing HTML</a><ul><li><a href="../topics/html-customization-parameters.html">Setting HTML parameters</a><ul><li><a href="../topics/html-customization-navigation.html">Adding navigation</a></li><li><a href="../topics/html-customization-css.html">Adding custom CSS</a></li><li class="active"><a href="../topics/html-customization-header.html">Headers and footers</a></li><li><a href="../parameters/generate-copy-outer.html">Handling content outside the map directory</a></li></ul></li><li><a href="../topics/html-customization-properties-file.html">Using a properties file</a></li></ul></li><li><a href="../topics/pdf-customization.html">Customizing PDF</a></li><li><a href="../topics/adding-plugins.html">Adding plug-ins</a></li><li><a href="../topics/custom-plugins.html">Creating plug-ins</a></li><li><a href="../topics/troubleshooting-overview.html">Troubleshooting</a></li><li><a href="../reference/index.html">Reference</a></li><li><a href="../topics/dita-and-dita-ot-resources.html">Resources</a></li></ul></nav><main role="main"><article role="article" aria-labelledby="ariaid-title1">
|
|
<h1 class="title topictitle1" id="ariaid-title1">Adding custom headers and footers</h1>
|
|
|
|
|
|
|
|
<div class="body taskbody"><p class="shortdesc">You add a custom header to include a publication title, company logo, or other common branding elements in
|
|
HTML output. A custom footer can also be added with copyright information, legal boilerplate, or other fine
|
|
print.</p>
|
|
<section class="section context"><div class="tasklabel"><h2 class="sectiontitle tasklabel">About this task</h2></div>
|
|
<p class="p">In HTML5 output, the contents of the header file will be wrapped in an HTML5 <code class="keyword markupname xmlelement"><header></code>
|
|
element with the <code class="keyword markupname xmlatt">@role</code> attribute set to <span class="keyword option">banner</span>. The footer file contents are
|
|
wrapped in an HTML5 <code class="keyword markupname xmlelement"><footer></code> element with the <code class="keyword markupname xmlatt">@role</code> attribute set to
|
|
<span class="keyword option">contentinfo</span>.</p>
|
|
<p class="p">For example, the DITA-OT documentation includes a simple header banner with the publication title and a
|
|
horizontal rule to separate the header from the generated topic content: </p>
|
|
<div class="p"><pre class="pre codeblock language-xml normalize-space show-line-numbers show-whitespace"><code><div class="header">
|
|
<p>DITA Open Toolkit</p>
|
|
<hr/>
|
|
</div></code></pre>
|
|
</div>
|
|
<div class="note note note_note"><span class="note__title">Note:</span> Header and footer files should be specified using absolute paths and must contain valid XML. A common
|
|
practice is to place all content into a <code class="keyword markupname xmlelement"><div></code> element.</div>
|
|
</section>
|
|
<section><div class="tasklabel"><h2 class="sectiontitle tasklabel">Procedure</h2></div><ol class="ol steps"><li class="li step stepexpand">
|
|
<span class="ph cmd">Set <span class="keyword parmname">args.hdr</span> to include an XML file as a running header that appears above the page
|
|
content.</span>
|
|
<div class="itemgroup info"> </div>
|
|
</li><li class="li step stepexpand">
|
|
<span class="ph cmd">Set <span class="keyword parmname">args.ftr</span> to include an XML file as a running footer that appears below the page
|
|
content.</span>
|
|
</li><li class="li step stepexpand"><strong>Optional: </strong>
|
|
<span class="ph cmd">Add custom CSS rules to style headers and/or footers.</span>
|
|
<div class="itemgroup info">
|
|
<p class="p">For example, the DITA-OT documentation stylesheet includes the following header rules: </p>
|
|
<div class="p"><pre class="pre codeblock language-css normalize-space show-line-numbers show-whitespace"><code>.header {
|
|
font-size: 18pt;
|
|
margin: 0;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.header p {
|
|
color: #1d365d;
|
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
}
|
|
|
|
.header hr {
|
|
border: 0;
|
|
border-bottom: 1px solid #eee;
|
|
height: 0;
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</li></ol></section>
|
|
<section class="section result"><div class="tasklabel"><h2 class="sectiontitle tasklabel">Results</h2></div>
|
|
<div class="note tip note_tip"><span class="note__title">Tip:</span> For an example of HTML output generated using this method, see the HTML5 version of the DITA-OT
|
|
documentation included in the installation folder under <span class="ph filepath">doc/index.html</span>.</div>
|
|
</section>
|
|
</div>
|
|
<nav role="navigation" class="related-links"><div class="familylinks"><div class="parentlink"><strong>Parent topic:</strong> <a class="link" href="../topics/html-customization-parameters.html" title="For simple branded HTML pages, you can adjust the look and feel of the default output to match your company style by setting parameters to include custom CSS, header branding, or table-of-contents navigation in topics. (These changes do not require a custom plug-in.)">Setting parameters for custom HTML</a></div></div><div class="linklist relconcepts"><strong>Related concepts</strong><br><ul class="linklist"><li class="linklist"><a class="link" href="../parameters/generate-copy-outer.html" title="By default, DITA-OT assumes content is located in or beneath the directory containing the DITA map file. The generate.copy.outer parameter can be used to adjust how output is generated for content that is located outside the map directory.">Handling content outside the map directory</a></li></ul></div><div class="linklist reltasks"><strong>Related tasks</strong><br><ul class="linklist"><li class="linklist"><a class="link" href="../topics/html-customization-navigation.html" title="In HTML5 output, you can set a parameter to include table-of-contents navigation in the nav element of each page. The navigation can be rendered in a sidebar or menu via CSS.">Adding navigation to topics</a></li><li class="linklist"><a class="link" href="../topics/html-customization-css.html" title="To modify the appearance of the default HTML output that DITA Open Toolkit generates, you can reference a custom Cascading Style Sheet (CSS) file with the typography, colors, and other presentation aspects that define your corporate identity.">Adding custom CSS</a></li></ul></div></nav></article></main></body></html> |