Wie man CSS für vielseitiges Banner verwendet

Unterstützung
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