Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Personnaliser le style des listes UL

Date du document en anglais : 26 Août 2009 - 01h53 - http://drupal.org/node/263979  



Niveau de difficulté : intermédiaire à avancé.

Exemple 1 : les bases

Pour cet exemple, nous créerons une liste non-ordonnée (ul) qui montrera des puces à côté d'une liste li dans une zone précise, et qui les cachera dans le reste du site.

Vous pouvez choisir quelle liste vous voulez personnaliser dans votre site.

Remarque :

Ne faites tout ceci que dans un site de développement, et ayez toujours une sauvegarde des fichiers sur lesquels vous allez travailler.

Nous allons prendre un div et l'appeler « content ». Le nom de votre div peut être différent. Dans ce div, nous placerons la liste ul à personnaliser :

<div id="content">
        <ul class="unordered_list_in_content">
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
        </ul>
</div>

Dans votre feuille de style, vous indiquerez :

ul { /* Ceci désactivera tous les list-style-types dans votre thème */
        list-style-type:none
}
#content ul.unordered_list_in_content {
        list-style-type: disc
}

Vous devriez maintenant avoir une liste à puces dans la zone que vous avez choisi et pas dans le reste du site.

Exemple 2 : amusons-nous avec les styles de listes

Pour désactiver tous les styles des listes dans un thème, tapez :

ul {list-style:none}

au lieu de :

ul {list-style-type:none}

Vous pouvez faire quelque chose comme :

ul {list-style:disc inside}

au lieu de

ul {list-style-type:disc}

Aussi, votre feuille de style finale devrait ressembler à :

ul {
        list-style:none
}
#content ul.unordered_list_in_content {
        list-style: disc inside
}

Remarque : si vous avez plus d'une feuille de style dans votre thème, vous devrez vous assurer qu'il n'y a pas de styles de liste surchargeant vos CSS, autrement elle ne s'afficheront pas.