Change list style type

Since the source of the topic in ClickHelp is HTML, the default look of nested ordered and unordered lists may be different from what you can see in applications like MS Word. 

The marker type of list elements is defined by the application but can be overridden with the project's CSS. Precisely speaking, the list-style-type CSS property.

By setting up the custom styles you can set different marker types for different list levels. Or you can create new CSS classes with specific values of the list-style-type property and apply them only to certain lists.

Let's review both cases.

Automatic marker type changing

The default CSS that is applied to all lists looks like this:

/* Nested ordered list styles */

ol ol
{
  list-style-type: lower-alpha;
}

ol ol ol
{
  list-style-type: lower-roman;
}

ol ol ol ol
{
  list-style-type: decimal;
}

ol ol ol ol ol
{
  list-style-type: lower-alpha;
}

ol ol ol ol ol ol
{
  list-style-type: lower-roman;
}

ol ol ol ol ol ol ol
{
  list-style-type: decimal;
}

ol ol ol ol ol ol ol ol
{
  list-style-type: lower-alpha;
}

ol ol ol ol ol ol ol ol ol
{
  list-style-type: lower-roman;
}

ol ol ol ol ol ol ol ol ol ol
{
  list-style-type: decimal;
}

/* Nested unordered list styles */

ul ul
{
  list-style-type: circle;
}

ul ul ul
{
  list-style-type: square;
}

ul ul ul ul
{
  list-style-type: disc;
}

ul ul ul ul ul
{
  list-style-type: circle;
}

ul ul ul ul ul ul
{
  list-style-type: square;
}

ul ul ul ul ul ul ul
{
  list-style-type: disc;
}

ul ul ul ul ul ul ul ul
{
  list-style-type: circle;
}

ul ul ul ul ul ul ul ul ul
{
  list-style-type: square;
}

ul ul ul ul ul ul ul ul ul ul
{
  list-style-type: disc;
}

And this is what ordered and unordered lists look like by default: 

If you want to change a marker type of a certain level, you can do so by changing the list-style-type property value of the corresponding selector to one of the many available values.

Change markers types for certain lists

If you don't want to change the default lists behavior and only want to use a specific styling for a single list, you can create a special CSS class and apply it to the desired list:

1. Add a new class to the Style.css:
   

   Copy Code CSS

   .roman-list { list-style-type: lower-roman; }

   
   This class, when applied to a list, will make it use lowercase roman numerals instead of current markers. 
2. In the editor, select the list you wish to apply this class to in the tag inspector. In this example, we're applying the class to the second-level list:
   
   
3. After selecting it, open its properties by clicking the properties button in the tag inspector:
   
   
4. Switch to the Style Settings tab, click into the CSS Class input field and select your newly created roman-list class.
   
5. Click OK.

You will immediately see that the list style type has changed.