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/…-theme-stylecss gefunden:
-------------------------------------------------
Hi,
Create functions.php in your child theme. Inside that add these code

[COLOR=#0000cd]<?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);
?>
[/COLOR]
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... :confused:

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
[COLOR=#0000cd] .menu-toggle:before {
content: url('../images/menu.png');
}[/COLOR]
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:
[COLOR=#0000cd].menu-toggle:before {
content: url([/COLOR][COLOR=#0000cd]http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png[/COLOR][COLOR=#0000cd]);
}
[/COLOR]
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

Zitat von MegaWork

Wenn Du nur einige der Anweisungen anpassen musst, dann schreibst Du NUR diese in Deine child-style.css damit die entsprechenden Anweisungen aus der main.css überschrieben werden.

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:
[COLOR=#0000cd].menu-toggle:before {
content: url('../images/menu.png');
height: 0px;
width: 0px;
margin-right: 20px;
position: relative;
top: 10px;
} [/COLOR]

child-style.css:
[COLOR=#0000cd].menu-toggle:before {
[COLOR=#0000cd]content: url([/COLOR][COLOR=#0000cd]http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png[/COLOR][COLOR=#0000cd]);
[/COLOR][/COLOR][COLOR=#0000cd] color: #ffffff;
}
[/COLOR]
Wie funktioniert das Überschreiben?
Was ist, wenn in der main.css der style
[COLOR=#0000cd]#nav-wrapper {
width: 1100px;
margin: auto;
text-align: center;
margin-top: 100px;
}[/COLOR]
und in der child-style.css so definiert ist?
[COLOR=#0000cd]#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;
}
[/COLOR]
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:
[COLOR=#008000]"Einbinden meiner child-style.css mittels eigener functions.php"[/COLOR]
+
[COLOR=#008000]"Was passiert dann im Detail mit meiner main.css"[/COLOR]
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.
+
[COLOR=#008000]Deiner Antwort:[/COLOR]

Zitat von MegaWork

Um sicherzugehen, dass die CSS des Child Themes die Einstellungen der main.css überschreibt, schau Dir im Quelltext der Seite die Reihenfolge an, in der die CSS Dateien aufgerufen werden. Es werden immer die vorher geladenen Stylesheets überschrieben. Wenn also die main.css vor der style.css geladen wird gibt es kein Problem - anderenfalls musst Du mit wp_enqueue_style (siehe weiter oben) eine gesonderte Stylesheet Datei laden und zwar in Abhängikeit des main.css.

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

Meine functions.php im child-theme:
[COLOR=#0000ff]<?php
function call_my_class() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri()."/mobilchild-main.css" );
}[/COLOR]
[COLOR=#0000ff] add_action( 'wp_enqueue_scripts', 'call_my_class',999);
?>
[/COLOR]
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. :confused:

Herzliche Grüße aus dem verregneten Norden

Hallo MegaWork,

Zitat von MegaWork

Ich befürchte, das Problem sitzt noch tiefer - nämlich bereits beim Grundverständniss von CSS. Hierfür würde ich Dir das Buch "Praxis CSS" von Kai Laborenz
empfehlen.

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. :-)

Zitat von MegaWork

Also, ich versuche jetzt noch einmal das verständlich zu erklären:
Stylesheets werden sequentiell abgearbeitet, d.h. das Stylesheet, welches zuerst geladen wird wird auch zuerst ausgeführt - ergo überschreiben die Anweisungen der später geladenen Stylesheets die zuvor geladenen Anweisungen. Die Reihenfolge der Anweisungen in Deiner child-style.css ist unabhängig von der Reihenfolge in der main.css - Du musst nur sicherstellen, dass die child-style.css NACH der main.css ausgeführt wird.
Die Reihenfolge der Anweisungen innerhalb der child-style.css ist hingegen nicht egal, da auch diese Datei der Reihe nach (von oben nach unten) abgearbeitet wird.
Attribute, die in der main.css aufgeführt sind aber nicht in der child-style.css werden NATÜRLICH ausgeführt - denn, sie werden ja nicht überschrieben! Wenn Du diese Attribute nicht haben willst, musst Du Sie auschalten (manche mit none, andere mit hidden und wieder andere mit 0 - das hängt immer davon ab um welches Attribut es sich handelt)!

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.

Zitat von MegaWork

Auf die "999" kannst Du getrost verzichten, wenn Du das stylesheet richtig einbindest:

PHP

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

Dieses snippet in der functions.php des child themes sollte das an die richtige Stelle setzen.

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.

Zitat von MegaWork

Ich kenne einen Haufen guten Bücher zu all den betroffenen Themen: HTML, CSS, PHP, MySQL & Wordpress.
Zu welchem Thema genau hättest Du denn gerne etwas?
WordPress Theme Entwicklung - arbeite dieses Tutorial ab: How To Make a WordPress Theme
HTML & CSS: Dazu findest Du hier eine große Auswahl, die unterschiedliche Wissenstände bedient

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. :D

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