50 lines
No EOL
8.4 KiB
HTML
50 lines
No EOL
8.4 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="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."><meta name="keywords" content="cascading style sheet, CSS, CSS, adding custom, HTML, HTML5, transformations, HTML5"><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 CSS</title></head><body id="custom-html-css"><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 class="active"><a href="../topics/html-customization-css.html">Adding custom CSS</a></li><li><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 CSS</h1>
|
||
|
||
|
||
<div class="body taskbody"><p class="shortdesc">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.</p>
|
||
<section class="section context"><div class="tasklabel"><h2 class="sectiontitle tasklabel">About this task</h2></div>
|
||
<p class="p">You can use this approach when you need to adjust the look and feel of the default output for a single project,
|
||
but don’t want to create a custom DITA-OT plug-in.</p>
|
||
<p class="p">You can version the CSS file along with the DITA source files in your project, so stylesheet changes can be
|
||
tracked along with modifications to topic content.</p>
|
||
<p class="p">You may also find this approach useful as you develop a custom stylesheet. Once the CSS rules stabilize, you
|
||
can bundle the CSS file in a custom DITA-OT plug-in to ensure consistent HTML output across
|
||
projects.</p></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">Create a custom CSS file and store it in your project along with your DITA source files.</span>
|
||
<div class="itemgroup stepxmp">
|
||
<div class="note note note_note"><span class="note__title">Note:</span> As a starting point, you can use the CSS file that is used for the DITA-OT documentation. This file is
|
||
available in the installation folder under <span class="ph filepath">docsrc/resources/dita-ot-doc.css</span>.</div>
|
||
</div>
|
||
</li><li class="li step stepexpand">
|
||
<span class="ph cmd">Set the <span class="keyword parmname">args.css</span> parameter to the name of your custom CSS file.</span>
|
||
<div class="itemgroup info">
|
||
<p class="p">The value of this parameter should be only the file name. You can specify the absolute path to the file
|
||
with <span class="keyword parmname">args.cssroot</span>.</p></div>
|
||
</li><li class="li step stepexpand">
|
||
<span class="ph cmd">Set the <span class="keyword parmname">args.copycss</span> parameter to <span class="keyword option">yes</span>.</span>
|
||
<div class="itemgroup info">
|
||
<p class="p">This setting ensures that your custom CSS file will be copied to the output directory.</p></div>
|
||
</li><li class="li step stepexpand">
|
||
<span class="ph cmd">Set <span class="keyword parmname">args.cssroot</span> to the absolute path of the folder that contains your custom CSS file.</span>
|
||
</li><li class="li step stepexpand"><strong>Optional: </strong>
|
||
<span class="ph cmd">Set <span class="keyword parmname">args.csspath</span> to specify the location of the CSS file in the output folder.</span>
|
||
<div class="itemgroup info">
|
||
<p class="p">If <span class="keyword parmname">args.csspath</span> is not set, the custom CSS file will be copied to the root level of
|
||
the output folder. To copy the CSS file to a subfolder named <span class="ph filepath">css</span>, set
|
||
<span class="keyword parmname">args.csspath</span> to <span class="keyword option">css</span>.</p></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-header.html" title="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.">Adding custom headers and footers</a></li><li class="linklist"><a class="link" href="../topics/html-customization-plugin-bundle-css.html" title="You can create a DITA-OT plug-in that provides a custom stylesheet with the typography and colors that define your corporate identity. Coworkers can install this plug-in to ensure consistent HTML output across projects without having to copy the stylesheet to each project.">Bundling CSS in a custom HTML plug-in</a></li></ul></div></nav></article></main></body></html> |