Modifier le bouton « + Nouveau sujet » pour qu'il corresponde au style du bouton « Répondre »

Soutien
1

J’aime le style du bouton « Répondre », qui utilise la couleur « Tertiaire » telle que définie dans /admin/customize/colors (Palettes de couleurs/sélection)

image
image694×920 133 KB

Je souhaiterais que notre bouton « Nouveau sujet » adopte le même style que le bouton « Répondre », comme illustré dans cette vidéo :

2

Vous pouvez essayer de récupérer le CSS du bouton de réponse et d’appliquer ces propriétés au bouton « Ajouter un sujet » :

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Essayez d’ajouter ceci :

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

Ensuite, vous devez ajouter du CSS pour l’état :hover (survol)


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

Choisissez les couleurs nécessaires avec plus de précision. Remplacez *** par la couleur de votre choix.

Comment ajouter du CSS à Discourse :

Vous pouvez appliquer cela à n’importe quelle partie du CSS.

2 « J'aime »
3

Excellente réponse !!! Merci beaucoup !

Je pourrais bien utiliser un dernier conseil CSS… comment pourrais-je minifier au mieux ces deux extraits de code ?

Changer la couleur du bouton [+ Nouveau sujet] dans l’en-tête

Ce bouton d’en-tête existe grâce au thème (+ Nouveau sujet) sur toutes les pages

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

Changer la couleur du bouton [+ Nouveau sujet] sur les pages de catégories et d’étiquettes

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
1 « J'aime »
4

Réduire ? Je ne suis pas sûr de la traduction, je m’excuse. Essayez de combiner ceci :

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

Ou

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

Je vois qu’il y a un id (new-create-topic), je ne sais pas à quel point il est unique. Essayez d’utiliser ceci (je n’ai pas vérifié).

Il existe en réalité de nombreuses options.

Utilisez :

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

N’importe quelle combinaison de ceux-ci…

2 « J'aime »
5

Merci d’avoir essayé d’aider à raccourcir le code. Lorsque j’ai essayé plusieurs combinaisons comme celles que vous avez suggérées, voici ce que j’obtenais… (remarquez le signe plus)

hoverstate

Pour l’instant, j’ai simplement décidé de garder les deux extraits de code et tout est parfait !! Merci encore @Stranik

1 « J'aime »
6

Nous n’avons pas défini de CSS pour l’icône au survol :

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

Peut-être. Parfois, il est plus facile de le faire localement et de voir. :slightly_smiling_face:

Vous pouvez essayer en toute sécurité différentes options et les combiner. Il y a un vaste champ pour la créativité. Bonne chance !

2 « J'aime »
7

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