Wie man CSS für vielseitiges Banner verwendet

Unterstützung
1

Ich möchte die Farbe der Elemente „Erweitern“ und „Schließen“ im Banner ändern. Ich gehe davon aus, dass dies mit CSS erfolgen kann. Aber wie geht man das für die Bannerkomponente an?

1 „Gefällt mir“
2

Hier sind die Schritte, wie Sie dies tun können:

  1. Inspizieren-Werkzeug öffnen:
    Navigieren Sie zu der Webseite, auf der das vielseitige Banner aktiviert ist. Klicken Sie mit der rechten Maustaste irgendwo auf die Seite und wählen Sie „Inspizieren“ (oder drücken Sie Strg + Umschalt + I unter Windows oder Cmd + Option + I unter Mac). Dadurch werden die Entwicklertools des Browsers geöffnet.

  2. Banner lokalisieren:
    Im Tab „Elemente“ der Entwicklertools fahren Sie mit der Maus über verschiedene Codeabschnitte, um die entsprechenden Teile der Webseite hervorgehoben zu sehen. Sobald Sie das Banner gefunden haben, klicken Sie auf das äußerste <div>, das das Banner enthält. Dadurch wird sichergestellt, dass Sie das gesamte Banner und alle seine Elemente auswählen.

  3. Elemente erkunden:
    Wenn das Banner ausgewählt ist, sehen Sie nun alle verschachtelten HTML-Elemente innerhalb der Bannerstruktur im Tab „Elemente“. Dies zeigt Ihnen die Hierarchie des HTML, das zur Erstellung des Banners verwendet wurde.

  4. Stile inspizieren:
    Auf der rechten Seite der Entwicklertools finden Sie den Tab „Stile“. Hier werden die CSS-Stile angezeigt, die auf das ausgewählte Element angewendet werden. Sie können geerbte Stile, Inline-Stile und Stile aus externen Stylesheets anzeigen.

  5. Änderungen experimentell vornehmen:
    Wählen Sie ein Element innerhalb des Banners aus und ändern Sie seine Stile direkt im Tab „Stile“. Sie können beispielsweise Farben, Schriftgrößen, Abstände, Ränder oder andere CSS-Eigenschaften anpassen. Diese Änderungen sind vorübergehend und sofort auf der Webseite sichtbar, sodass Sie frei experimentieren können.

  6. Design finalisieren:
    Sobald Sie mit den Designänderungen zufrieden sind, kopieren Sie den geänderten CSS-Code. Dies kann Änderungen an einzelnen Elementen oder am gesamten Banner umfassen.

  7. Änderungen anwenden:
    Gehen Sie zu Ihrer Seite https://yoursite.com/admin/customize/components, erstellen Sie eine Komponente und fügen Sie dann im Abschnitt „HTML/CSS bearbeiten“ den geänderten CSS-Code ein. Stellen Sie sicher, dass Sie die entsprechende Bannerklasse oder ID ansprechen, damit die Stile korrekt angewendet werden, und wenden Sie diese Komponente dann auf Ihr Theme an.

  8. Speichern und überprüfen:
    Speichern Sie das aktualisierte CSS, aktualisieren Sie Ihre Webseite und bestätigen Sie, dass das Banner die Änderungen wie beabsichtigt widerspiegelt.

Sie können auch hier nachsehen: Anpassen von CSS in Discourse

3

@MihirR großartige allgemeine Anweisungen, vielen Dank.

Ein wenig Lektüre scheint darauf hinzudeuten, dass Firefox einen besseren Style Editor als Chrome in den Webentwicklerwerkzeugen hat.

Aber um auf den spezifischen Fall zu kommen, habe ich große Schwierigkeiten, weil die Schaltflächen „Erweitern“ und „Schließen“ beim Überfahren mit der Maus die Farbe ändern und ich besiegt bin, weil ich versuche herauszufinden, wie ich die Grundfarbe festlegen kann. Das Element scheint die Klasse span.d-button-label zu sein.

4

Hallo :wave:

Hier ist ein Beispiel, wie die Farbe dieser Schaltflächen geändert werden kann.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // Hier zur gewünschten Farbe ändern
      }
      // Hover- und Fokusfarbe
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // Hier zur gewünschten Farbe ändern
          }
        }
      }
    }
  }
}
4 „Gefällt mir“
5

@Dan ist das SCSS oder LESS? Ich bin nicht mehr auf dem neuesten Stand, was CSS angeht. Verwendet Discourse das, ohne dass ich kompilieren muss?

1 „Gefällt mir“
6

@Andro das ist SCSS :))

7

Versteht Discourse SCCS nativ?

1 „Gefällt mir“
8

Ja, es versteht SCSS nativ.

2 „Gefällt mir“
9

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