CSS anpassen – 6 Tipps, wenn eure CSS √Ąnderungen nicht greifen

titelbild_css_crashkurs

Ihr möchtet die Optik eures Themes anpassen.
Aber egal was ihr auch in den CSS abspeichert - eure √Ąnderung an eurem WordPress-Theme ist nicht zu sehen?

Hier habe ich f√ľr euch einen kleinen Crashkurs zum √úberschreiben der CSS f√ľr CSS-Anf√§nger. Ich m√∂chte euch damit ein bisschen die Angst vor dem Quellcode nehmen - denn wenn ihr mal den Anfang geschafft habt, werdet ihr merken dass das √Ąndern am Quellcode gar nicht so schwer ist.

Um √Ąnderungen per CSS am Design eurer Seite vorzunehmen m√ľsst ihr nicht die CSS-Sprache auswendig beherrschen. Ein paar Grundkenntnisse reichen aus, um einfache Designanpassungen vorzunehmen. Abgesehen davon sind viele CSS-Angaben auf den zweiten Blick relativ selbsterkl√§rend.

Vorab: Ich empfehle ein Childtheme anzulegen - damit bleibt euer Haupttheme erhalten und eure √Ąnderungen werden nicht bei jedem Theme-Update √ľberschrieben. Hier findet ihr eine Anleitung, wie ihr euch ein Childtheme selbst erstellt, bzw. wie ihr √ľberhaupt die CSS an eurem Theme √§ndern k√∂nnt.

Wie finde ich die richtige CSS-Angabe zum √úberschreiben

Klickt auf eurer Website mit der rechten Maustaste auf das Element, dass ihr √§ndern m√∂chtet und w√§hlt "Element untersuchen". Dann √∂ffnet sich ein separates Fenster mit dem Quellcode deiner Seite, bei dem dieses Element schon markiert ist. So k√∂nnt ihr¬†herausfinden, welches Tag f√ľr welches Element steht. Rechts seht ihr die CSS Angaben, die dazu geh√∂ren.

Ein Beispiel direkt von der Ideenlounge

Hier das Beispiel am Theme Twenty Fifteen von der Ideenlounge - ich m√∂chte herausfinden, welche Angabe f√ľr die Schriftdarstellung in dem Widget mit den Kategorien in der Sidebar zust√§ndig ist.

Unterhalb des Bildes seht ihr die Legende zu den einzelnen Nummern:

css_demo

  1. Ich klicke zunächst mit der rechten Maustaste auf einen der Kategorielinks in der Sidebar und wähle "Element untersuchen"
  2. Es öffnet sich ein Fenster mit dem Quellcode und den zu diesem Elemente passenden CSS-Angaben. In der Html Datei sehe ich, dass jeder Link aus einem Text besteht, bei dem der Titel in fett (<strong>) dargestellt wird.
  3. Rechts in den CSS-Angaben sehe ich den Pfad: 
    #text-9 .textwidget a.kategorielink strong { ... }
    Hier wird festgelegt, dass der fette Text in dem Link genau in diesem Widget schwarz und in der Größe 15px sein soll.
  4. Weiter unten sehe ich die Angabe f√ľr den kompletten Link - die Schriftfarbe und Schriftgr√∂√üe sind hier durchgestrichen, da diese durch die obige Angabe f√ľr alle fetten Texte innerhalb eines Links √ľberschrieben werden.

Was √ľberschreibt was - die Priorit√§ten in CSS

Die CSS-Sprache folgt ganz einfachen Regeln:

  1. Das, was in der Datei weiter unten steht √ľberschreibt das obere.
  2. Sind mehrere .css-Dateien im Theme eingebunden - beispielsweise durch Plugins - gilt das selbe - die im Html-Code weiter unten eingebundenen Dateien √ľberschreiben die oberen.
  3. In CSS gilt das Trichterprinzip - wenn du also eine Eigenschaft in einem div innerhalb eines divs ansprichst, musst du auch diesen Pfad wieder exakt verwenden, um ihn zu √ľberschreiben.

    Beispiel:
    .klasse1 .klasse2 em { ... }
    kann nicht √ľberschrieben werden durch:
    .klasse2 em { ... }
    auch nicht durch:
    .nocheineklasse .klasse2 em { ... }

  4. Die Reihenfolge in den CSS-Angaben muss auch mit der Verschachtelung im Html¬†√ľbereinstimmen.

    Beispiel - HTML Code:
    <div class="klasse1">
        <div class="klasse2">
             <strong> ....

    CSS richtig:
    .klasse1 .klasse2 strong { ... }

    CSS falsch:
    .klasse1 strong .klasse2 { ... }

  5. Und zum Abschluss noch die Holzhammermethode:
    Setzt hinter der Eigenschaft ein !important (ohne Strichpunkt dazwischen) - das √ľberschreibt alles.

    Beispiel:
    .strong { color:red !important; }
    √ľberschreibt¬†
    .klasse1 .strong {color:black}
    Auch wenn sich die Fettsschrift innerhalb des Containers mit der Klasse "klasse1" befindet.

    Aber auch hier gilt die Reihenfolge. Wenn ihr nat√ľrlich ein Element mit !important √ľberschreiben wollt, muss dies ebenfalls im Code weiter unten stehen. Bitte geht damit vorsichtig um - macht euch lieber die M√ľhe und sucht euch den Pfad heraus - damit bleibt euer Code auf Dauer √ľbersichtlicher.

Eure CSS-√Ąnderung wird nicht angezeigt?
6 Tipps zur Fehlersuche

  1. Ihr habt nicht in der richtigen CSS Datei gearbeitet. Oder Eure CSS wurde nicht richtig hochgeladen.
    Das ist nicht als Witz gedacht - auch mir passiert das mit aller Regelm√§√üigkeit, dass mein FTP-Programm im Standby ist, die CSS-Datei nicht hochl√§dt, und ich mich dann wundere, warum ich keine CSS-√Ąnderung sehe....
  2. Es ist ein Cacheplugin aktiv
    Nutzt Ihre ein Cache-Plugin zum Beschleunigen eurer Seite? Wenn ja, löscht den Cache - jedes Cacheplugin bietet in der Regel eine Funktion zum Cache löschen an.
  3. Der Pfad der CSS Angabe stimmt nicht.
    Dass trifft am h√§ufigsten zu. √úberpr√ľft mit der rechten Maustaste und klickt auf "Element untersuchen", ob eure √Ąnderung grunds√§tzlich vorhanden ist. Wenn nicht, √ľberpr√ľft nochmals exakt die Reihenfolge eurer Angaben zu diesem Element.
  4. Es gibt eine andere CSS Angabe, die genauer zutrifft
    Ist eure ge√§nderte Angabe nach dem Klick mit der rechten Maustaste grunds√§tzlich vorhanden, aber durchgestrichen, liegt das entweder daran, dass es noch eine andere Angabe gibt, die nach dem Trichterprinzip genauer an das gew√ľnschte Element herankommt
  5. Eure √Ąnderung steht in der Reihenfolge an der falschen Stelle
    Auch hier wird beim Test mit der rechten Maustaste eure ge√§nderte Angabe durchgestrichen sein. √úberpr√ľft, ob in euerer CSS dieses Element weiter unten noch einmal aufgerufen wird
  6. Es gibt separate Mobilversionen - und eure √Ąnderung wird nicht in allen Aufl√∂sungen angezeigt.
    Mehr dazu ganz unten im Punkt "Special Responsive Layouts". Dort lernt ihr die Grundlage f√ľr die verschiedenen Ansichten f√ľr verschiedene Aufl√∂sungen, wie ihr diese erkennt, herausfindet und √§ndert.

Ein paar CSS Basics f√ľr CSS Anf√§nger

Folgende Basis-Elemente gibt es in eurem Quellcode:

  1. IDs - gibt es nur einmal im Dokument und sind quasi eindeutig
    Html-Beispiel: <div id="id-name"> ... </div>
    CSS- Beispiel: #id-name { ... } (IDs fangen in CSS mit einer Raute an)
  2. Klassen - können mehrfach eingesetzt werden
    Html-Beispiel: <div class="klassenname"> ... </div>
    CSS- Beispiel: .klassenname { ... }   (Klassen fangen in CSS mit einem Punkt an)
  3. Html Tags
    Das sind die eigentlichen Html-Angaben wie <strong> f√ľr Fettschrift oder <div> f√ľr einzelne Container CSS-Beispiel: div { ... }
    Tages werden in CSS ohne Punkt und ohne Raute verwendet
  4. Angaben f√ľr die Bildschirmaufl√∂sung
    Betrifft die responsive Layouts, die per CSS gesteuert werden.
    CSS-Beispiel: @media screen and (min-width: 77.5em) { .... }

Einzelne Elemente per CSS konkret ansprechen:

Ich kann in CSS den kompletten Pfad mitgeben, so dass nur ganz spezielle Elemente angesprochen werden. Dazu muss ich die einzelnen Elemente mit einem Leerzeichen getrennt angeben:

#footer h2 { color:red; } 
Alle √úberschriften 2 im Container mit der ID="Footer" sind rot

#sidebar h2 { color:blue; } 
Alle √úberschriften 2 im Container mit der ID="Sidebar" sind blau

#footer .textwidget a { color:green; }
alle Links in einem Textwidget im Container mit der ID="Footer" sind gr√ľn}

Mehrere Elemente auf einmal ansprechen

Um mehrere Elemente mit der gleichen Eigenschaft zu versehen, werden diese mit einem Komma getrennt:

.rot a em, .blau a em { ... }

Diese Eigenschaften treffen auf alle kursiv geschriebenen Linktexte in den Containern mit den Klassen "rot" oder "blau" zu

Ihr m√ľsst also bei der Suche nach dem richtigen Pfad gut aufpassen, ob ein Komma dazwischen steht.

Special Responsive Layouts - CSS f√ľr Mobile Webseiten

Mit CSS kann man wunderbar verschiedene Layouts f√ľr verschiedene Bildschirmbreiten festlegen.

Dazu legt man einfach einen Rahmen um die jeweiligen CSS-Angaben und definiert so, f√ľr welche Breiten diese Angaben z√§hlen.

Beispiel:

Mit diesen CSS wird der Hintergrund der Seite in weiß dargestellt.

Ist die Breite schmaler als 480 Pixel  beispielsweise bei Mobiltelefonen wird der Hintergrund automatisch in schwarz dargestellt:

body { background-color:white;}

@media screen and (max-width: 480px) {       
      body {
           background-color:black;
      } 
}

Was bedeutet das responsive Layout f√ľr unsere Suche nach dem richtigen CSS Tag zum √ľberschreiben der CSS?

Es kann also sein, dass ihr das richtige Tag ansprecht, aber eben nur f√ľr eine Aufl√∂sung. Und sobald ihr die Aufl√∂sung ver√§ndert ist eure √Ąnderung nicht mehr zu sehen.

Findet in diesem Fall zunächst heraus, welche Breakpoints es gibt - das sind die Punkte, an denen das Design umspringt.

√Ėffnet dazu die Style.css eures Themes bzw. eures Mutterthemes. Sucht dort nach "@media screen" und seht euch die Zeilen an.

Beim Theme Twenty Fifteen beispielsweise gibt es 7 Breakpoints - diese sind auch jeweils kommentiert:

responsive_css

Fazit:

Das Ganze klingt auf den ersten Blick recht kompliziert - aber schaut euch eure CSS Dateien einfach bewusst an, indem ihr im Browser auf verschiedene Elemente klickt und euch den passenden Code mit "Element untersuchen" anzeigen lasst.

Und ihr werdet feststellen, dass das Ganze kein Hexenwerk ist - denn die meisten CSS-Angaben lassen erahnen, was dahintersteckt:

  • Background-color ist die Hintergrundfarbe
  • font-family ist die Schriftfamilie
  • border ist der Rahmen

Wenn ihr also den Anfang geschafft habt, steht euch eine berauschende Vielfalt an M√∂glichkeiten zur Verf√ľgung, wie ihre euren Blog anpassen k√∂nnt!¬†Also ran an die CSS - und macht euer Theme einzigartig. Hier auf der Ideenlounge findet ihr immer wieder neue CSS Schnipsel zum Copy&Paste.

Klicke hier und werde Mitglied im Style-Club der Ideenlounge und du bekommst alle Grafiken, Codeschnipsel und das Ideenlounge-Style-Plugin zum Download. Alles komplett for free!

Wenn ihr alle Tipps monatlich per Mail erhalten möchtet könnt ihr euch auch im Styleclub registrieren - kostenlos und garantiert spamfrei

Die Anmeldung ist unverbindlich und kostenlos und kann jederzeit wiederrufen werden.

 

Kommentare

  1. Birgit 23. August 2015 um 0:11

    Wunderbar geschrieben, vielen Dank!! So langsam gewinne ich auch den Durchblick …. viele Quellen im Web sind da sehr umst√§ndlich formuliert oder zu ausschweifend … aber das hier ist genau richtig f√ľr mich, danke, gebookmarkt :-)

    • Mirjam 23. August 2015 um 15:08

      Dankesch√∂n, das freut mich sehr. Die CSS sind mittlerweile auch echt komlex geworden. Ich erinnere mich noch an die Zeit, als es die Neuerung schlechthin war, √ľberhaupt CSS einzusetzen. Damals gab es nur Basic Angaben. Und heute steuert man so viele Details wie die Mobilausgabe oder Hover Effekte per CSS….. Faszinierend….

  2. John Boy 26. Januar 2016 um 12:49

    Wer !important als CSS Methode empfiehlt … ach is egal. Weitermachen.

    • coloritas 26. Januar 2016 um 13:50

      Hallo, genau deswegen habe ich dies die Holzhammermethode genannt, und dazu noch folgendes geschrieben: „Bitte geht damit vorsichtig um (…)“.

      Die meisten meiner Leser sind keine Programmierer und arbeiten mit gekauften Themes, in denen sie ab und an mal etwas ändern möchten. Und viele suchen ewig nach dem richtigen Pfad Рund da finde ich es durchaus legitim, wenn man das eine oder andere Mal ein !Important setzt :-)

  3. Wolgang 20. November 2016 um 11:56

    Wenn mehrere CSS in einem verschachtelten div in einem wordpress template stehen (jedes div hat mehrere Klassen) und ich m√∂chte einem bestimmten div mein eigenes css beif√ľgen. Wie funktioniert das? Im google developer Tool ist es einfach. Und es funktionierrt auch im google dev Tool. Aber wenn ich die Klasse in wordpress einf√ľgen will, funktioniert es nicht. Kannst Du mir in einem Beispiel zeigen wie das funktioniert? Danke f√ľr die Hilfe.

    • coloritas 21. November 2016 um 10:41

      In Html werden die CSS der Reihe nach geladen wie sie im Header stehen. Wenn in deinem Theme nach deinem CSS noch weitere CSS folgen, dann √ľberschreiben diese deine √Ąnderungen.

      Du kannst entweder mit der Holzhammer-Methode ein „!important“ dahinter setzen, oder du versuchst noch einen weiteren div-Container aus deinem Html Code mit in deiner CSS zu verschachteln, so dass deine Anweisung konkreter ist, als die des CSS, dass deine Anweisung √ľberschreibt.

      Ich setze meine Theme-CSS in der Header.php immer gerne vor dem abschlie√üenden -Tag, damit diese nicht von Plugin-CSS √ľberschrieben werden.

      Ich hoffe, dass ich das einigermaßen verständlich beschrieben habe Рwenn nicht, melde dich einfach :-)

      • Wolgang 21. November 2016 um 21:12

        Danke f√ľr Dein Feedback.
        Kannst Du mir ein Beispiel geben? Aisgangspunkt sollte sein, dass mehrere aufeinanderfolgende DIVs jeweils mehrere Klassen innerhalb des jeweiligen DIVs haben. Jetzt habe ich mit dem dev-Tool das Element gefunden das mit einer Klasse geändert werden soll. Wie gehe ich da vor? Beispiel!?

        • coloritas 22. November 2016 um 12:12

          Hallo, so aus der Ferne ist das schwer zu beurteilen Рdas einfachste wäre, wenn du mir mal deine URL schickst Рgerne per Mail an info@coloritas.de. Und welches Element geändert werden soll. Dann kann ich an dem Beispiel konkret zeigen wie es geht.

          Ciao, Mirjam

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich √ľber die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufh√ľbschen k√∂nnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free


  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    N√ľtzliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergr√ľnde, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder sto√üe ich auf interessante Blogs, Webseiten oder B√ľcher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    N√ľtzliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed