Can i format the table of contents web app to look nice using html and css scripting?

Question

id like to make the output from my table of contents look like a series of buttons i have already designed and have used on other sites but the content on this page will likely change more frequently than i will be able to to manually update and make new buttons so is there a way to take the table of contents and make a button for each entry

Thank you

Answer 1

Yes and no. You can use CSS to make it look like buttons but you will have to use the HTML provided to you by SharePoint. Unlike many other web parts, the TOC web part does have unique classes added to the wrapping HTML so you can easily provide CSS that restyles the list into buttons.

For example:

.toc-layout-main > ul > li {
  background: #000;
  width: 10rem;
  padding: .5rem;
  border-radius: .25rem;
}

.toc-layout-main > ul > li a {
  color: #fff;
}

Results from adding the CSS code I included: