Schaltfläche „+ Neues Thema" an das Styling der Schaltfläche „Antworten" anpassen

Unterstützung
1

Mir gefällt das Styling des „Antworten“-Buttons, der die „Tertiär“-Farbe verwendet, wie sie unter /admin/customize/colors (Farbpaletten/Auswahl) definiert ist.

image
image694×920 133 KB

Ich möchte, dass unser „Neues Thema“-Button das Styling des „Antworten“-Buttons übernimmt, wie in diesem Video gezeigt:

2

Sie können versuchen, das CSS des Antwort-Buttons zu kopieren und diese Eigenschaften auf den „Beitrag hinzufügen“-Button zu übertragen:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Fügen Sie Folgendes hinzu:

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

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

Als Nächstes müssen Sie CSS für den :hover-Zustand (Mauszeiger darüber) hinzufügen:

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

Wählen Sie die erforderlichen Farben genauer aus. Ersetzen Sie *** durch die gewünschte Farbe.

So fügen Sie CSS zu Discourse hinzu:

Sie können dies mit jedem Teil des CSS tun.

3

Fantastische Antwort!!! Vielen Dank!

Ich könnte noch einen kleinen Ratschlag zu CSS gebrauchen… Wie kann ich diese beiden Code-Schnipsel am besten minifizieren?:

Farbe des [+ Neues Thema]-Buttons in der Kopfzeile ändern

Dieser Button in der Kopfzeile existiert dank des Themes (+ Neues Thema)-Button auf allen Seiten

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

Farbe des [+ Neues Thema]-Buttons auf Kategorien- und Tag-Seiten ändern

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

Verkleinern? Ich bin mir bei der Übersetzung nicht sicher, entschuldigen Sie bitte. Versuchen Sie, dies zu kombinieren:

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

Oder

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

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

Ich sehe dort eine ID (new-create-topic), ich weiß nicht, wie einzigartig sie ist. Versuchen Sie, dies zu verwenden (ich habe es nicht geprüft).

Es gibt tatsächlich viele Optionen.

Verwenden Sie:

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

css
css868×120 14.7 KB

Beliebige Kombinationen davon…

5

Danke für den Versuch, den Code kürzer zu machen. Als ich mehrere Kombinationen wie die von dir vorgeschlagenen ausprobiert habe, bekam ich Folgendes… (beachte das Pluszeichen)

hoverstate

Im Moment habe ich mich einfach dafür entschieden, die beiden Code-Snippets beizubehalten, und alles ist perfekt!! Nochmals vielen Dank @Stranik

6

Wir haben kein CSS für das Icon beim Hovern festgelegt:

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

Vielleicht ist das auch so gemeint. Manchmal ist es einfacher, es lokal auszuprobieren und zu sehen. :slightly_smiling_face:

Sie können ruhig verschiedene Optionen ausprobieren und kombinieren. Es gibt viel Raum für Kreativität. Viel Erfolg!