Apply custom style on TOC entries and topic content

You can apply custom styles to TOC entries, topicheads, or individual topics by using the outputclass attribute on supported map elements, such as <topicref> and <topichead>. To apply custom formatting to an entire topic, extend the style definition of the outputclass attribute in your CSS.

Style a topic referenced through <topicref>

You can apply an outputclass on a <topicref> element to style the TOC entry, the topic title, or the full topic content in the generated PDF.

For example, to identify a topic that requires review, add an outputclass attribute to the corresponding <topicref> element in your DITA map and define the associated styles in your CSS.

In the following example, the History of flights topic has been assigned an outputclass attribute with the value of new-topic.

{width="500"}

The new-topic class can be used to define styles for:

The following CSS definition changes the text color for the TOC entry and the topic title:

.new-topic {
  color:#CC5309
}

This definition controls the color of the text in the TOC and the topic’s title. The following PDF output shows the different color applied on the TOC entry:

{width="500"}

The topic’s title is also styled using the same color.

{width="500"}

If you want the TOC entry and the topic’s title to have different styles, then you can define them separately as shown below:

...
/*for styling TOC entry */
.new-topic {
  color:#CC3509
}

/* for styling topic's title */
.new-topic.title {
  color:#092ACC
}
...

To apply styles to the entire topic content, append the -content suffix to the class name. The following example adds a change bar to the topic content:

...
/* for styling the topic's content */
.new-topic-content {
  -ro-change-bar-color:#A609CC;
}
...

Using the above styling attributes, a change bar is added to the left of the History of flight topic, as shown below:

{width="500"}

Apply styles to topichead elements

You can use the outputclass attribute on a <topichead> element to apply different styles to the TOC entry and the heading generated for the topichead.

For example, if you define the following topichead in your DITA map:

<topichead navtitle="Getting Started" outputclass="new-topichead">
    ...
</topichead>

The new-topichead class is applied to the topichead entry in the TOC and to the heading generated for the topichead.

If you want to apply a different style to the heading, define a separate class for it, similar to how <topicref> supports separate styling for the TOC entry and the topic title:

...
/* Style for the topichead TOC entry */
.new-topichead {
  color: #CC5309;
}

/* Style for the topichead heading */
.new-topichead.title {
  color: #092ACC;
}...

If you want to style the content associated with the topichead, append the - content suffix to the class name:

.new-topichead-content {
    border-left: 2px solid #cccccc;
    padding-left: 8px;
}

Remove empty rows from the TOC

If you have not defined the title for any topics, empty rows appear in the TOC for such topics.

To remove the empty rows from the TOC and the mini TOC, add the following style in the layout.css:

.toc-body a:empty,
.chaptoc-body a:empty {
    display: none;
}