1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

CSS Stile des Child Themes werden überschrieben

Dieses Thema im Forum "Design" wurde erstellt von meisterleise, 7. April 2021.

  1. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    194
    Zustimmungen:
    15
    Hallo Kollegen, Ich habe hier eine Testseite aufgebaut mit:
    • WP5.7
    • Elementor 3.1
    • Theme: Hello Elementor
    • Child: Hello EMT child-03
    • Link zur Testseite: LINK
    Nun möchte ich die Schriftformatierungen jedoch nicht über Elementor steuern, sondern per CSS im Child Theme. Die Einträge dort werden jedoch immer wieder von anderen CSS überschrieben. Es funktioniert nur, wenn ich jeder CSS Anweisung ein !important hinzufüge, was ich natürlich vermeiden möchte!

    Beispiel:
    Die H2 habe ich mit color:red · font-size:60px · font-family:courier definiert. Funktioniert alles, da ich überall !important hinzugefügt habe. Die H3 ist genauso formatiert, jedoch ohne !important, weshalb es nicht funktioniert.

    Wie schaffe ich es, dass das CSS des Child Themes die höchste Prioriät hat also als letztes gelesen wird?
     
  2. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.547
    Zustimmungen:
    265
    das liegt daran, dass die elementor css viel genauer definiert: .elementor-90 .elementor-element.elementor-element-2ecf56e .elementor-heading-title

    Edith: hat Elementor nicht eine Einstellung zu Eigenem CSS?
    Elementor Einstellungen > Einstellungen > Eigenes CSS
     
    #2 maxe, 8. April 2021 um 11:14 Uhr
    Zuletzt bearbeitet: 8. April 2021 um 11:27 Uhr
  3. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    194
    Zustimmungen:
    15
    Danke für deinen Hinweis @maxe
    Deiner Meinung nach gibt es also keine Möglichkeit, auf das !important verzichten zu können?
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    8.595
    Zustimmungen:
    979
    Tipp: Schau Dir mal ein paar CSS Grundlagen an, z.B. zum Thema CSS Spezifität (google).
     
  5. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.707
    Zustimmungen:
    401
    Ich bin ja kein Freund von Elementor, daher habe ich auch keinen Erfahrungswert. Du könntest aber einmal versuchen die Priorität beim Laden der style.css im Child auf 99999 zu ändern. Das sollte ausreichen um die CSS Datei garantiert als letzte zu laden.
     
  6. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    194
    Zustimmungen:
    15
    @b3317133 Danke, ich lese bereits fleißig! ;)

    @mensmaximus Genau nach soetwas suche ich schon seit Tagen! Aber wie erstellt man so eine Prioriät? Bzw. wonach muss ich im web suchen, um da weiterzukommen?
     
  7. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.547
    Zustimmungen:
    265
    i.d.R. machst du das doch über die functions.php deines Childs:
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Beim add_action() dann die Prio angeben.
     
  8. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    8.595
    Zustimmungen:
    979
    Um CSS zu überlagen, verwendet man spezifischere Selektoren.

    An der Ladereihenfolge der Dateien von Theme oder Plugins sollte man nicht herumbasteln, das führt wegen ggf. vorhandenen Abhängigkeiten dann ggf. zu Chaos in Minify Plugins oder auch zu FOUC Effekten usw.
     
  9. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.547
    Zustimmungen:
    265
    Mit Elementor hat man dann aber ein Problem, da Elementor für jedes Element eine eigene css-class (data-id) angibt. Eine allgemeine Formatierung für z.B. H3 ist dann eben schlecht möglich.
     
  10. meisterleise

    meisterleise Well-Known Member

    Registriert seit:
    18. Januar 2012
    Beiträge:
    194
    Zustimmungen:
    15
    Genau! Darüber habe ich auch schon diverses gelesen. Bisher hat aber keiner der vielen Versuche gefruchtet. Das Problem ist, dass ich dann nie weiß, ob ich was falsch mache oder ob es grundstäzlich nicht geht, weil ich von PHP nun wirklich nichts verstehe, außer das bisschen, was man aus dem Lesen des Codes erahnen kann.
    Der gesamte Code oberhalb von "add-action()" ließe sich aber genau so übernehmen oder muss ich dort etwas anpassen?
     
  11. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    8.595
    Zustimmungen:
    979
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden