Ce plugin génère un plan de site où chaque section est une liste HTML, et chaque page un élément de liste. Il utilise des feuilles de styles CSS ainsi que du JavaScript pour afficher / masquer chaque sous-section d'un élément. Vous n'avez aucunement besoin de vous préoccuper du code JavaScript, mais les feuilles de styles pourraient vous poser quelques problèmes.

Afin d'éviter ceci, regardez attentivement le code ci-dessous. Il s'agit des styles par défaut du plugin:

_CSS_DEFAULT_STYLE

.tx-dropdownsitemap-pi1 A {

font-weight: bold;

}

.tx-dropdownsitemap-pi1 LI.open OL {

display: block;

}

.tx-dropdownsitemap-pi1 LI.closed OL {

display: none;

}

.tx-dropdownsitemap-pi1 LI.open UL {

display: block;

}

.tx-dropdownsitemap-pi1 LI.closed UL {

display: none;

}

.tx-dropdownsitemap-pi1 DIV {

border: solid 1px #DFE2E3;

background: #FAFBFB;

padding: 2px;

margin-bottom: 5px;

}

.tx-dropdownsitemap-pi1 DIV.level_2 {

background: #FFFFFF;

}

.tx-dropdownsitemap-pi1 DIV.level_2 A {

font-weight: normal;

}

.tx-dropdownsitemap-pi1 DIV.level_3 {

background: #FAFBFB;

}

.tx-dropdownsitemap-pi1 DIV.level_4 {

background: #FFFFFF;

}

.tx-dropdownsitemap-pi1 DIV.level_5 {

background: #FAFBFB;

}

.tx-dropdownsitemap-pi1 DIV.expAll {

text-align: center;

border: solid 1px #DFE2E3;

background: #FAFBFB;

}

Pour modifier l'apparence globale du plan de site, vous pouvez effacer les styles par défaut en utilisant le code suivant, dans votre gabarit TypoScript:

plugin.tx_dropdownsitemap_pi1._CSS_DEFAULT_STYLE >

Ensuite, vous pouvez utiliser votre propre feuille de style pour donner au plugin un aspect différent. Faites attention de bien inclure les propriétés des éléments LI.open et LI.closed, qui sont mises en évidence dans l'exemple ci-dessus. Si vous les omettez, l'effet déroulant ne fonctionnera plus.

Pour tout le reste, vous avez une liberté totale. Les classes CSS sont générées comme suit: