Aller plus loin avec les CSS

Grâce au Custom CSS présent dans le menu Apparences, nous avons la possibilité d’appliquer du CSS à chaque partie de nos pages et même sur certaines pages voir certains blocs d’une page…

Sur chaque page, article, évènement ou tout autre type de contenu créé sur nos instances WordPress il y a une balise <body> dans laquelle nous retrouvons des « class ».

Exemple sur http://demo.mt.ecclesial.fr/espace-formation/creation-des-contenus/289120-a-la-decouverte-des-options-de-mini-sites/ si nous faisons un ctrl U nous trouvons :

code-source-page

Sur cette page nous retrouvons plusieurs classes sur lesquelles nous pouvons intervenir en CSS :

  1. single
  2. single-post
  3. postid-289120
  4. single-format-standard
  5. logged-in
  6. admin-bar
  7. no-customize-support
  8. theme-formation
  9. type_post-formation-2
  10. give-test-mode
  11. give-page
  12. topbar
  13. wpb-js-composer
  14. js-comp-ver-4.8.0.1
  15. vc_responsive

Le nombre de classes sur une page n’est pas limité, mais est défini par le thème ou les extensions activées.

Pour mettre en forme nos contenus, toutes les classes ne seront pas utiles. Nous allons sélectionner nos contenus à styliser avec uniquement celles en gras.

Il s’agit ici d’un exemple sur un article. Sur une page la liste des classes sera différente. Par exemple, sur http://demo.mt.ecclesial.fr/espace-formation/ nous avons :

  1. page
  2. page-id-661
  3. page-parent
  4. page-template-default
  5. logged-in
  6. admin-bar no-customize-support
  7. type_page-formation
  8. give-test-mode
  9. give-page
  10. topbar
  11. wpb-js-composer
  12. js-comp-ver-4.8.0.1
  13. vc_responsive

En CSS, les « class » sont nommées avec un point devant leur nom. Ainsi, si je veux nommer la classe page-id-661, je noterai dans mon CSS :

.page-id-661

L’exemple de cette classe est très intéressant car il reprend de l’id du contenu (661). Dans WordPress, chaque contenu à un numéro unique dans la base de données quelque soit le contenu. Ce qui nous permet ici de donner un style particulier à cette page… et seulement à celle-ci.

Remarquez la « class »

postid-289120

sur l’exemple précédent.

Autre exemple:

type_page-formation

Permet de styliser les pages ayant le type formation… et pas les autres.

Ces classes vont donc nous servir pour styliser précisément notre contenu.

Il ne reste « plus » maintenant qu’à faire du CSS grace à Custom CSS dans le menu « apparence »

Exemple :

Pour mettre un titre h2 en couleur rouge et souligné sur les pages ayant le type formation, je noterai en CSS :

.type_page-formation h2{
color: red;
text-decoration: underline;
}

Pour les personnes qui ne maitriseraient pas le CSS, voici une ressource pouvant vous aider :

http://www.eprojet.fr/cours/html_css/01-html_css-introduction-html-css