nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Jennifer Peterson

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!

Accepted answers

Steffen Heller

@Jennifer:

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.

All comments

CharlesH1

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.

{html}
&lt;script&gt;
jQuery(jQuery('.customtoc').find('ul').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('&lt;ol&gt;'+jQuery(this).html()+'&lt;/ol&gt;'))
});
jQuery('.customtoc ol').css({'list-style-type':'upper-roman'});
&lt;/script&gt;
{html}

Regards,

Charles

Steffen Heller

Did you check the {toc} macro description: https://confluence.atlassian.com/display/CONF34/Table+of+Contents+Macro

The way I read it is that you can choose different styles with <br>"style=[circle,square,disc,decimal,lower-roman]". 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.

Jennifer Peterson

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.

Steffen Heller

@Jennifer:

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

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.

Jennifer Peterson

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.