child-theme main.css/style.css Priorität?

Moin Moin,

ich erstelle eine Multi-Site mit WP 3.9.2 und "sixteen" (responsive design und von mir mittlerweile auf onepage-design modifiziert). Ich habe alle notwendigen css-Anpassungen sowohl in der main.css als auch in der style.css vorgenommen, weil ich mir keine Gedanken darüber gemacht hatte, was passiert, wenn ein Update kommt.

Nach einem erfolgten Update war alles weg. Habe es aber mit Hilfe der alten main.css und style.css wieder "repariert".

Nun habe ich ein child-theme konfiguriert und die notwendigen css-Anpassungen sowohl in der main.css (sixteen) als auch in der style.css (child) vorgenommen. Hilft mir bei einem Update wahrscheinlich auch nicht weiter, weil ich weiterhin mit der main.css des Hauptthemes arbeite....

Wie kann ich das in Zukunft verhindern?
Im Forum habe ich gefunden:
Beispiel:
. Site-Header { Color: # FFOODD ! important ; } Das bewirkt das die Zeile nicht bei Aktualisierung überschrieben wird.

Aber das reicht mir nicht. Ich möchte eine saubere Trennung.

Ich habe probiert, die styles der main.css in der style.css (child) neu zu definieren. Aber es funktioniert nicht. Es zeigt weiterhin die Formatierung der main.css (sixteen).

Hat eine der css-Dateien Priorität? Muss ich alle Formatierungen in der style.css (child) zusammenfassen? Wenn ja, füge ich erst die main.css-Formatierungen ein und unten drunter die auch vorhandenen style.css-Formatierungen des Hauptthemes? oder umgekehrt?

Oder kann ich die main.css auch in das child übernehmen, im kompletten Ordner "css"?

In meinen Büchern und im Internet habe ich immer nur gefunden, dass man im child eine style.css hat und die jeweiligen .php-Dateien, die man angepasst hat.

Mein Wunsch wäre: Haupttheme "sixteen" bleibt komplett im Original erhalten. Alle notwendigen Änderungen der Styles und .php-Dateien erfolgen im child-theme.

Kann mir jemand helfen?

Sonnige Grüße aus der Nordsee

 

Hallo pixselig, hallo MegaWork,

danke für Eure schnellen Antworten. Bei mir hat es nun leider etwas gedauert.

@pixselig, Dein Vorschlag hat leider nicht gegriffen, weil die style-Vorgaben aus der main.css alles überschrieben haben.

@MegaWork, ich bin noch zu unerfahren mit php-Programmierung und den ganzen Hintergrundabläufen bei WordPress. Ich hatte angefangen, Deinen Vorschlag umzusetzen, bin aber gescheitert. Habe dann versucht, mir die ganze Logik anzulesen.

Nun habe ich folgendes auf https://wordpress.org/support/topic/maincss-overrides-child-theme-stylecss gefunden:
-------------------------------------------------
Hi,
Create functions.php in your child theme. Inside that add these code

<?php
function call_my_class() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri
()."/child-style.css" );
}
add_action( 'wp_enqueue_scripts', 'call_my_class',999);
?>

Then, create a file named "child-style.css" in your child theme. So, in future any style created inside child-style.css will help you override main.css styles from the child theme.
---------------------------------------

Ich habe beide Dateien angelegt und in die "child-style.css" die komplette angepasste "main.css" des parent-theme kopiert. Es funktioniert.

Zusammenfassung meiner jetzigen Installation:
* parent-theme "sixteen" in Original
* child mit obiger functions.php, child-style.css, style.css und einigen angepassten anderen php-Dateien.

Allerdings habe ich noch nicht getestet, was bei einem update passiert.

Außerdem ist mir überhaupt nicht klar, was nun im Detail passiert.
Wird in Zukunft die theme-main.css aufgerufen und nur die veränderten styles aus child-style.css überschrieben?
Oder wird die komplette theme-main.css aufgerufen und dann mit der kompletten child-style.css überschrieben?
Oder gibt es noch eine ganz andere Möglichkeit?

@MegaWork, habe ich Dich richtig verstanden, Du schlägst zwei Varianten vor:
1.
das mit dem de-registrieren der main.css ist für den Fall, dass unbedingt die eigne main.css verwendet werden soll. es macht nämlich keinen Sinn erst einmal eine CSS Datei vollständig zu laden, sie dann noch einmal zu laden und die erste zu überschreiben.

Ist das das, was ich jetzt mache, nur, dass ich die main.css nicht de-registriere? Und damit schlechte Performance?

2.
Ausserdem habe ich ja auch geschrieben, dass ich nur die geänderten Regeln in eine eigene CSS Datei legen würde.

Wäre das der Fall, wenn ich nur die geänderten main.css-Regeln in meiner child-style.css speichern würde? Und das de-registrieren ebenfalls wegließe? Oder auch in diesem Fall de-registrieren der main.css? Fände ich aber unlogisch.

Uff...

LG
KuniT

 

Hallo MegaWork,

ich dachte, ich hätte es verstanden....

Ich habe heute Morgen eine Site neu installiert, um mir Schritt für Schritt alles aufzuschreiben und dann die Updates zu überprüfen (Layout und Funktion). Da ich diese Site schon fertig hatte (Layout) dachte ich, dass es ja kein Problem wäre, sie jetzt noch einmal in einer Testumgebung sauber aufzubauen, um sie dann "ganz schnell" auf die echte Domain zu übertragen.

Nun sitze ich seit Stunden und komme nicht weiter:
Installation wie bereits oben beschrieben. Aber Layout haut an einer Stelle nicht mehr hin. Es hängt irgendwie mit dem style
.menu-toggle:before {
content: url('../images/menu.png');
}
zusammen.

Wenn ich wie früher meine veränderte main.css im Parent-Theme speicher, ist das Layout ok.
Wenn ich aber das Parent-Theme im Original lasse und stattdessen die o.g. functions.php + child-style.css installiere, wird statt des images ein Platzhalter angezeigt. So weit, so gut. Ich habe also in der child-style.css den style geändert:
.menu-toggle:before {
content: url(http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png);
}

Nun wird das image richtig angezeigt, auch richtig positioniert - aber zusätzlich ist weiterhin der umrahmte Platzhalter zu sehen. Wenn ich nun meine veränderte main.css wieder zusätzlich im Parent-Theme speicher, ist das Layout ok.

Da Du geschrieben hast

habe ich nur die beiden ergänzenden Zeilen in meine child-style.css (ansonsten komplette veränderte alte main.css) geschrieben und sonst alles in der main.css gelassen:

main.css:
.menu-toggle:before {
content: url('../images/menu.png');
height: 0px;
width: 0px;
margin-right: 20px;
position: relative;
top: 10px;
}

child-style.css:
.menu-toggle:before {
content: url(http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png);
color: #ffffff;
}

Wie funktioniert das Überschreiben?
Was ist, wenn in der main.css der style
#nav-wrapper {
width: 1100px;
margin: auto;
text-align: center;
margin-top: 100px;
}
und in der child-style.css so definiert ist?
#nav-wrapper {
width: 100%;
height: 100px; /* von mir eingefügt */
text-align: center;
margin: 0px auto 0px auto;
position: fixed;
background-color: #000000;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}

Was passiert in diesem Fall mit "margin-top" aus der main.css?
Oder erkennt das Programm "#nav-wrapper" in der child-style.css und bügelt damit alles - was in "#nav-wrapper" der main.css geschrieben steht - über?

Mittlerweile qualmt mir total der Kopf. Ich werde nun meine child-style.css so weit abspecken, dass nur noch die veränderten styles erhalten bleiben...

Oder liegt es an ganz was anderen?

Verregnete Grüße aus dem hohen Norden in den tiefsten Süden
KuniT

 

Hallo MegaWork,

vielen Dank für Deine Geduld.

Mein Hauptproblem ist, dass ich die Logik des gesamten Vorgangs noch nicht verstanden habe:
"Einbinden meiner child-style.css mittels eigener functions.php"
+
"Was passiert dann im Detail mit meiner main.css"
z.B.
* bei Änderung der Reihenfolge meiner Anweisungen in meiner child-style.css gegenüber denen in der main.css
* wenn ich in meiner child-style.css bei einigen Elementen Attribute weglasse, die aber in der main.css aufgeführt sind.
+
Deiner Antwort:

Meinst Du die functions.php? Die im parent-theme hat 217 Zeilen. In Zeile 126 steht dieser Befehl
wp_enqueue_style( 'sixteen-main-style', get_template_directory_uri()."/css/main.css", array('sixteen-fonts','sixteen-layout') );
wegen der Zeilenflut habe ich sie nicht komplett hierher kopiert.

Meine functions.php im child-theme:
<?php
function call_my_class() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri()."/mobilchild-main.css" );
}
add_action( 'wp_enqueue_scripts', 'call_my_class',999);
?>

Ich dachte, mit "999" hätte ich gesagt, dass die main.css überschrieben werden soll. Ansonsten weiß ich nicht wie ich es machen soll.

Kennst Du ein gutes Buch oder eine andere gute Dokumentation/Handbuch, was auch immer?

----------------------------------------------------

Es geht um das Layout meines primary menu. Die Site ist responsive design, trotzdem soll aber bei allen Bildschirmgrößen links in der Ecke das Menü-Symbol für Smartphones angezeigt werden. Beim draufklicken dann die Menü-Punkte.

Ich habe mittlerweile alles durch:

1.) main.css im Parent-Theme angepasst, keine functions.php + child-style.css im child-theme (1. Versuch) => Optik so, wie sie soll

2.) main.css im Parent-Theme Original, functions.php + child-style.css (= komplette angepasste main.css aus 1.)) => image vorhanden, aber zusätzlicher Platzhalter (woher auch immer, wahrscheinlich Menü). Beim draufklicken ist angezeigtes Menü verschoben, der Platzhalter größer und verschoben.

3.) main.css im Parent-Theme Original, functions.php + child-style.css (nur noch styles, die von Original abweichen) => image vorhanden, aber zusätzlicher Platzhalter (woher auch immer, wahrscheinlich Menü). Beim draufklicken ist angezeigtes Menü verschoben, der Platzhalter größer und verschoben. Responsive funtioniert nicht mehr.

Ich habe bei 1.) die Reihenfolge der Element-Definitionen geändert, gegenüber der Original-main.css. Wie wird das bei 2.) berücksichtigt? Wird es überhaupt berücksichtigt?
Und damit sind wir wieder bei meinem Hauptproblem: Ich habe die Logik des gesamten Vorgangs noch nicht verstanden.

Herzliche Grüße aus dem verregneten Norden

 

Hallo MegaWork,

Ich denke, 15 Jahre "Programmierung" von statischen Websites mittels HTML + CSS (W3C-Standard-konform) dürften mir ein gewisses Grundverständnis für CSS vermittelt haben. Aber auch weitere 15 Jahre würden mir nix nützen, wenn ich (wie ich bereits geschrieben habe) noch total unerfahren mit php und den Hintergrundabläufen bei WordPress bin.

Ich werde meine Frage noch einmal detaillierter formulieren und unter einem neuen Titel ins Forum stellen. Vielleicht sehe ich ja auch gerade nur den Wald vor lauter Bäumen nicht.

Trotzdem haben mich Deine Antworten ans Ziel gebracht. Vielen Dank. Es läuft: Original + child sind sauber getrennt und auch die beiden Updates (WP auf 4.0 und Theme "sixteen" auf 1.3.0.3) haben meinem Layout nix getan.

Diese Beschreibung hat mich auf den Weg gebracht. Danke. Wobei es für meine Site nicht zutrifft, dass ich in meiner child-style.css NUR die veränderten Styles aufführe. Für das Menü muss ich einige der bereits in der main.css unverändert definierten Anweisungen noch einmal nennen, sonst funktioniert es nicht. Das musste ich Zeile für Zeile im Vergleich main.css/child-style.css testen.

Dieser Code funktioniert bei meiner Site nicht. Das Menü wird nicht angezeigt. Meine functions.php im child-theme besteht nur aus dem Code, den ich bereits weiter oben genannt hatte. Das funktioniert. Wie ich jetzt im Internet gefunden habe, bedeutet die "999" sinngemäß, dass diese Funktion als letzte ausgeführt und damit auf jeden Fall die main.css vor der child-style.css geladen wird.

Danke. Ich denke, rund um das Thema "How To Make a WordPress Theme" muss ich einfach immer weiter schauen. Ich habe die beiden Bücher aus dem Franzis-Verlag "Das WordPress Praxishandbuch" und "WordPress-Themes entwickeln". Die sind echt gut, gehen aber leider nicht so weit in die Tiefe, wie ich es brauche.

Noch einmal vielen Dank.

Stürmische + sonnige Grüße aus der Nordsee
KuniT