Yaml in phpwcms Multilayouts

[Didl]

ich teste gerade für einen Relaunch mit den CSS-Yaml-Layouts. Funzt auch ganz gut, dank der anwenderfreundlichen Anleitung von Ralph!
Nun habe ich aber die Frage, wie gehe ich vor, wenn ich unterschiedliche Layout-Gerüste für eine Site anwenden will? Z.B. Startseite 3-spaltig mit Header, Spezialseite 2-spaltig ohne... Bei phpwcms pur ist das ja null Problem, dort kann ich ja mehrere CSS-Dateien auswählen in der Vorlage auswählen und einem Layout zuweisen.
Was aber wenn ich Yaml nutzen will. Der Yaml-Builder gibt mir die Vorgaben, bennt aber alle Seiten gleich. Wie und welche Dateien muss ich nun aber umbenennen damit es nicht zur CSS Kollision kommt? und vermutlich bedarf es bei einigen gar keiner Umbenennung oder?
Typo3 hat einen Template-Generator, wie ich auf yaml gelesen habe.
Wie kann man denn in diesem CMS am effektivsten vorgehen?

[santscho]

Das geht eigentlich recht einfach...
-------
Das Layout wird in der CSS-Datei "basemod.css" bestimmt. Folglich brauchst Du für jedes Template eine eigene "basemod.css" (z.B. basemod_2sp.css, basemod_3sp.css, ...)
------
Jetzt duplizierst Du "my_layout.css" 2 mal und benennst diese um: z.B. "my_layout_2sp.css" und "my_layout_3sp.css"
------
Dann öffnest Du z.B. "my_layout_2sp.css" in Deinem CSS-Editor und änderst den Pfad "basemod.css" nach "basemod_2sp.css"
------
In phpwcms duplizierst Du Dein Template und wählst die dazugehörige CSS-Datei aus (z.B. "my_layout_2sp.css" anstelle "my_layout.css").
------
Das wärs dann auch schon ... Neue Templates den Seiten zuweisen.
.......

am html brauchst du in der Regel nichts zu ändern. Die Struktur ist meistens bei allen Varianten gleich. Was Du evtl. noch überprüfen musst: Ob die Templates alle einen unterschiedlichen Browser-Bug-Fix benötigen. Falls Ja: einfach in den "my_layout_xxx.css" zum richtigen Browserfix verlinken.

[santscho]

Übrigens: Das geht auch mit der Inhalts-CSS! So kannst Du total unterschiedliche Formatierungen für den Inhalt Deinem Template zuweisen.

Variante 1:
"content.css" duplizieren, Stile abändern, unter anderem Namen abspeichern (z.B. "content_2.css")
Dann die neue CSS in der "my_layout.css" verlinken (der Link zu "content.css" ersetzen mit "content_2.css").
Natürlich muss man "my_layout.css" unter einem anderen Namen abspeichern und diese neue CSS im Template verlinken.

Variante 2:
Möchtest Du zum Beispiel nur die Titel h1 bis h6 abändern, der Rest bleibt identisch....
"content.css" duplizieren. Stile für h1 bis h6 abändern, Restliche CSS-Stile löschen, unter anderem Namen abspeichern (z.B. "content_2.css").
Dann in der "my_layout.css" direkt NACH/UNTER dem Link zu "content.css" einen Link zu "content_2.css" einfügen.
Natürlich muss man "my_layout.css" unter einem anderen Namen abspeichern und diese neue CSS im Template verlinken.

Dann wird der Browser zuerst die "content.css" einlesen. Danach überschreibt der Browser die h1-h6 Stile aus "content.css" mit den h1-h6 Stilen aus der "content_2.css".


Wichtig bei Variante 2: Alle definierten Atribute eines Stiles aus der ersten Inhalts-CSS werden übernommen und müssen deshalb explizit in der zweiten Inhalts-CSS übersteuert werden.
Beispiel: Stil h1 enthält die Definition "Fett". In der zweiten Inhalts-CSS möchte man den Stil h1 grösser haben aber nicht Fett. Man muss also in der zweiten CSS die Textgrösse anders definieren und den Textstil auf "none" setzen, um die erste CSS-Definition "Fett" zu übersteuern.

h1 (erste CSS) ------> h1 (zweite CSS)--------> Ergebnis
18px -------------------> 22px ---------------------> 22px
fett --------------------> fett + kursiv ------------> fett + kursiv
grün---------------------------------------------------> grün

Klar?

[Jensensen]

oops, ups, falscher fred...

[santscho]

Und noch eine Ergänzung ....

Du kannst natürlich auch mit der basemod.css so umgehen wie mit der content.css, Variante 2. Eine Haupt-Basemod und dann noch 2 zusätzliche nur mit den COL1-COL3 CSS-Stilen.