CSS to add border/fill to table of contents

[hamishEd Administrator]

I'm trying to make my table of contents stand out a little more. Am I able to add a border and/or fill to the standard macro using the CSS Class Name option? Something like the ToC on this page would be great: https://confluence.atlassian.com/conf51/table-of-contents-macro-336169370.html

I don't really know how to use CSS and I know the above is using a specific theme, but I like the default theme and wouldn't mind just being able to make this tweak if possible. Would anyone be able to help?

[Stephen Deutsch · Accepted solution]

Hi Hamish,

Actually, I think it might be easier then you think to get something similar to what Atlassian has done. The only thing they did was to wrap the ToC macro in a Panel macro. I was able to do something similar to theirs with the following settings:

[hamishEd Administrator]

Hi Stephem

That's perfect, thank you! Really neat trick to know. I really appreciate the quick help :)

[Emil Vakhitov]

Wonderful!

[John Corwith]

This is a neat trick however note that the current panel macro creates a distinctively different panel. It has a light gray header bar and a white body (think a 1 x 2 table with a header.) To make this close to the panel shown above, use Background Color: #F7F7F7 Border Color: #E0E0E0 & Boarder Pixel Width: 2.

[hamishEd Administrator]

EDIT: Replied in wrong place.