Toute l'actualité du CMS TYPO3, typoscripts, extensions, liens et téléchargements
Nous sommes le 05/02/2012
Configurer la liste à puces dans TYPO3
Personnellement, j'ai toujours eu le réflexe de créer mes listes à puces depuis l'éditeur RTE. Cependant, le type de contenu "Liste à puces" ou "Bullet List" offre des possibilités assez étendues. Lorsque l'on utilise les CSS, on souhaite parfois configurer au mieux les styles et ajouter par exemple une classe spécifique à la balise ul, du code après la balise li, etc ...
Voici le code que je vous propose pour configurer vos listes. Vous pourvez bien évidemment utiliser vos propres noms de classe.
Il faut tout d'abord entre la ligne suivante dans la partie constantes :
RTE.default.proc.typolist = 0
Ensuite, insérez les lignes suivantes dans le Setup de votre gabarit TYPO3 :
# ***********************
# Liste à puces
# ***********************
tt_content.text.20.parseFunc.tags.typolist.default {
wrap = <ul> | </ul>
split.1.wrap = <li> | </li>
}
tt_content.text.20.parseFunc.tags.typolist.1 {
fontTag = <ul class="layout1"> | </ul>
split.1.wrap = <li class="layout1"> | </li>
textStyle >
}
tt_content.text.20.parseFunc.tags.typolist.2 {
fontTag = <ul class="layout2"> | </ul>
split.1.wrap = <li class="layout2"> | </li>
textStyle >
}
tt_content.text.20.parseFunc.tags.typolist.3 {
fontTag = <ul class="layout3"> | </ul>
split.1.wrap = <li class="layout3"> | </li>
textStyle >
}
tt_content.text.20.parseFunc.tags.typolist.4 {
fontTag = <ul class="layout4"> | </ul>
split.1.wrap = <li class="layout4"> | </li>
textStyle >
}
# Puces par défaut
tt_content.bullets.20.default {
wrap = <ul> | </ul>
split.1.wrap = <li> | </li>
}
tt_content.bullets.20.1 {
fontTag = <ul class="layout1"> | </ul>
split.1.wrap = <li class="layout1"> | </li>
split.1.textStyle >
}
tt_content.bullets.20.2 {
fontTag = <ul class="layout2"> | </ul>
split.1.wrap = <li class="layout2"> | </li>
split.1.textStyle >
}
tt_content.bullets.20.3 {
fontTag = <ul class="layout3"> | </ul>
split.1.wrap = <li class="layout3"> | </li>
split.1.textStyle >
}
Vous pourrez ainsi insérer l'élement Liste à puces avec votre propre code.
