Aller au contenu principal


Un style par type de contenu !

Cet article a été écrit pour montrer qu'il est possible d'utiliser "une mise en page adaptée" à chaque type de contenu.

Par exemple, dans le thème utilisé pour styliser ce site, toutes les pages créés à partir du type de contenu  "Billet_Système" sont encadrées de  bordures droites et gauches bleues qui alertent  sur le niveau  de connaissances requises pour leur bonne compréhension (cf présentation en page d'accueil). Elles se distinguent donc des autres pages encadrées par d'autres couleurs.et correspondant à d'autres types de contenu.

L'aspect graphique étant gérée par les style CSS, il est nécessaire de configurer la classe CSS associée au type de contenu "Billet_Système".

Comme indiqué sur la page "Gérer ses types de contenu, ce type de connu a :

  • pour nom  interne ou nom machine : "billet_systeme".
  • pour classe CSS  "node--type-billet-systeme"

Cette classe est utilisée sur ce site avec le code ci-dessous :

.node--type-billet-systeme{
        border-right: solid thick ##8989FF;
        border-left: solid thick ##8989FF;
        padding: 2.2em 1.5em;
        margin: -2em -1em;
        border-radius: 0px 0px 0px 0px;
}

Comme il s'agit d'une classe CSS, nous disposons de nombreuses possibilités de stylisation comme par exemple :

  • le fond de page : couleur et/ou image (background-color ; bakground-image)
  • le style des caractères : fonte, taille, couleur ( font-family; size ; color)
  • ...

De plus cette stylisation de la mise en page ne retire absolument aucune des autres libertés de construction des pages.
Le style de la portion de code affichée ci-dessus montre qu'il est également possible d'utiliser les styles disponibles pour les pages qui n'appartiennent pas à ce type de contenu..

Vous disposez maintenant du nouveau type de contenu "billet". Voir les billets suivants :