Come migliorare la grafica (tramite CSS) di TOC+

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