YAMLit - Mehrere Templates nutzen

[Rainer G]

Ich bin gerade dabei, an einem Design zu feilen, dass aus einem 2-spaltigen und einem 3-spaltigen Template besteht.

Gem. dem YAMLit-Tutorial habe ich die CSS-Dateien entsprechend umbenannt (hinten mit einem _2sp bzw. _3sp versehen). Grundsätzlich unterscheiden sich diese beiden Templates nur in der Anzahl der Spalten. Auch habe ich die beiden Unterordner screen und patches in screen_2sp bzw. screen_3sp und patches_2sp und patches_3sp angepasst (einmal natürlich kopiert).

Was spricht eigentlich dagegen, für beide Templates den gleichen patches-Ordner zu verwenden?

Auch müsste es doch eigentlich klappen, nur einen screen-Ordner zu nutzen. Dort dann mit einer basemod_2sp und einer basemod_3sp. Damit könnte ich prima auf die dann gemeinsame content.css zugreifen.

Oder habe ich da etwas nicht beachtet?

Ach so! YAMLit ist super! Mal ein großes DANKE weiterreich an Santscho!

[santscho]

Wo Du schlussendlich Deine CSS-Dateien gespeichert hast, bleibt Dir überlassen. Wichtig ist einfach, dass ausgehend von der "my_layout.css" alle Dateien richtig miteinander verknüpft sind. Und wenn die Patch-Dateien für beide Templates gleich sind, spricht nichts dagegen, für beide Templates die selbe CSS zu verwenden. Einfach die beiden "patch_my_layout.css" öffnen und schauen, ob diese den selben Inhalt haben.

Im Tutorial bin ich von zwei grundsätzlich verschiedenen Templates ausgegangen, deshalb die strikte Trennung.

Falls nur die basemod.css ändert, kannst Du diese im selben Screen-Ordner haben wie die erste basemod.css. Einfach umbenennen (basemod_template2.css) und in "my_layout_template_2.css" verknüpfen. Natürlich darauf achten, dass (falls verschieden) die Bilder im Ordner "Screen/Images" nicht überschrieben werden. Ansonsten einfach ein Ordner "Images_template_2" erstellen und dann halt die neue "basemod.css" mit Bilder aus diesem Verzeichnis bestücken.

[Rainer G]

Ich hab mir die Sache jetzt etwas genauer angeschaut.

Da ich ein 2-spaltiges und ein 3-spaltiges Design habe, sind auch die patch_my_layout.css unterschiedlich. Diese werden aber von den HTMLs bzw. den entsprechenden Templates in phpwcms aufgerufen und damit eindeutig zugeordnet werden.

In der my_layout_2sp.css und der my_layout_3sp.css spreche ich dann die jeweilige basemod.css an (also basemod_2sp.css und basemod_3sp.css), beide zusammen im screen-Ordner. Die verwendete content.css die dann die selbe Datei. Wobei ich ggf. Die beiden Basemod-Dateien sind zum größten Teil auch gleich, daher überlege ich, ob ich hier entsprechend aufteile und nur die voneinander abweichenden Teile separat halte. Hierzu brauche ich dann nur die my_layout-Dateien entsprechend um eine Zeile jeweils erweitern.

Je mehr ich mich mit dem Thema beschäftige, desto besser komme ich damit zurecht. Anfangs habe ich ein wenig wie der Ochs vorm Tor gestanden .

[santscho]

Solange schlussendlich alle vom Layout/phpwcms benötigten "Styles" in der richtigen Reihenfolge geladen werden, spielt es keine Rolle, wo diese Styles gespeichert sind.
Vorsicht ist geboten, wenn Du nicht der alleinige Verantwortliche für die Templates bist. Daher empfehle ich, Schritte, welche nicht so einfach nachvollziehbar sind, zu dokumentieren. Auch Vor- und Nachteile müssen Dir klar sein:

Vorteil gemeinsamer CSS-Styles für unterschiedliche Templates:
- Erleichtert das gleichzeitige Abändern gemeinsamer Eigenschaften.
- Vereinheitlichung

Nachteil gemeinsamer CSS-Styles für unterschiedliche Templates:
- z.T. Schlechtere Übericht
- Die zuletzt geladenen CSS-Stile müssen mit speziell beachtet werden, da sie folgende Eigenschaften aufweisen: 1. Teilen dem Element neue Eigenschaften zu. 2. Überschreiben Eigenschaften des Elementes. 3. Deaktivieren Eigenschaften des Elementes (z.B. mit "none"). Da passieren häufig fehler
- Änderungen im ersten Template haben vielleicht ungewollte Auswirkungen im zweiten Template.

[Rainer G]

So, jetzt will ich meine erstellten Templates in phpwcms überführen.

Was mir auffällt, bei der Ansicht auf meinem Rechner, dass die my_layout.html's die Umlaute mit rauteförmigen Fragezeichen füllt. Wo hakelt es da? Weiß da jemand Rat?

Eine andere Frage ist: Benötige ich noch die frontend.css (oder Teile) oder stört diese sogar eher?

[santscho]

Fragezeichen: Das könnte ein Zeichenkodierungs-Konflikt sein. Welche Kodierung hast Du angewendet?
-----
Frontend.css: Enthält teils CSS-Schnipsel, die von Contentparts oder anderen Ausgaben von phpwcms benötigt werden. Um Konflikte mit dem YAML-Framework zu vermeiden, solltest Du folgende CSS aus der frontend löschen:

- body
- form, div, p, h1, h2, h3, h4, h5, h6
- td, th, p, div, span
- a, a:link, a:visited, a:active, a:focus
- a:hover
- h1, h2, h3, h4, h5, h6

Unnötig sind auch die CSS für das DIV pagelayout:
- #container
- #headerBlock
- #mainBlock
- #leftBlock
- #rightBlock
- #footerBlock

Wie ich es mache: Ich lösche jeweils die CSS, welche ich nicht benötige aus der frontend.css. Die Datei selbst bennene ich um (phpwcms.css), verschiebe sie in den Ordner "Screen" und binde sie in die "my_layout.css" ein. In phpwcms.css speichere ich CSS der phpwcms-Templates ab (z.B. captions, sitemaps, fileselector, teaser, article listings,....). Für was die jeweiligen CSS-Schnipsel sind, schreibe ich in einem anführenden Komentar:

Code: Select all

/*CP Teaser/Artikellink. Template "quicknavigation.tmpl"
 */

[Rainer G]

Das mit den Zeichen ist anscheinend nur bei lokaler Ausgabe. Online ist das mit den Umlauten in Ordnung.

Die CSS-Dateien hab ich gem. deiner Tipps angepasst. Großes DANKE!

Ein Problem hab ich aber mit der Formatierung! Ich gebe einen CP in die linke (YAML)Spalte aus. Dieser CP ist Bild Special (weil ich dort mit dem Bild ein link verknüpfne kann). Ich sage 'horizontal' zentrieren, trotzdem wird das Bild linksbündig ausgegeben.

MAch ich da was falsch?

[santscho]

Ich sage 'horizontal' zentrieren, trotzdem wird das Bild linksbündig ausgegeben

Ich habe den "Bilder Spezial" CP ehrlich gesagt noch nie angerührt.

Zur Verknüpfung: Kannst auch im CP "Bilder" einen Link angeben. Einfach unter "Bildunterzeile" eingeben:

Code: Select all

||http://www.meinezieladresse _blank

Santscho

[flip-flop]

Im Bilder special musst du das zugehörige Template bearbeiten. (Die Listenvoreinstellungen funktionieren hier nicht, da eigene Templates erstellt werden können).
/template/inc_cntpart/imagespecial/*
Hier ein neues Template anlegen und einbinden.

Knut

[Rainer G]

Ich sage 'horizontal' zentrieren, trotzdem wird das Bild linksbündig ausgegeben

Ich habe den "Bilder Spezial" CP ehrlich gesagt noch nie angerührt.

Zur Verknüpfung: Kannst auch im CP "Bilder" einen Link angeben. Einfach unter "Bildunterzeile" eingeben:

Code: Select all

||http://www.meinezieladresse _blank

Santscho

Danke für den Tipp. Aber hier habe ich überhaupt keine Chance zum Zentrieren!

[Rainer G]

Im Bilder special musst du dass zugehörige Template bearbeiten. (Die Listenvoreinstellungen funktionieren hier nicht, das eigene Templates erstellt werden können).
/template/inc_cntpart/imagespecial/*
Hier ein neues Template anlegen und einbinden.

Knut

Das habe ich jetzt getan.

Habe folgendes im Template angepasst/eingebunden:

[TITLE]<div align="center"><h1>{TITLE}</h1></div>[/TITLE]

und:

<div align="center" class="slider" id="slider_container_{ID}">

Und jetzt klapp's auch mit der Nach... äh mit dem Zentrieren.