Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

How can I customize my table of contents to be bold, different colors, possibly have a box around them so the look like buttons? I currently have them along the top Flat with a pipe in between. 

1 answer

Hi @Alexandra Wayne,

I don't know, if you are still waiting for an answer. I hope so.

Within the TOC macro you can set a reference to a css class. So now you can customize the toc like you want (See Styling with CSS). I have no ready made CSS for you right now, because I don't no how exactly you want to have it. I am not an CSS expert too, but I have tried out for myself and it works fine.

Do I define a Style in the Space - Look and feel and adress the style within the makro?
How? do I just type the name given to the class?
If u have tried it out would it be easy to provide both parts - I can edit it afterwards just need an idea how to start!

Thank u so much!

Hi Marcel,

yes, you set stylesheets at the space level under Look and Feel > Stylesheet. When you name a class "myToc" there, you simply write "myToc" in CSS Class Name of the TOC-macro.

This is how it may for example look like in the storage format of the TOC-macro:

 <ac:structured-macro ac:name="toc" ac:schema-version="1">
<ac:parameter ac:name="maxLevel">4</ac:parameter>
<ac:parameter ac:name="style">none</ac:parameter>
<ac:parameter ac:name="class">myToc</ac:parameter>
<ac:parameter ac:name="printable">false</ac:parameter>

In the CSS you then define the appearance of the table of contents - for example

.mytoc {

font-size: 14px;
font-weight: normal;
line-height: 22px;
list-style-type: none;

Since a list is automatically created by the macro, you can then simply refer to the usual list elements via CSS. You should write your class name in front of the list elements, so that not all lists within the space are changed.
For example, if you want to display the third level of the table of contents with a smaller font, write:

.myToc ul ul li {
font-size: 12px;

I hope that answered your questions.



It does indeed. Thank you. I guess u do speak german, so: Dankeschön!!!

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

An update on Confluence Cloud customer feedback – June 2022

Hi everyone, We’re always looking at how to improve Confluence and customer feedback plays an important role in making sure we're investing in the areas that will bring the most value to the most c...

407 views 2 13
Read article

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you