How to get table of contents format to match numbered lists?

Hi, I'm using numbered lists in my Wiki, using the # notation in Wiki markup. I have Confluence 3.4.x I think. It gives me a structure using decimals, letters, and then roman numerals, such as

# 1
## a.
### i.

However, when I generate a table of contents using the {toc} macro, all I get is bullets and no numbering. If I select the paramater outline=true, I get decimal numbering, which doesn't match my body text numbering. How can I make these the same? Help! Thanks in advance!

4 answers

1 accepted

1 vote
Accepted answer


How a list's bullet points look like is defined with the CSS property "list-style-type". "decimal", "letter" etc. are some of its possible values.

Whatever you want to do with your different lists you have to check and customise what is defined

  • for unordered lists in general (all <ul>)
  • for ordered lists in general (all <ol>)
  • for different levels within the <ul> or <ol> list in specific
  • for specific CSS classes that redefine the appearance of lists (and others) within a certain area

I think that the main CSS for the screen version of the wiki page defines that different levels within an ordered list have different values (as you describe: decimals for 1st level, letters for 2nd level etc.).

When you use the {toc} macro it adds a new CSS class to the page with different settings (the value will be what you enter at "List Style", but it is the same value for different levels)

To match one of these settings to the other (either way around) you must adjust the underlying CSS accordingly.

Hi Jennifer,

I think the {toc} will only generate unordered lists ( <ul> ) for you, whereas you really need ordered lists ( <ol> ) to achieve roman numeral numbering.

One approach would be to let the toc macro do its thing as standard, but with the aid of some javascript (read jQuery) convert the <ul> elements to <ol>, then apply the numeric list-style you want, either upper-roman or lower-roman.

I tried this on my environment (Confluence 4.2) and it works nicely. I made use of the "CSS Class Name" option in the toc macro to set a custom class of "customtoc". There's no class definition for this - we're just using it to target the ul elements that will be generated by Confluence for the toc.

jQuery('.customtoc ol').css({'list-style-type':'upper-roman'});



Thank you Charles. The trouble is, I don't need just upper-roman or lower-roman style to make the toc match the body. The body uses a numbering scheme decimal, letter, lower roman, decimal, letter, lower roman, such as 5, 6, 7 then a, b,c then i, ii, iii, iv. I think I need to either get rid of that wacky default numbering and replace it with decimal, or make the toc match it somehow.

Did you check the {toc} macro description:

The way I read it is that you can choose different styles with
But a combination of styles is not possible with this method.

For PDF export you could define your own CSS and achieve a combination of styles with different settings like "ol li", "ol li li" and "ol li li li" for your #, ## and ###.

If you are talking about the wiki page itself I don't know how this could be done.

Thank you Steffan. That makes a lot of sense. Since I only have space admin privileges over my own Wiki page and cannot access the CSS, I will contact the Wiki administrator for help on this one.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Feb 06, 2019 in Confluence

Try out the new editing experience

Hi team, I’m Avinoam, a product manager on Confluence Cloud, and today I’m really excited to let the Community know that all customers can now try out the new editing experience and see some of the ...

1,118 views 59 8
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you