Anpassen des Buttons 'Neues Thema'

Community-Wiki Entwickler
1

Hallo,

ich möchte nur mit euch teilen, wie ich unseren neuen Themen-Button erstellt habe. Ein wenig CSS :slight_smile:

Ich verwende dafür Farbvariablen. (tertiary, secondary und primary-medium)

Neues Thema-Button

new-topic

Entwurf öffnen-Button

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);
      }
    }
  }
}

Ich wünsche euch einen schönen Tag! :slight_smile:

10 „Gefällt mir“
Developer Index
2021: The Year in Review
2

vorher

image
image303×115 2.82 KB

nachher
image
image294×106 2.54 KB

nichts hat sich geändert :no_good_man:

3

@valsha Ich tippe nur mal, aber vielleicht liegt es daran, dass der CSS-Trick das „Hover"-Verhalten ändert und du gerade nicht mit der Maus darüberfährst?

Im Allgemeinen – und die meisten von euch wissen das – werden Änderungen beim „Hover" (und viele andere Dinge) nur auf Systemen mit Maus angezeigt. Nicht auf Mobilgeräten, denn dort klickt der Nutzer einfach auf einen Button :wink:

2 „Gefällt mir“
4

Ich mag den Look dieses Buttons. Wie hast du das gemacht?

Und das ist absolut themenfremd… welches Tool nutzt du beim Aufnehmen/Konvertieren dieser GIFs?

(Verdammt… habe ich versehentlich den falschen Antwort-Button gedrückt? Also: @Don)

2 „Gefällt mir“
5

Hallo,

es scheint, dies ist das Dracula Theme. Ich habe den Quellcode geprüft.

Du musst button vor #create-topic hinzufügen, um es zu überschreiben.

Es sollte also so beginnen :arrow_down:

button#create-topic {

Wenn du die grüne success-Farbe beibehalten möchtest, solltest du var(--tertiary) durch var(--success) ersetzen. So :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 „Gefällt mir“
6

Ja, dieser Button stammt vom Dracula Theme.
@Don, wie immer bist du der Retter :+1:

2 „Gefällt mir“
7

Und meine Damen und Herren, das war eine Demonstration dafür, was passiert, wenn jemand nicht ein wenig darüber nachdenkt, was er (es ist immer er…) tut. Diesmal kann es verwirrend sein, eine Person falsch zu taggen und an der falschen Stelle Fragen zu stellen. Zum Glück geht es hier nur um CSS/Themes – nicht um Weltfrieden, 42 oder sonst etwas Wichtiges :rofl:

Eigentlich habe ich mich über @Dons Button gewundert. Aber sicher, dieses Neongrün ist auch ganz nett :+1:

2 „Gefällt mir“
8

Wie änderst du den Text von „New Topic" zu „Create a new Topic"? @Don

9

Hallo,

Besuche /admin/customize/site_texts, suche nach dem Text und ändere ihn. :slightly_smiling_face:

10

Ist das direkt im Theme selbst möglich?

11

Der Weg, dies über ein Theme zu erreichen, besteht darin, ein Skript hinzuzufügen, das das I18n.translations-Objekt ändert.

2 „Gefällt mir“
13

Es gibt eine Theme-Komponente, mit der Sie den Text, das Symbol und andere zugehörige Schaltflächenverhalten jetzt einfach anpassen können:

Sie erlaubt es nicht, das Styling der Schaltfläche zu ändern, aber das könnte meiner Meinung nach potenziell hinzugefügt werden.

2 „Gefällt mir“