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 :
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
}
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
}
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.
- Version imprimable
- 4966 lectures
-
Commentaires
Poster un nouveau commentaire