Customize TOC

[Alexandra Wayne]

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. 

[Volker Weinreich]

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.

[Marcel Kleinlütke]

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!

[Volker Weinreich]

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>
</ac:structured-macro>

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.

Greetings

Volker

[Marcel Kleinlütke]

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