Question

The default TOC hhas funny down-arrows. They don't "do" anything and changing the bullet character has no effect on these. What's the best way to change these?

A co-worker also asks "I'd like to change the way the TOC displays. I'd like to change the colors, make the h1s bold and put a line break in front of the h1s or something. Is CSS the answer?"

Can anything be done?

(p.s. I've been using TREEBROWSER to affect the TOC. Other suggestions appreciated).

Environment

-- VickiBrown - 20 Sep 2007

Answer

If you answer a question - or have a question you asked answered by someone - please remember to edit the page and set the status to answered. The status is in a drop-down list below the edit box.

Yes, use CSS. TWiki writes out 2 CSS classes to be able to style the TOC: twikiToc and twikiTocTitle. Pattern skin uses these styles to create the indent and images:

.twikiToc {
   margin:1em 0;
   padding:.3em 0 .6em 0;
}
.twikiToc ul {
   list-style:none;
   padding:0 0 0 .5em;
   margin:0;
}
.twikiToc li {
   margin-left:1em;
   padding-left:1em;
   background-repeat:no-repeat;
   background-position:0 .5em;
}
.twikiToc li {
   background-image:url(bullet-toc.gif);
   background-repeat:no-repeat;
   background-position:0 .4em;
}
.twikiToc .twikiTocTitle {
   margin:0;
   padding:0;
   font-weight:bold;
}
.twikiToc .twikiTocTitle {
   color:#777;
}

This is a typical styled TOC:

If you want to get a 'normal' styling, 'overwrite' pattern skin's style with:

<style>
.twikiToc ul {
list-style-type:disc;
}
.twikiToc li {
background-image:none;
padding-left:0;
}
.twikiToc .twikiTocTitle {
   color:#000;
}
</style>

This then results in:

By the way, we call the TOC links "in-page links" - they point to a position on the same page. So it is not just a list, but also a menu.

-- ArthurClemens - 20 Sep 2007