TOC+ è uno dei due plugin che utilizzo per creare le Table of Contents dei miei articoli (l’altro è Easy Table of Contents )

I TOC sono estremamemte utili per i blog dove uso i long content (e qui pui leggere perchè devi mettere un TOC sul tuo sito  quali plugin utilizzare).

TOC+ ha un problema: i template grafici predefiniti sono davvero brutti…. ha anche un vantaggio: ti permette di utilizzare i css per stilizzarlo al meglio

Come modificare il Table of contents.

Se segui le istruzioni avrai un Toc come questo.

Ovviamente i colori e le forme sono personalizzabili come credi

1. Vai su Impostazioni > Toc+
2. Dalla sezione/ tab main options > presentation setta i colori.
   Puoi mettere quelli che vuoi, per averli come l’immagine sopra:
   • Background: #eaecf1
   • Border: #eaecf1
   • Title: #ffffff
   • Links: #005b7f
   • Links (hover): #55007f
   • Links (visited): #005b7f
3. Se vuoi dargli un po’ più di stile, come angoli arrotondati, bold agli h2, etc etc aggiungi il codice CSS (nota: i css si inseriscono da Personalizza > CSS aggiuntivo )

#toc_container p.toc_title {
display: inline-block;
width: 100%;
padding: 5px 50px;
margin: 0 0 10px 0;
text-align: center;
font-weight: 700;
background-color: rgb(237, 174, 40);
color: #fff;
line-height: 2em;
border-radius: 3px;
}

#toc_container {
padding: 0 0 10px 0;
margin: 0 0 20px 0;
border-radius: 3px;
}

#toc_container li, #toc_container ul {
margin: 5px;
margin-bottom: 0px;
padding: 0 10px 0 10px;
}

.toc_container h2{
font-weight: bold;
}

.toc_container h1{
font-weight: bold;
}

.toc_list li a {
font-weight: bold;
}
.toc_list ul li a {
font-weight: normal;
}

Link:

• Grazie Tantra.Marketing per averci passato i CSS
• TOC + lo puoi scaricare qui.
• Easy Table of Contents lo puoi scaricare qui