Les réglages avancés de l'AcadCMS sont puissants mais demandent quelques notions en ce qui concerne le CSS et ce qu'est une librairie de composants.
Ceci étant, c'est une bonne occasion d'apprendre et de s'exercer !
Votre feuille de style personnalisée
Le CSS (feuilles de style en cascade) permet d'ajouter une apparence unifiée à vos pages indépendamment de leurs contenus. Ainsi, l'apparence de l'ensemble du site peut être personnalisée depuis un seul fichier ! Pratique !
Ce code sera interprété par votre navigateur Web (Chrome, Firefox, Safari, Edge, etc.). Les commentaires, désignés entre les symboles "/*" et "*/", se sont jamais interprétés. N'hésitez donc pas à être un peu verbeux pour rentre votre code plus lisible afin de pouvoir le retravailler (notamment par une autre personne par exemple).
Vous disposez donc d'un champs de texte qui générera automatiquement à l'enregistrement votre fichier CSS avec toutes vos personnalisations (qui sera toujours exécuté en dernier, y compris sur la page de maintenance).
Rappel:
N'oubliez pas de vider le cache de l'AcadCMS une fois le code enregistré, ainsi que celui de votre navigateur Web (CTRL+F5 sur Windows et Linux, CMD+R sur Mac).
Initiation au CSS
Une page HTML (comme par exemple celle que vous êtes en train de lire) se compose de balises, à commencer par la balise <html>, qui regroupe deux autres balises principales <head> et <body>. C'est justement cette balise <body> qui nous intéresse !
À l'intérieur de <body>, il y a d'autres balises :
- <div> pour déclarer une sorte de boîte (de groupe de contenu si vous préférez)
- <p> pour le paragraphe
- <h1>, <h2>, <h3> à <h6> pour les entêtes
- etc.
Ces balises peuvent aussi recevoir des attributs, dont principalement "id" et "class".
- id = attribut unique (identifiant) pour une balise (exemple <div id="toto">(mon contenu)</div>)
- class = attribut qui peut être donné à un ensemble de balises (exemple <div class="fond-gris">(mon contenu)</div>")
Chaque balise peut être stylisée : hauteur, largeur, marges, couleurs de texte et de fond, bordures, ombres, etc.
Donc, pour reprendre les balises précédemment citées, on pourrait prendre une feuille de style pour les modifier une à une :
/* Les intertitres h2 deviennent rouges et les paragraphes blancs */
h2 { color: green; }
p { color: white; }
/* Les div ont un fond noir en hexadecimal "#000000" */
div { background: #OOOOOO; }
/* La div avec l'identifiant "toto" sera invisible */
div#toto { display: none; }
/* Les div avec la class "fond-gris" auront... un fond gris */
div.fond-gris { background: grey; }Astuce:
Vous pouvez utiliser des services gratuits afin de vous faciliter la vie :
- Exercez-vous en testant votre code sur Liveweave.com
- Trouvez des palettes de couleurs sur Colorhexa.com
Pour aller plus loin
Il existe des ressources sur le Web pour apprendre le CSS et même le tester. Des formations existent, dont certaines sont gratuites :
- Apprendre le HML5 et CSS3 sur Openclassrooms
- Apprendre le CSS via Grafikart
TP n°1 : notifications personnalisées
Imaginons un cas pratique : vous voulez un bloc qui met en avant un contenu important. C'est vrai que vous pourriez le faire avec Gutenberg, mais si vous en mettez sur certaines pages, et que, vous vous rendez compte finalement que le fond rouge ne vous plaît plus, vous devrez changer TOUS les contenus concernés.
Heureusement, le champs CSS du thème AcadCMS est là pour vous aider :-)
Nous allons donc créer un type de "class" qui concernera le bloc ".important". C'est parti !
/* fond jaune pastel et bordure orangée */
.important {
background: #fffec2;
border: #ffd45d solid 2px;}
/* le premier paragraphe du bloc ".important" sera en gras et en majuscules */
.important p:first-child {
font-weight: bold;
text-transform: uppercase;}Une fois ce code placé et enregistré (attention au cache), vous allez pouvoir utiliser ce style de bloc dans votre éditeur Gutenberg :
- Créez un groupe dans votre contenu Gutenberg
- Donnez-lui la classe "important"
- Écrivez deux paragraphes, le premier "Rappel", le second "Vous pouvez actualiser votre page Web en vidant le cache avec CTRL+F5 (ou CMD+R sur Mac)"
- Enregistrez
Et voilà ! Une fois sauvegardé, votre contenu affichera le bloc avec votre stylisation. Et même en ayant des centaines de blocs ".important" sur votre site Web, les modifier prendra quelques secondes ;-)
TP n°2 : gérer un élément sur mobile
On pourrait imaginer qu'on ait besoin de gérer le comportement d'un bloc sur écran mobile. Ça pourrait le réduire, le cacher, etc.
Il est possible, et même conseillé, d'utiliser des classes existantes pour ça (elles sont nombreuses sur l'AcadCMS, soit via son moteur graphique Bulma, soit via les objets CSS propres à l'AcadMS).
Par exemple, la classe "is-hidden-touch" qui masque un bloc sur mobile.
Donc, pour un besoin spécifique, nous allons d'abord chercher à détecter la taille de l'écran. Disons, au dessus de 800 pixels.
/* Un simple block gris */
.bloc-special {
display: block;
width: 100px;
height: 100px;
background: grey; }
/* Ce cube gris disparaît au dessus de 800 pixels */
/* Car il faut que la taille MINIMUM soit de 800 pixels pour que le code agisse */
@media screen and (min-width: 800px) {
.bloc-special {
display: none;
}
}Encore plus fort : le SCSS
Créer une feuille de style est intéressant, mais plus vous allez ajouter de personnalisations, plus il vous sera difficile de vous y repérer. En outre, vous verrez par exemple qu'une couleur revient souvent. Imaginez qu'il vous faut tout changer. Certes un "rechercher-remplacer" peut faire l'affaire, mais croyez-moi, lorsqu'une personnalisation devient trop imposante, le SCSS vous offre un confort et une rapidité dont vous aurez du mal à vous passer par la suite ;-)
Le SCSS, kézako ?
Le SCSS est une façon d'écrire votre CSS en intégrant par exemple des variables et des fonctions ("mixins") comme cela existe en programmation. Car, vous l'aurez peut-être déjà compris, il est possible de programmer en SCSS, même si ça reste loin de qu'il est possible de faire en Javascript. Qu'importe, tout cela nous sera bien utile !
Une fois votre code SCSS terminé, vous devez alors le convertir en CSS (on peut le faire facilement et gratuitement via Safetoconvert.com, mais sachez qu'il existe d'autres façons de convertir le SCSS en CSS).
Je vous invite à découvrir, si le cœur vous en dit, ce qu'est plus précisément le SCSS.
Initiation au SCSS
On va reprendre notre exemple du TP, le fameux bloc ".important", mais cette fois-ci façon SCSS.
$jaune: #fffec2;
$orange: #ffd45d;
// Le commentaire peut se faire ainsi en scss
.important {
background: $jaune;
border: $orange solid 2px;
// ici les balises "enfants" de ".important"
p:first-child {
font-weight: bold;
text-transform: uppercase;
}
}Rappel:
Si vous placez ce code ainsi dans le champs css du theme AcadCMS v3, cela ne fonctionnera pas ! Il faut convertir le SCSS en CSS. On obtiendra alors la même chose que le CSS du TP.
Encore une fois, l'intérêt réside dans la saisie de CSS vraiment très long. On peut ainsi faire l'économie de code, changer les variables et en plus le code pourra être minifié, ce qui optimisera le temps de chargement de ce dernier ;-)