Edit online

How to Change Numbering Styles for Ordered Lists

Ordered lists (<ol>) are usually numbered in XHTML output using numerals. If you want to change the numbering to alphabetical, follow these steps:
  1. Define a custom @outputclass value and set it as an attribute of the ordered list, as in the following example:
    <ol outputclass="number-alpha">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ol>
  2. Add the following code snippet in a custom CSS file:
    ol.number-alpha{
    list-style-type:lower-alpha;
}
  3. Reference the CSS file in a WebHelp Responsive transformation using an Oxygen Publishing Template or the args.css parameter.

Referencing the Custom CSS from a Publishing Template

  1. If you have not already created a Publishing Template, see How to Create a Publishing Template.
  2. Using the Project view, copy your custom CSS in a folder inside the publishing template root folder (for example, in the custom_footer_template/resources folder).
  3. Open the template descriptor file associated with your publishing template and add your custom CSS in the resources section.
    <publishing-template>
    ...
    <webhelp>
        ...                
        <resources>            
            ...          
            <css file="resources/MyCustom.css"/>
  4. Open the DITA Map WebHelp Responsive transformation scenario.
  5. Click the Choose Custom Publishing Template link and select your template.
  6. Click OK to save the changes to the transformation scenario.
  7. Run the transformation scenario.

Result: Your custom CSS will be applied as a final layer on top of any existing CSS rules and the output will reflect the changes you made.

Referencing the CSS Using the args.css Parameter

  1. Edit the DITA Map WebHelp Responsive transformation scenario and open the Parameters tab.
  2. Set the args.css parameter to the path of your custom CSS file.
  3. Set the args.copycss parameter to yes to automatically copy your custom CSS in the output folder when the transformation scenario is processed.
  4. Click OK to save the changes to the transformation scenario.
  5. Run the transformation scenario.

Result: Your custom CSS will be applied as a final layer on top of any existing CSS rules and the output will reflect the changes you made.