Recherche rapide : Avancée

 

Vous êtes ici : Accueil > Snippets > Types de contenu > Liste à puces

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.


Les derniers snippets :

Liens internes : titre du lien automatique
Comment ajouter automatiquement le titre de la page cible pour les liens internes