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.
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.
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:
Die CSS-Sprache folgt ganz einfachen Regeln:
Beispiel:
.klasse1 .klasse2 em { … }
kann nicht überschrieben werden durch:
.klasse2 em { … }
auch nicht durch:
.nocheineklasse .klasse2 em { … }
Beispiel – HTML Code:
<div class=“klasse1″>
  <div class=“klasse2″>
     <strong> ….
CSS richtig:
.klasse1 .klasse2 strong { … }
CSS falsch:
.klasse1 strong .klasse2 { … }
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.
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}
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.
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.
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; Â Â Â }Â }
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:
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:
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!
Die Anmeldung ist unverbindlich und kostenlos und kann jederzeit wiederrufen werden.
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 🙂
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….
Wer !important als CSS Methode empfiehlt … ach is egal. Weitermachen.
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 🙂
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.
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 🙂
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!?
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
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
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