Comment utiliser CSS pour versatile-banner

Soutien
1

Je voudrais changer la couleur des éléments “Expand” et “Close” dans la bannière. Je suppose que cela peut être fait avec CSS. Mais comment s’y prendre pour le composant bannière ?

1 « J'aime »
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

3

@MihirR d’excellentes instructions génériques, merci beaucoup.

Une petite lecture semble indiquer que Firefox a un meilleur éditeur de styles que Chrome dans les outils de développement web.

Mais pour en venir au cas spécifique, j’ai beaucoup de mal, car les boutons Expand et Close changent de couleur au survol et je suis vaincu en essayant de trouver comment définir la couleur de base. L’élément semble être la classe span.d-button-label.

4

Bonjour :wave:

Voici un exemple pour changer la couleur de ces boutons.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // changez ceci à la couleur souhaitée
      }
      // couleur au survol et lors de la mise au point
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // changez ceci à la couleur souhaitée
          }
        }
      }
    }
  }
}
4 « J'aime »
5

@Dan est-ce du SCSS ou du LESS ? Je suis déconnecté du CSS actuel. Discourse l’utilise-t-il sans que j’aie à compiler ?

1 « J'aime »
6

@Andro c’est du SCSS :))

7

Alors Discourse comprend-il nativement les SCCS ?

1 « J'aime »
8

Oui, il comprend nativement le SCSS.

2 « J'aime »
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.