Comment utiliser CSS pour versatile-banner

Soutien
2

Voici comment procéder :

  1. Ouvrez l’outil d’inspection :
    Accédez à la page Web où la bannière polyvalente est activée. Faites un clic droit n’importe où sur la page et sélectionnez « Inspecter » (ou appuyez sur Ctrl + Maj + I sous Windows, ou Cmd + Option + I sur Mac). Cela ouvrira les outils de développement du navigateur.

  2. Localisez la bannière :
    Dans l’onglet Éléments des outils de développement, survolez différentes sections du code pour voir les parties correspondantes de la page Web mises en surbrillance. Une fois que vous avez trouvé la bannière, cliquez sur le <div> le plus externe qui contient la bannière. Cela garantit que vous sélectionnez la bannière entière et tous ses éléments.

  3. Explorez les éléments :
    Avec la bannière sélectionnée, vous pouvez maintenant voir tous les éléments HTML imbriqués à l’intérieur de la structure de la bannière dans l’onglet Éléments. Cela vous montre la hiérarchie du HTML utilisé pour créer la bannière.

  4. Inspectez les styles :
    Sur le côté droit des outils de développement, vous trouverez l’onglet Styles. Celui-ci affiche les styles CSS appliqués à l’élément sélectionné. Vous pouvez afficher les styles hérités, les styles en ligne et les styles provenant de feuilles de style externes.

  5. Expérimentez les modifications :
    Sélectionnez un élément dans la bannière et modifiez ses styles directement dans l’onglet Styles. Par exemple, vous pouvez ajuster les couleurs, les tailles de police, le remplissage, les marges ou toute autre propriété CSS. Ces modifications sont temporaires et visibles immédiatement sur la page Web, vous permettant d’expérimenter librement.

  6. Finalisez la conception :
    Une fois que vous êtes satisfait des modifications de conception, copiez le code CSS modifié. Cela peut inclure des modifications apportées à des éléments individuels ou à la bannière entière.

  7. Appliquez les modifications :
    Accédez à votre https://yoursite.com/admin/customize/components, créez un composant, puis dans la section Modifier le HTML/CSS, collez le code CSS modifié. Assurez-vous de cibler la classe ou l’ID de bannière approprié pour que les styles s’appliquent correctement, puis appliquez ce composant à votre thème.

  8. Enregistrez et vérifiez :
    Enregistrez le CSS mis à jour, actualisez votre site Web et confirmez que la bannière reflète les modifications comme prévu.

Vous pouvez également consulter : Comment personnaliser le CSS dans Discourse