Bullet points in Table of Contents in a panel

Hello, I am using this ToC panel and it works quite well.

However there are no bullet points in front of each headline. They would be very helpful especially in long lists with line breaks. If I insert a ToC on a normal page, there are the bullet points. Does anyone know how I can fix this in the panel? Thanks!

i found a solution, but i’m really new to xwiki, so it might not be optimal :

  • lets say the panel you created was called “Table Of Content”, then in your page > page adminsitration > look & feel > panels, you added it as Panels.TableOfContent i think
  • Now, in the html of your page i suppose the panel is a <div> element with class PanelsTableOfContent (you can check it by looking at the code with the web inspector)
  • so we can modify the css of this element by adding a stylesheet object
  • first ensure you are in advanced mode : user profile > preferences > user type > advanced (instead of simple)
  • now on your page, the edit button gives you the option of Objects editing, select that
  • create a new object of class XWiki.StyleSheetExtension
  • add this content (or something similar) :
.PanelsTableOfContent ul { list-style-type: revert; }
/* I'm not sure how 'revert' works, otherwise you can manually specify the style for nested levels :
.PanelsTableOfContent ul { list-style-type: square; }
.PanelsTableOfContent ul ul { list-style-type: disc; }
.PanelsTableOfContent ul ul ul { list-style-type: circle; }
*/

/* extra : this is to make the table of content sticky when the page is scrolled */
.PanelsTableOfContent {
  position: sticky;
  top: 0px;
}
  • make sure to select Use this extension : on this page, and Content Type : css
  • save, and it’s done :slight_smile:

Hi,
this solution didn’t work for me. A collegue of mine found another way to solve it including other panels like last visited or created:
Global Administration > Look & Feel > Presentation > HTTP Meta Info:

<style>
.panel ul {
    list-style-type: disc !important;
}

.wikitoc ul {
    list-style-type: circle !important;
}
</style>