Comprendre les classes et en créer sur votre site avec Oxygen

Introduction

Que sont les classes ?

Basiquement, une classe est une étiquette supplémentaire que vous ajoutez à un élément pour ajouter des règles supplémentaires. Faisons une analogie avec une maison :

Imaginons que vous ayez dix maisons à décorer de la même manière. Sur la première, vous choisissez de mettre du papier peint à l'intérieur, d'installer des luminaires, de mettre du crépi sur les murs extérieurs ... Une fois que vous avez fini de décorer la première maison, plutôt que de recommencer tout depuis le début à chaque fois, vous aimeriez bien pouvoir appliquer immédiatement toutes vos modifications aux maisons suivantes.

C'est exactement à ça que sert la classe. Une fois que vous l'avez configuré, il vous suffit de l'ajouter à n'importe quel élément pour appliquer instantanément les paramètres que vous avez précisé.

Comment reconnaître une classe sur Oxygen ?

Pour savoir si vous éditez la classe ou l'id d'un élément sur Oxygen, il faut regarder la couleur de l'étiquette qui lui est associée dans la barre d'édition.

• Si l'étiquette est bleue, c'est un id.
• Si l'étiquette est verte, c'est une classe

Créer une classe sur Oxygen

Avant tout, commençons par créer un élément :

• Sur la barre de structure (à gauche), cliquer sur inner content et insérer une div. Cliquer ensuite sur la div.
• Dupliquez la div (clic droit sur l'élément puis icône de crayon).

• Nous allons maintenant créer la classe AVANT de commencer à modifier l'élément. Cliquez sur l'étiquette bleue en haut de la barre d'édition (à gauche) et cliquez sur le bouton add class

• Ecrivez le nom de votre classe.
  • Choisissez un nom court qui permettra d'identifier facilement votre classe
  • Evitez les majuscules et la ponctuation
  • Séparez tous les mots par des tirets - ou _

Editons à présent la classe :

• Dans l'onglet size & spacing, mettez une width de 500px et une height de 600px, par exemple
• Dans l'onglet background, insérez une couleur de fond avec le champ background-color, de la couleur que vous voulez.

• Cliquez à présent sur la deuxième div, qui n'est pas encore stylisée

• En utilisant l'onglet size & spacing, mettez une margin-top de 50px environ, pour séparer cette div de la précédente.

• Cliquez ensuite sur l'étiquette d'id en bleu dans la barre d'édition, et entrez votre nom de classe. Oxygen devrait vous proposer la classe correspondante.

Insérez votre classe, et les réglages que vous avez au préalable définis s'appliqueront automatiquement à votre seconde div.

Conseils divers

Attention aux div déjà modifiée via l'id !

Lorsque vous insérez une classe, les modifications ne s'appliqueront que si votre élément n'a pas déjà été modifiée via l'étiquette d'id (en bleu). Si votre élément a déjà des modifications au niveau de l'id, il faudra les supprimer pour que celles de la classe s'applique. pour en savoir plus sur l'id et la hiérarchie des règles, consultez le guide dédié.

Les champs édités au niveau de l'id sont signalés par une barre bleue sur le bord gauche du champ (idem pour les classes).

Créez vos classes AVANT de modifier un élément !

C'est l'erreur classique. Il est important de d'abord créer la classe avant de modifier un élément si vous voulez réutiliser vos paramètres. Sinon, vous allez faire toutes vos modifications au niveau de l'ID, et vous devrez tout recommencer pour la classe.

Attention en modifiant vos classes

Modifiez un champ dans une classe changera le paramètre pour TOUS les éléments qui portent cette classe, y compris pour les autres pages. Attention donc si vous souhaitez modifier une classe utilisée un grand nombre de fois.

Pour éviter des modifications accidentelles, bloquer la modification d'une classe :

• Cliquez sur le bouton lock juste au-dessus de l'étiquette de classe.

Vous pouvez débloquer une classe simplement en cliquant sur le bouton unlock, situé au même endroit.