CSS anpassen mit Chrome Dev Tools

Wenn ein Plugin Text ausgibt, erscheint dieser nicht immer automatisch in den zum aktiven Theme passenden visuellen Stilen. Anhand des neuen Features „Kleinunternehmerregelung“ in WooCommerce German Market zeigen wir dir, wie du beliebige HTML-Elemente visuell an dein Theme anpassen kannst.

Plugins müssen an manchen Stellen HTML ausgeben. Idealer Weise würde sich dieses neue HTML nahtlos in das Layout und visuelle Erscheinungsbild des aktiven Theme und der Website einfügen. Leider ist das eher selten der Fall, und so muss man unter Umständen selbst Hand anlegen, damit alles wieder chic aussieht. Mit den richtigen Hilfsmitteln und ein paar CSS-Basiskenntnissen kannst du das selbst in ein paar Minuten erledigen.

1. Werkzeug

Du brauchst:

Andere Browser wie Firefox oder Opera bieten ebenfalls Entwicklerwerkzeuge, die du natürlich genauso benutzen kannst. Der Übersicht halber bleibt dieser Beitrag bei Chrome; das grundsätzliche Vorgehen dürfte in allen Browsern ähnlich sein.

2. Status Quo

So sieht’s aus: WooCommerce German Market hat soeben ein neues Feature bekommen – die „Kleinunternehmerregelung“. Ist diese Option aktiviert, wird unter dem Produktpreis anstelle der Mehrwertsteuer ein Hinweis ausgegeben, dass der Preis, aufgrund der „Kleinunternehmerregelung“, keine Mehrwertsteuer enthält.

Das Theme Hamburg, das die Plugins WooCommerce und WooCommerce German Market nativ unterstützt, wird in Kürze aktualisiert, damit es das Feature „Kleinunternehmerregelung“ visuell untertsützt. Noch sieht der Texthinweis nicht ganz akkurat aus: die Schrift erscheint etwas zu groß und der Abstand zu klein. Das geht schöner!

Produkteinzelansicht Theme Hamburg
Vorher: Preis und Hinweis zur Kleinunternehmerregelung

3. Element untersuchen

  • Rechtsklick (Ctrl+Klick für Mac) auf den Text.
  • Element untersuchen anwählen.
  • Die Developer Tools öffnen sich.
  • Das HTML-Element zum Text wird markiert.
Produkteinzelansicht Theme Hamburg, Dev Tools
Zu bearbeitendes Element in den Dev Tools öffnen

4. CSS-Selektor anlegen

Mit einem Klick auf das kleine Plus-Button legt Chrome das markierte HTML-Element als CSS-Selektor an, in diesem Fall mit der Klasse .wgm-kleinunternehmerregelung.

Produkteinzelansicht Theme Hamburg, Dev Tools
Dev Tools: neuen CSS-Selektor anlegen

5. Stile hinzufügen

Mit Klick in die Zeilen nach dem neuen Selektor erlaubt dir Chrome, neue Eigenschaften hinzuzufügen – in unserem Fall font-size: 12px; für die Schriftgröße und margin-top: 12px für den Abstand nach oben. (Was die Werte in der Einheit rem hier machen, lassen wir der Übersicht halber mal außen vor; sie bewirken faktisch die gleiche Darstellung wie die Pixelwerte.)

Produkteinzelansicht Theme Hamburg, Dev Tools
Neuen CSS-Selektor stylen: Schriftgröße, vertikale Abstände

6. Bestehenden CSS-Selektor anpassen

Um des Beispiels willen verändern wir noch die Darstellung des Produktpreises. Erst einmal setzen wir die Schriftgröße auf 16px bzw. 1rem.

  • HTML-Element im Fenster der Dev Tools anklicken.
  • Rechts davon erscheinen die zugehörigen CSS-Eigenschaften.
  • Klick in eine Eigenschaft gibt diese zum Editieren frei.
Produkteinzelansicht Theme Hamburg, Dev Tools
Bestehenden CSS-Selektor anpassen: Schriftgröße verringern

7. Kind-Element auswählen

Das kleine Dreieck vor dem HTML-Element in den Dev Tools suggeriert, dass dieses Element weitere Elemente enthält („Eltern-Element“ und „Kind-Elemente“). Ein Klick auf das kleine Dreieck macht die Kind-Elemente sichtbar. Für das markierte Kind-Element lege nun einen neuen Selektor an (s.o.).

Produkteinzelansicht Theme Hamburg, Dev Tools
Kind-Element auswählen, neuen Selektor erstellen

8. Kind-Element stylen

Das Hinzufügen von Stilen kennst du nun bereits. Aber was soll der komische Rattenschwanz-Selektor auf dem nächsten Screenshot? Ganz einfach: Die Klasse .amount gibt es noch an anderen Stellen im Plugin bzw. Theme. Wir möchten sie aber nur hier visuell anpassen. Daher setze den Eltern-Selektor vor .amount; damit erreichst du, dass nur die .amount-Elemtente der davor benannten Klassen unsere neuen Stile erhalten.

Produkteinzelansicht Theme Hamburg, Dev Tools
Neue CSS-Stile für dem Produktpreis

9. Angepasstes CSS speichern

In den Dev Tools kannst du dein angepasstes CSS leider nicht speichern. Kopiere es daher bitte gleich nach jedem Schritt in das Stylesheet deines Child-Theme oder nutze das Plugin Simple Custom CSS als bequeme Lösung fürs Backend.

Update: Die Änderungen in den Dev Tools lassen sich sehr wohl speichern – man lernt nie aus. Danke, Chris!

Simple Custom CSS Plugin
Simple Custom CSS: Eigenes CSS via Backend speichern

10. Ergebnis: angepasstes CSS für Theme Hamburg

Fertig angepasstes CSS
Ergebnis: Angepasstes CSS für Hamburg

Ressourcen

CSS in Dev Tools bearbeiten: http://developers.google.com/chrome-developer-tools/docs/elements
Plugin Simple Custom CSS: http://wordpress.org/plugins/simple-custom-css/
Beispiel-CSS aus den Screenshots (ZIP): mp.de_.14460.css_.zip

Beitrag teilen

Author Avatar

Caspar hat das Helpdesk bei MarketPress mit betreut. Wenn er gerade nicht im Plugin- und Theme-Support arbeitet, findet man ihn bei WordCamps und anderen Community-Veranstaltungen.

Auch interessant:

Plugins angetestet: WooCommerce Stock Manager - Lagerbestand übersichtlich verwalten

von Michael Firnkes

Die Administration eines Shops mit umfangreicher Produktpalette kostet viel Zeit. Das kostenfreie Plugin WooCommerce Stock Manager hilft dir dabei, deine A ...

Weiterlesen

Plugins angetestet: WooCommerce Multiple Free Gift - Gratis Beigaben für deinen Shop

von Michael Firnkes

Ob Warenproben, "Zwei zum Preis von einem"-Angebote, Geschenke für größere Bestellungen oder kostenlose Aktionsprodukte: Mit Dreingaben, deren Preis aut ...

Weiterlesen

Plugins angetestet: WooCommerce Advanced Free Shipping - Bedingungen für kostenlosen Versand

von Michael Firnkes

Du willst die Option "kostenloser Versand" in WooCommerce an bestimmte Bedingungen knüpfen? Wir haben uns die gratis Erweiterung WooCommerce Advanced Free ...

Weiterlesen

Kleines WooCommerce Plugin selber schreiben: Alle Bestellungen eines Tages anzeigen

von Lars Köster

Du willst dir alle WooCommerce-Bestellungen eines bestimmten Tages anzeigen lassen? Unser Entwickler Lars hat hierfür ein kleines aber feines Mini-Plugin ...

Weiterlesen

Kommentare

5 Kommentare

  1. #1

    HeyHo!

    Danke für den coolen Beitrag. Ein kleiner Tipp noch von meiner Seite:

    In den Chrome Dev-Tools im Tab Sources -> Source (Panel links) -> deinecss.cssRechtsklick

    Kann man Save as.. auswählen um seine Änderungen – auch an JavaScript – zu speichern.

    Es gibt sogar eine Chrome-Extension ( Node.js benötigt ) die Autosave implementiert: https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl

  2. #2

    Super Artikel, Caspar! Und wer node.js nicht zu nutzen weiss, kann folgende Chrome-Erweiterung nutzen. Selber zwar noch nicht getestet aber vor wenigen Tagen selber drauf gestoßen, klingt vielversprechend: https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl

  3. #4

    Hallo Caspar,
    ich habe eine Frage bzgl. der Kategorie Angabe unter der Produkt Überschrift. Wie kriege ich die weg?
    Ich finde es für den Kunden irrelevant und zu viel Informationen .

    Vielen Dank, Helen

Ein Pingback

  1. WordPress-Support | GlückPress

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Abonniere unseren Newsletter

Trage hier deine E-Mail Adresse ein, damit du unseren Newsletter abonnieren kannst.