CSS anpassen – 6 Tipps, wenn eure CSS Änderungen nicht greifen

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:

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:

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.

Kommentare

1. Birgit 23. August 2015 um 0:11 Uhr

   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 🙂

   Antworten
   • Mirjam 23. August 2015 um 15:08 Uhr

     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….

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

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

   Antworten
   • coloritas 26. Januar 2016 um 13:50 Uhr

     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 🙂

     Antworten
3. Wolgang 20. November 2016 um 11:56 Uhr

   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.

   Antworten
   • coloritas 21. November 2016 um 10:41 Uhr

     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 🙂

     Antworten
     • Wolgang 21. November 2016 um 21:12 Uhr

       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!?

       Antworten
       • coloritas 22. November 2016 um 12:12 Uhr

         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

         Antworten
4. Burkhard 25. November 2017 um 15:30 Uhr

   Hallo,
   ich habe ein Problem mit einer alten Website mit CSS, die ich auf Freundschaftsbasis betreue. Bisher ging es immer nur um Änderung auf den Einzelnen Untzerseiten. Jetzt soll aber ein Bild aus dem Header ausgetauscht werden, wenn ich das aber mache, bekomme ich zwar die Änderung hin, dann verschwinden aber die Inhalte aller Untersieten und ich bekomme online nur noch den Headrer zu sehen.
   Könntet ihr mir da einen Tipp geben?

   Danke schön
   Burkhard

   Antworten
   • coloritas 8. Dezember 2017 um 13:14 Uhr

     Hallo,

     ohne den link kann ich da nichts sagen.
     Der Austausch eines Bildes wird nicht zwangsläufig über die CSS, sondern oft auch per Html gesteuert.
     Und ich vermute mal, dass dann im QUellcode ein Tag nicht richtig geschlossen wurde und dadurch der ganze Rest nicht eingeblendet wird.

     Viele Grüße
     Mirjam

     Antworten

Das könnte dich auch interessieren: