Personnaliser le bouton Nouveau Sujet

Wiki de la communauté Développeurs
1

Bonjour,

Je voulais simplement partager avec vous comment j’ai créé notre nouveau bouton de sujet. Un peu de CSS :slight_smile:

J’utilise pour cela des variables de couleur (tertiary, secondary et primary-medium).

Bouton Nouveau Sujet

new-topic

Bouton Ouvrir Brouillon

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

Bonne journée ! :slight_smile:

10 « J'aime »
Developer Index
2021: The Year in Review
2

avant

image
image303×115 2.82 KB

après
image
image294×106 2.54 KB

rien n’a changé :no_good_man:

3

@valsha Je ne fais que deviner, mais peut-être est-ce parce que l’astuce CSS modifie le survol et que vous ne survolez pas ?

En général, et la plupart d’entre vous le savent, le changement au survol (et bien d’autres choses) ne s’affiche que sur les systèmes utilisant une souris. Pas sur les mobiles, car l’utilisateur se contente de toucher un bouton :wink:

2 « J'aime »
4

J’adore le look de ce bouton. Comment as-tu fait ça ?

Et là, on sort carrément du sujet… quel outil utilises-tu pour enregistrer ou convertir ces GIFs ?

(Oh non… est-ce que j’ai appuyé sur le mauvais bouton de réponse ? Donc : @Don)

2 « J'aime »
5

Bonjour,

Il semble que ce soit le Thème Dracula. J’ai vérifié le code source.

Vous devez ajouter button avant #create-topic pour le remplacer.

Il devrait donc commencer ainsi :arrow_down:

button#create-topic {

Si vous souhaitez conserver la couleur verte success, vous devez remplacer var(--tertiary) par var(--success). Voici comment :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 « J'aime »
6

Oui, ce bouton provient du Thème Dracula.
@Don, comme toujours, tu es le sauveur :+1:

2 « J'aime »
7

Et mesdames et messieurs, voici une démonstration de ce qui se passe quand quelqu’un ne réfléchit pas un peu à ce qu’il fait (c’est toujours lui…). Cette fois, taguer une personne à tort et poser une question au mauvais endroit peut prêter à confusion. Heureusement, ce n’est qu’un sujet lié au CSS/thème, pas la paix dans le monde, 42 ou autre chose d’important :rofl:

En fait, je m’interrogeais sur le bouton de @Don. Mais bien sûr, ce vert néon est aussi très bien :+1:

2 « J'aime »
8

Comment modifiez-vous le texte de « New Topic » à « Créer un nouveau sujet » ? @Don

9

Bonjour,

Rendez-vous sur /admin/customize/site_texts, recherchez le texte et modifiez-le. :slightly_smiling_face:

10

Est-il possible de le faire directement depuis le thème lui-même ?

11

La façon de procéder via un thème consiste à ajouter un script qui modifie l’objet I18n.translations.

2 « J'aime »
13

Il existe un composant de thème qui vous permet de personnaliser facilement le texte, l’icône et d’autres comportements de bouton associés :

Il ne vous permet pas de modifier le style du bouton, mais cela pourrait potentiellement être ajouté, je pense.

2 « J'aime »