WordPress Theme AVADA 3.4.3 Teil 2 Child Theme Anpassen
Nachdem wir nun erste Erfahrungen mit dem Theme Avada gesammelt haben, kommen wir nun zu den Style Anpassungen.
In den Einstellungen Design, Theme Options, können alle Grundeinstellungen vorgenommen werden. In der Version 3.4.3 sind die Farbeinstellungen als RGB im HEX Format angegeben. Einige Einstellungen können über die Styles.css im Child Theme nicht überschrieben werden. Da im Styles des Main Theme diese mit der Anweisung !Importend versehen sind, wird die Reihenfolge der Gültigkeit unterbrochen. Die Styles Anweisungen werden in einer festgelegten Reihenfolge geladen. Eine Anweisung in einem später geladenem Style überschreibt eine vorhergehende definition. Dieses kann mit der !Importend Anweisung unterbrochen werden. Ein Zustand kann durch die !Importend Anweisung auch erzwungen werden.
Sortierung nach Ursprung und Priorität
Definitionen in eingebundenen Stylesheets unterschiedlicher Herkunft werden gemäß folgender Reihenfolge absteigender Wichtigkeit sortiert:
Benutzer-Stylesheet mit !important
Autoren-Stylesheet mit !important
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet
Die Basis für die Darstellung bildet das Browser-Stylesheet. Enthält ein Benutzer-Stylesheet jedoch anders lautende Deklarationen, überschreiben diese das Browser-Stylesheet und legen somit die Darstellung einer Seite ohne jedwede autorenseitige Vorschläge fest. Definieren Sie nun im Autoren-Stylesheet Formatierungen, werden diese höher gewichtet als das Benutzer-Stylesheet. Dies gilt allerdings nicht für Angaben in Benutzer-Stylesheets, die mittels nachfolgend beschriebener !important-Regel festgelegt wurden.
Findet ein Browser nun abweichende Wertzuweisungen an dieselben Eigenschaften in Stylesheets unterschiedlichen Ursprungs, wird diejenige angewandt, die im Stylesheet mit der höchsten Wichtigkeit definiert wurde. Die Bearbeitung wird anschließend beim nächsten Element fortgesetzt. Existieren darüber hinaus in Stylesheets gleicher Wichtigkeit mehrere Selektoren, die das aktuelle Element erfassen, wird im nächsten Schritt die Spezifität der Selektoren ermittelt.
Die !important-Regel
Mit !important ausgezeichnete Deklarationen überschreiben gleichlautende ohne diese Kennzeichnung. Der Einsatz ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.
Die Wirkweise der !important-Regel ist das „überbieten“ der CSS-Prioritäten. Mit ! important setzen Sie die höchste Priorität. Die !important-Regel ist Teil des CSS-Standards und damit völlig legitim, sie einzusetzen. Allerdings muss man sich bei dem Einsatz klar vor Augen halten – es ist CSS-Design mit dem Holzhammer. Ist eine CSS-Angabe einmal mit einem ! important versehen, werden Sie sie von einer anderen Stelle aus, mit einer gut geschriebenen Cascade nicht mehr ansprechen können.
Lösungsvorschläge:
Alle ! important Anweisungen aus allen Style.css entfernen. Nachteil: Viel Arbeit, nach einem Update alles wieder weg. Es kommt 933 mal vor!
Nur verwendete ! important Anweisungen aus den Style.css entfernen, die eigene Einstellungen behindern. Nachteil: Änderungen müssen dokumentiert werden, da sie nach einem Update wieder weg sind.
Überzeugen Sie die Entwickler, auf ! important Anweisungen zu verzichten. Nachteil: Vieler Anwender werden Sie verfluchen.
Einstellen der Transparenz.
Durch die Angabe der Farbe in RGB als HEX innerhalb der Themes-Options, fehlt es an Transparenz. Dieses erreichen wir durch die Angabe der Farbe in RGBA in unserem Child Style.css. Das Avade Theme bringt einige Farbfrundeinstellungen mit. Werden diese angepasst, so wird anscheined die Importend Anweisung hinzugefügt. Um dieses zu umgehen, ist der Wert der Farbeinstellung zu löschen. Farbeinstellungen, die nicht in den Theme-Options beeinflusst werden können und auch nicht über das Child-Style.css änderbar sind, weisen im Main Style.css eine !Impotant Anweisung auf. Diese ist einfach zu löschen (Biite Zeile und Anweisung merken) und kann dann durch das Child-Style.css überschrieben werden.
Kontrolle:
Für Browser gibt es CSS Tools. Für Firefox verwende ich Firebug. Das zu untersuchende Element anwählen, im Kontextmenü, Element untersuche auswählen. Die Angezeigten Styles können einfach Ein- oder Ausgeschaltet werden. Das Ursprungsdokument und die Zeilenzahl wird angezeigt.
Die Anweisungen können hier direkt kopiert und in unser Child-Style übernommen werden. Dieses wird dann per FTP auf den Server geladen.