Table des matières
Lorsque l'on construit les pages de son site web, on se retrouve rapidement à paramétrer un grand nombre d'options et à définir tout un tas de règles. Pour éviter de se retrouver empêtré dans un fouillis incompréhensible et / ou des règles contradictoires, une hiérarchisation est faite en fonction de la profondeur a laquelle vous aller modifier un élément.
En développement web, pour modifier l'apparence d'un élément, on utilise un langage de programmation bien précis : le CSS. Bien que vous n'ayez pas à l'apprendre pour modifier votre site, il est intéressant de savoir que les différentes options de personnalisation que vous utiliserez sur Oxygen Builder se base sur de vraies règles CSS. En somme, en utilisant Oxygen, vous écrivez en quelque sorte du CSS !
Par conséquent, lorsque vous modifiez un élément, il est important que vous sachiez avec quoi vous interagissez. Il existe trois manière d'interagir avec un élément ;
Pour faire simple, l'ID est le numéro d'identification d'un élément, un peu comme sa carte d'identité. Il est différent de la classe, car chaque élément a son propre ID, ce qui permet de différencier par exemple deux textes avec la même classe.
Dans le développement classique, un élément n'a pas forcément d'ID, mais sur Oxygen, tous les élément ont un ID. Il se présente généralement avec un nom alambiqué, par exemple div_block_860-1 ou headline_478-2 ...
La hiérachie en CSS se présente de cette manière :
Cela signifie que si vous définissez la taille d'un texte sur 14px en utilisant une classe, puis que vous la définissez sur 18px en utilisant l'ID, le texte fera 18 px.
En développement classique, voici comment une ligne de texte se présente en HTML (le langage de base utilisé pour structurer les pages web) :
A présent, prenons un exemple pour illustrer et écrivons un peu de CSS :
Pour commencer, nous utilisons la balise pour demander à TOUS les textes du site d'être de couleur bleue :
Ensuite, nous utilisons la classe texte-accueil pour rendre les textes de la section accueil verts. Par conséquent, tous les textes du site sont bleu, sauf ceux qui portent la classe texte-accueil, qui sont vert. En effet, la classe est plus puissante que la balise.
Enfin, nous utilisons l'ID text-1 pour rendre le premier texte de la section accueil rouge. Par conséquent, les textes de la section d'accueil sont tous vert, sont le premier qui devient rouge. En effet, l'ID est plus puissant que la classe.
Bien sûr, vous n'aurez pas à écrire de code sous cette forme avec Oxygen. Mais il est important de comprendre comment fonctionne la hiérarchisation des éléments. Néanmoins si écrire du code CSS "en dur" vous intéresse, consultez le guide dédié.
Pour commencer, Ouvrez une page avec Oxygen Builder.
Lorsque vous utilisez éditez un élément avec la barre d'édition à gauche de l'écran, vous remarquerez un élément situé juste au dessus des format d'écran, avec une petite étiquette bleu ou verte à gauche et une autre étiquette state a droite.
Cliquez sur l'étiquette pour faire apparaître l'ID et la liste des classes éventuelle que contient l'élément (NB : l'élément est la balise) :
Cliquez ensuite sur l'ID ou la classe que vous souhaitez modifier.
ATTENTION : Gardez à l'esprit qu'en modifiant une classe, vous modifiez TOUS les élément qui portent cette classe, même s'ils sont sur une autre page (sauf s'il sont eux-même édités via leur ID). Soyez donc prudent en travaillant avec une classe.
Si vous avez peur d'une fausse manip, vous pouvez verrouiller une classe en cliquant sur le bouton lock situé juste au-dessus. Vous éviterez ainsi de la modifier par mégarde. Elle se débloque en cliquant à nouveau sur le bouton.
