Advanced formatting of nested lists and attributes

The WYSIWYG toolbar in the SDP CMS lets you indent list items to create nested lists. (When you put your cursor on a list item, the indent buttons become available. Otherwise they are greyed-out.) The nested items have the same symbol or number format as the 'parent' list.

If you want to choose the type of list identifier (symbol or number format) and build nested lists that combine ordered and unordered items, you can do this in the source code.

Working in the source code is for advanced CMS users.

Unordered lists

1. Format your list using the WYSIWYG toolbar and then click the Source button.
2. Choose your list item marker from the table below and copy and paste the code snippet to replace the first tag in your list.

Code example

How each unordered list type displays

Disc:

• Oranges
• Apples
• Bananas
• Grapes

Circle:

• Oranges
• Apples
• Bananas
• Grapes

Square:

• Oranges
• Apples
• Bananas
• Grapes

Dashes:

• Oranges
• Apples
• Bananas
• Grapes

Ordered lists

1. Format your list using the WYSIWYG toolbar and then click the Source button.
2. Choose your list item marker from the table below and copy and paste the code snippet to replace the first tag in your list.

The type attribute of the <ol> tag, defines the type of the list item marker:

Code example

How each ordered list type displays

Numbers:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Uppercase letters:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Lowercase letters:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Uppercase Roman numerals:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Lowercase Roman numerals:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Combination lists

You can mix ordered and unordered lists and choose the list item type.

You start and end the nested list within the main list.

Create your list. Select the indented lines and click the indent button. Now go into the Source code and paste in the code snippet to replace the first line of code in the section of the list where you want to change set the list identifier type.

Code example

Note the placement of the opening and closing tags within a 'parent' list.

How it displays

1. Apples
   • Pink lady
   • Fuji
   • Granny smith
2. Oranges
3. Bananas
   1. Lady finger
   2. Cavendish
   3. Plantain
4. Grapes
   1. Muscat
   2. Sultana
   3. Shiraz

Control list counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the 'start' attribute (eg <ol start="50">). This is useful when list numbering continues after a heading.

Code example

How it displays

50. Jessica
51. Richard
52. Marcella
53. Nadim