CSS anpassen mit Chrome Dev Tools

scheduledpostunstick

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:

Neue Produktfilter WordPress

Plugins angetestet: WooCommerce Products Filter - Erweiterte Produktfilter

von Michael Firnkes

WooCommerce enthält bereits die wichtigsten Funktionen, damit deine Kunden Produkte nach Preis, Kategorie etc. filtern können. Wem diese Möglichkeiten n ...

Weiterlesen
gm3-blog

Das neue German Market: Dein Komplettpaket für WooCommerce

von Michael Firnkes

Integrierte Rechnungserstellung, Anbindung an die Buchhaltung, Bearbeitung von Stornos und vieles mehr: Mit der Version 3.0 erfindet sich unsere beliebte W ...

Weiterlesen
plugintest

Plugins angetestet: WooCommerce Image Hover - Vorschaubilder "in groß" anzeigen

von Michael Firnkes

Kleines Plugin mit großer Wirkung, so könnte man die kostenfreie Erweiterung WooCommerce Image Hover beschreiben. Es ersetzt das zentrale Produktbild dur ...

Weiterlesen
woocommerce produktkommentare

Plugins angetestet: WooDiscuz - Kommentarfunktion für deinen WooCommerce-Shop

von Michael Firnkes

Mit ihrer Kommentarfunktion ziehen Blogs Leser und Suchmaschinen gleichermaßen an. Warum sollte das bei einem Onlineshop nicht ebenfalls funktionieren? Da ...

Weiterlesen

Kommentare

3 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

Ein Pingback

  1. WordPress-Support | GlückPress

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind 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="">