Support » Allgemeine Fragen » style-mobile.css

  • Gelöst philipp2208

    (@philipp2208)


    Hallo nochmal,

    ich hab ja bei meiner Seite mit einem Child Theme gearbeitet und würde jetzt ganz gerne die Datei style-mobile.css vom Parent-Theme, die für die CSS Anpassungen auf Smartphones zuständig ist, direkt in meinem Child Theme speichern um besser damit arbeiten zu können. Wenn ich sie jedoch einfach in den Hauptordner des Child-Themes verschiebe, wird sie nicht erkannt. Jemand eine Idee wie das funktionieren könnte?

    danke

    Philipp

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 16 bis 30 (von insgesamt 32)
  • Die Style-Sheets werden jetzt beide geladen – das ist doch schon mal ein Fortschritt. (Du kannst das übrigens auch selber prüfen, wenn du die Entwickler-Tools öffnest und den Quell-Code im Inspektor anschaust – Rechtsklick auf die Webseite > Element untersuchen > Tab Inspektor.)

    Nicht so toll ist, dass das Stylesheet des Parent Theme später geladen wird, als das des Child Themes. Du könntest versuchen, das Parent-Stylesheet als Abhängigkeit des Child-Stylesheet zu definieren:

    wp_enqueue_style( 'mobile-child-style', get_stylesheet_directory_uri() . '/style-mobile.css', array('givingpress-lite-style-mobile-css') );

    (vgl. https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters > $deps).

    Allerdings glaube ich weiterhin, dass du den Sinn von Child-Themes noch nicht ganz verinnerlicht hast: Es geht nicht darum, die Templates oder Child-Themes zu kopieren. Vielmehr solltest du nur den Code im Stylesheet angeben, den du auch wirklich ändern willst. Im Moment lädst du für die Anzeige im Smartphone ein zusätzliches Stylesheet mit 499 Zeilen Code (vom Parent Theme), um es anschließend von einem ebenfalls 499 Zeilen langen Code ersetzen zu lassen, in dem nur ein einziger Wert geändert wurde. Das ist höchst ineffizient. 🙂

    Also ich hab mir das nun zigmal durchgelesen und ärgere mich, hier nicht helfen zu können. Weil ich nicht mehr durchblicke.

    @philipp2208: Ist denn irgendeine funktionsfähige(!) *.css bereits im Child?
    Wenn ja, gib die Stile für mobile Darstellung einfach auch dort dazu.
    Warum (noch?) eine eigene „style-mobile.css“ (nur?) für mobile Endgeräte?
    Oder ist die „style-mobile.css“ die einzige CSS, welche die Stile des Parent CSS überschreiben soll?

    Ich wollte da echt auch mithelfen, nur scheint mir da ein ziemliches Durcheinander mit zu vielen Namen und Dateien zu sein. Eigentlich sollten doch bloß 2 Dateien genannt, referenziert werden: Die *.css des Parent-Themes und die des Child-Themes. Oder?
    Evtl. ein, zwei Schritte zurücktreten und das ganze, so einfach als möglich neu zu denken, neu anfangen?

    @pixolin: Die Kinsta Anleitung scheint mir für Anfänger ungeeignet und unvollständig.
    Man schreibt von einer

    von mir erstellten Funktion namens kinsta_parent_styles()

    , die der Autor aber nie zeigt, erklärt?
    Und:

    die Funktion get_template_directory_directory_uri() ermittelt, wo diese Datei gespeichert

    (wer das „_directory_directory_“ kopiert, naja)

    Da finde ich https://wiki.selfhtml.org/wiki/WordPress/Child_Theme_einrichten einfacher.
    Oder https://die-netzialisten.de/anleitung-childtheme-anlegen-update/ wo später auch auf das (ang. bei vielen *.css nützlichen) de-registrieren eingegangen wird.

    Thread-Starter philipp2208

    (@philipp2208)

    Hi pezi,

    Im Child-Theme befindet sich ganz normal die Datei style.css. Hier kann ich die Regeln des Parent Themes ganz einfach überschreiben. Im Parent Theme ist aber in einem extra CSS-Ordner die Datei style-mobile.css untergebracht, die den CSS-Code für die mobile Version enthält. Um das Theme an eine mobile Umgebung anzupassen, also responsive zu gestalten würde ich gerne die CSS Regeln in der Datei style-mobile.css des Parent Themes überschreiben.

    grüße Philipp

    Thread-Starter philipp2208

    (@philipp2208)

    Hi Bego,

    ich hab das schon verstanden, dass man nur die Regeln ins Child-Theme schreibt, die dann überschrieben werden sollen, aber erstmal muss ich wissen, dass das Zusammenspiel der Dateien so funktioniert, wie es sollte…

    Hallo @philipp2208

    Also es gibt im Child die „style.css„, die brav das tut, was eine Child-CSS tun soll, ok, sehr gut!

    Dann braucht man eigentlich (theoretisch) nur eine Kopie der „style-mobile.css“ ins Child tun und ähnlich wie die „style.css“ referenzieren. (also mit wp_enqueue_style in die sog. Warteschlange stellen)

    Aber: Wie ich schon oben schrieb: Warum überhaupt eine extra CSS fürs mobile? Die (gegenüber dem Parent Stile geänderten) Anweisungen passen doch auch in die eine „style.css“ des Child.
    Überhaupt, wenn es ang. eh nur eine Zeile ist …

    Und: Bitte den letzten Absatz von Bego ernst nehmen!
    Ins Child CSS gehören nur die Stil Anweisungen, welche man echt ändern möchte! Nicht die ganze Datei kopieren und eine Zeile ändern. Nein, es reicht die eine geänderte Zeile, Anweisung.
    Es werden weiterhin beide (Parent und Child) CSS berücksichtigt, nur wird (neue, eigene Zeile) im Child-CSS quasi bevorzugt. Eigentlich überschrei … na egal.

    Um das Theme an eine mobile Umgebung anzupassen, also responsive zu gestalten würde ich gerne die CSS Regeln in der Datei style-mobile.css des Parent Themes überschreiben.

    Wie die Dateien heißen, ist dem Browser für die Umsetzung von CSS-Regeln eigentlich ziemlich egal. Du solltest prima zurecht kommen, wenn du die ergänzende CSS-Regel in das Stylesheet des Child-Theme packst.

    Wichtig ist, welche CSS-Regel zuletzt geladen wird und ob eine Regel spezifischer ist als die andere.

    Nehmen wir an, du hast eine CSS-Regel in der style.css des Parent-Theme, die Schrift im Absätzen grün ausgibt: p { color: green; }.
    Nehmen wir nun an, du hast eine CSS-Regel für mobile Endgeräte (mobile-style.css), die bei einer Bildschirmbreite bis 500 Pixel die Farbe in blau ändert:

    @media screen and (max-width: 500px) {
      p { color: blue; }
    }

    Fügst du dann in die (später geladene) style.css des Child-Theme diese Regel ein: p { color: cyan; }, wird der Text auf größeren Bildschirmen in Cyan ausgegeben (diese Regel lädt später als die Regel des Parent Theme), erscheint auf kleinen Bildschirmen aber weiter in blau (weil die Regel des mobile-style.css spezifischer ist).
    Du kannst jetzt eine weitere Regel

    @media screen and (max-width: 500px) {
      p { color: maroon; }
    }

    in das Stylesheet style.css deines Child Theme schreiben, um die Regel des Parent Theme zu überschreiben. Es ist aber nicht notwendig, ein Stylesheet mobile-style.css auch noch im Child Theme anzulegen und schon gar nicht, den ganzen Code zu wiederholen.

    Bei Child-Themes musst du dich immer fragen: „Was will ich anders haben?“ – und nur das gehört in das Child-Theme rein.

    Thread-Starter philipp2208

    (@philipp2208)

    Ich dachte auch, dass ich die entsprechenden Anweisungen direkt in die style.css Datei des Childs schreiben kann aber leider werden die Anweisungen in der style-mobile.css des Parent-Themes so wie das bei mir aussieht nicht überschrieben.
    Hier nochmal meine functions.php:

    <?php
    function child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'mobile-child-style', get_stylesheet_directory_uri() . '/style-mobile.css');
    wp_enqueue_style( 'mobile-child-style', get_stylesheet_directory_uri() . '/style-mobile.css', array('givingpress-lite-style-mobile-css') );
    //wp_enqueue_style( 'child-print-css', get_stylesheet_directory_uri() . '/print.css');
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_styles' );

    Ändere das mal in

    <?php
    function child_theme_styles() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
      wp_enqueue_style( 'mobile-child-style', get_stylesheet_directory_uri() . '/style-mobile.css', array('givingpress-lite-style-mobile-css') );
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_styles' );

    Und was, wenn man deine Anweisung mal mit !important ein bisschen aufpeppen würde? (hier mehr dazu)

    .featured-pages {
    		padding: 200px 50px 10px !important;
    	}
    Thread-Starter philipp2208

    (@philipp2208)

    Ok. denke mal, ich sollte irgendwie ohne die style-mobile.css Datei im Child Theme auskommen. Richtig? Ich hab jetzt also mal alles was da drin steht gelöscht und einfach die entsprechende CSS-Regel die in der style-mobile.css des Parent Themes überschrieben werden soll in die style.css des Child-Themes geschrieben und important dazu gefügt. In dem Fall also:

    @media only screen and (max-width: 767px)
    body {
    width: 10% !important;
    }

    Leider kein Erfolg! So langsam denke ich, ich sollte vielleicht Feierabend machen und mich die Tage nochmal mit einem frischen Kopf dran setzen:)

    @pezi

    Die Kinsta Anleitung scheint mir für Anfänger ungeeignet und unvollständig.

    Ich fand sie eigentlich sehr umfangreich. Mir ging es aber auch mehr um das Konzept, weniger um Code-Fragmente. Aber so unterschiedlich ist die Wahrnehmen. Die Anleitung von den Netzialisten finde ich aber auch sehr gelungen.

    Und was, wenn man deine Anweisung mal mit !important ein bisschen aufpeppen würde?

    Wenn ich in einem Stylesheet viele Regeln mit !important finde, weiß ich, dass der/die Entwickler:in entweder sehr müde, sehr lustlos oder sehr planlos gewesen sein muss. Solange kein Inline-CSS verwendet wurde, gibt es eigentlich immer eine Möglichkeit, eine andere CSS-Regel zu überschreiben ohne zu diesem letzten Strohhalm zu greifen. Du brauchst nur die Regeln spezifischer zu machen (Star Wars lässt grüßen).
    Das wird übrigens in deiner verlinkten Dokumentation gleich als nächstes ausgeführt: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#.21important_vermeiden

    @media only screen and (max-width: 767px)
    body {
    width: 10% !important;
    }
    

    wolltest du haben. Mit einer zusätzlichen Klammer für die Media-Query würde das auch klappen:

    @media only screen and (max-width: 767px) {
    body {
    width: 10% !important;
    }
    }
    

    Eingetragen hast du dann aber

    @media only screen and (max-width: 767px)
    body {
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        width: 50%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    Da fehlt nicht nur die Klammer für die MediaQuery, sondern du hast auch wieder alle Style-Regeln aus dem Browser kopiert, obwohl du doch nur die Breite ändern wolltest.

    Ja, Bego ok, weisse eh Bescheid – es war eher der Griff nach einem Strohhalm als nach einem Laserschwert 😉
    (Toll ist überhaupt, wenn schon in einem Parent Theme mit !important gearbeitet wird und man das dann überschreiben will. Da bleibt eh nur das tüfteln an noch spezifischeren Anweisungen … (oder !important² 😉 )

    @philipp2208

    Ok. denke mal, ich sollte irgendwie ohne die style-mobile.css Datei im Child Theme auskommen. Richtig?

    Richtig!
    Aber richtig: da fehlen 2 {}

    Feierabend machen und mich die Tage nochmal mit einem frischen Kopf dran setzen:)

    Stimmt!

    Also dann, möge die Nacht mit euch sein …

    Toll ist überhaupt, wenn schon in einem Parent Theme mit !important gearbeitet wird und man das dann überschreiben will.

    In dem Fall dann noch rasch einen Blick in den PHP-Code werfen und dann ganz schnell das Theme wechseln! 😀

    eher der Griff nach einem Strohhalm als nach einem Laserschwert

    Schon klar, manchmal darf es auch „quick & dirty“ sein, aber das wollen wir hier ja nicht unbedingt vermitteln. 🙂

Ansicht von 15 Antworten - 16 bis 30 (von insgesamt 32)
  • Das Thema „style-mobile.css“ ist für neue Antworten geschlossen.