# DITA Best Practices : outputclass and Transformations

Created by Kelly Mankenberg, last modified on Jan 02, 2018

## What is outputclass?

When you need an element to appear differently in the output from other elements with the same semantics (elements and attributes), you can provide a value in the element's outputclass attribute.

Most block and phrase elements in DITA have an outputclass attribute. This attribute is used to provide output styling information, when necessary.

When published to an HTML-based output format, the value in the outputclass attribute of an element will be passed through to the CSS class attribute in the HTML code.

## How does InfoDev use outputclass?

The information Development team uses outputclass to modify the transformed appearance of specific elements that would otherwise be transformed generically. The purpose is to provide a specific outcome when no other element or attribute is available "out of the box" to meet the need.

The file that controls the code completion: D:\frameworks\dita\resources\cc_config.xml

## Custom outputclass within WKFS Transformations

The following is a list of the custom outputclass options available for use within WKFS InfoDev transformations.

outputclass Name | Element applied to | Result | Example (click image for larger view)
--- | --- | --- | ---
QA_ | div | Creates a container for the question and answer DIVs. This consists of a rounded blue border. |
QA_q | div | Formats the div as a question, including inserting the leading "Q:"
QA_a | div | Formats the div as an answer, including inserting the leading "A:"
title_sectiondiv | p | Transforms p element to section title |
btn_revision | ph | Transforms ph element to button |
bottomrulethin | section | Places a thin black horizontal rule below section |
bottomrulemedium | section | Places a medium black horizontal rule below section
bottomrulethick | section | Places a thick black horizontal rule below section
toprulethin | section | Places a thin black horizontal rule above section
toprulemedium | section | Places a medium black horizontal rule above section
toprulethick | section | Places a thick black horizontal rule above section
rntitle | stentry | Formats the text as a title (blue bold 40px) - for use with Changelogs |

## How to use outputclass

1. Select the element to which you wish to apply the custom transform.
2. Within the Attributes panel, double-click the Value cell of the outputclass Value entry to display the options available for the element selected.
   OR
   Within the Author editor pane, press Alt+Enter to display the Attributes popup form, then double-click the Value cell of the outputclass Value entry to display the options available for the element selected.
3. Select the desired option.

## Attachments:

attributes panel.png (image/png)
attributes panel.png (image/png)
image2017-5-18_8-39-9.png (image/png)
QnA.png (image/png)
image2017-5-18_8-54-5.png (image/png)
image2017-5-18_8-54-51.png (image/png)
image2017-5-18_8-57-16.png (image/png)