Making custom CSS changes on your site

[Discourse]

Ce guide explique comment apporter des modifications CSS à votre site Discourse, y compris une introduction au CSS, où ajouter du CSS dans Discourse et comment trouver les bons sélecteurs à l’aide des outils d’inspection du navigateur.

Niveau d’utilisateur requis : Administrateur

Résumé

Ce guide couvre :

1. Une brève introduction au CSS et aux concepts clés
2. Comment ajouter du CSS à votre site Discourse à l’aide de composants de thème
3. Utilisation des outils d’inspection du navigateur pour trouver les bons sélecteurs CSS

Comprendre les bases du CSS

CSS signifie Cascading Style Sheets (feuilles de style en cascade). Voici trois concepts clés à comprendre :

1. Structure : Une règle CSS se compose d’un sélecteur, d’une propriété et d’une valeur.

p {
  color: red;
}

• Sélecteur : p (cible toutes les balises HTML <p>)
• Propriété : color
• Valeur : red

2. Cascade : La dernière règle appliquée a la priorité. Par exemple :

p {
  color: red;
}
p {
  color: green;
}

Les paragraphes seront verts car c’est la dernière règle appliquée.

3. Spécificité : Les règles plus spécifiques remplacent les moins spécifiques. Par exemple :

div p {
  color: green;
}
p {
  color: red;
}

Les paragraphes à l’intérieur des divs resteront verts car div p est plus spécifique que p.

Ajouter du CSS à votre site Discourse

Pour ajouter du CSS à votre site Discourse :

1. Allez dans Apparence > Thèmes et composants depuis la barre latérale ou suivez cette URL pour votre site : https://yoursite.com/admin/customize/components
   

   

2. Cliquez sur Installer et Créer un nouveau respectivement.
   

   

3. Nommez votre composant de thème et cliquez sur Créer
   

   

4. Choisissez les thèmes auxquels appliquer le composant
   

   

5. Cliquez sur Modifier le code
   

   

6. Ajoutez votre CSS dans l’onglet CSS
   

   

7. Cliquez sur “Enregistrer” pour appliquer vos modifications.
   

   

Si vous avez plusieurs thèmes sélectionnables par l’utilisateur, assurez-vous d’ajouter vos composants de thème à tous les thèmes pertinents.

Trouver les bons sélecteurs CSS

Utilisez les outils d’inspection du navigateur pour trouver les bons sélecteurs CSS :

1. Faites un clic droit sur l’élément que vous souhaitez modifier.

2. Sélectionnez “Inspecter” dans le menu contextuel.
   

   

3. Dans le panneau des outils de développement, localisez les sélecteurs d’éléments.
   

   

4. Cliquez sur les sélecteurs respectifs et ajoutez votre règle CSS.
   

   

5. Copiez la règle, collez-la dans la section CSS de votre composant de thème et supprimez les autres règles.
   

   

Pour des sélecteurs plus spécifiques, vous devrez peut-être copier le sélecteur utilisé dans les styles existants de Discourse et le modifier dans votre composant de thème.

Voici une vidéo démontrant les étapes ci-dessus :

Si vos modifications ne sont pas appliquées, vérifiez que :

• Le composant de thème est activé sur vos thèmes.
• Votre règle CSS est suffisamment spécifique pour remplacer les styles existants.

Ressources supplémentaires

• Documentation MDN sur le CSS
• Documentation Chrome DevTools
• Freecodecamp
• Guide pour débutants sur l’utilisation des thèmes Discourse

[bloomexperiment (Tracey)]

Est-ce que cela pourrait être transformé en wiki ? Les informations sous le titre Où ajouter mon CSS ? doivent être mises à jour, car il n’y a plus de bouton Modifier le CSS/HTML si vous avez installé un thème existant — ce qui est probable maintenant si quelqu’un a choisi un thème via le nouvel Assistant de configuration. Nous utilisons maintenant des composants de thème qui seront ajoutés aux thèmes existants.

https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5

Je pourrai le mettre à jour une fois qu’il sera transformé en wiki.

[bloomexperiment (Tracey)]

C’est fait