CSS in Confluence Cloud

[Will Baltazar]

I noticed that there's a CSS Class Name Field in the Table of Contents Macro in Confluence Cloud. From what I gather, I would need to upload a CSS Stylesheet somewhere. Where do I upload it? We don't have an html or style macro enabled in our instance. I'm pretty sure our admins don't want to activate it. Would those macros need to be turned on for this function to work?

[Farah Idayu Othman]

Hi @Will Baltazar ,

Welcome to Atlassian Community.

I am Farah, from ServiceRocket.

The CSS Class Name is used when you have custom Table of Content (TOC ) styles in your CSS style sheet, you can use this parameter to output the TOC inside <div> tags with the specified class attribute.

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).

You can define a Style in the Space within the macro where 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.

Regards,
Farah

[Barbara Szczesniak]

@Farah Idayu Othman The page you linked to and the instructions you give are not for the Cloud version, which I believe @Will Baltazar is using.

I believe there is something that your Site Admin can do to set a look and feel for your entire Confluence Cloud site, but I don't think there is a CSS (so the property in the TOC macro makes no sense). You might want to start with this page: https://support.atlassian.com/confluence-cloud/docs/administer-confluence-cloud-sites/