Variationen der RW-Vorlagen erstellen/ändern

Die lange Pause in diesem Weblog soll jetzt beendet sein.
Für die Behandlung einigen gefragten Projekte (Implementierung eines Forums – phpBB, vBulletin, Shop – GambioGX, Update der WebYep-Accordion Zusammensetzung) müsste ich immer wieder einen wichtigen Punkt (meiner Meinung nach) erklären. Damit ich diesen Punkt nicht jedesmal in den Erklärungen behandele, würde ich hier über die Variationen der RW-Vorlagen schreiben. Wo sie sich befinden, welche Dateien beteiligen sich, wie sie verändert werden können, wie kann man neue einfügen.
Ich werde das alles mit der Hilfe der Caribou Vorlage versuchen.
Zuerst aber eine Kopie der Vorlage erstellen.
Die Stile dieser Vorlage in Page Inspector würden etwa so aussehen:
wp-caribou-01
1. Neue Varianten dieser Vorlage einfügen
1.1 Eine Gruppe für die Varianten erstellen
Die Datei theme.plist der Vorlage mit einem Texteditor und an dem Ende des Content Colour Bereich scrollen:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

Dieser Bereich endet mit dem Tag

</dict>

Nach diesem Endtag den Code für eine neue Variantengruppe der Vorlage einfügen:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
			<dict>
				<key>GroupMembers</key>
				<array>

				</array>
				<key>GroupName</key>
				<string>[+] Zusatzeinstellungen</string>
				<key>GroupSelectionLimit</key>
				<integer>0</integer>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

Dadurch wird in das Fenster Stile der Vorlage erstmal eine neue Gruppe eingefügt:
wp-caribou-02
Bitte aus dem Vergleich des Codes und des Bildes die Zusammenhänge erstellen: Der Name dieser Gruppe steht in

<string>[+] Zusatzeinstellungen</string>

1.2 Eine Variante in dieser Gruppe erstellen
Die Varianten der Vorlage benutzen immer eine CSS Datei die meistens in dem Ordner css der Vorlage sich befindet. Dieser Ordner beinhaltet auch andere Ordner wo die CSS Dateien gruppiert sich befinden, aber das System dieser Gruppierung legt der fest.
Das Programm kennt den Pfad diesen Dateien, und benutzt ihn, weil diese Dateien in der theme.plist Datei angegeben sind.
Die Vorlage soll also eine Variante die den Text in dem Content in Blocksatz darstellt.
Zuerst in dem Ordner css der Vorlage einen Ordner zusatz erstellen. Dann mit einem Texteditor eine Datei mit diesem Code erstellen:

#contentContainer #content {
	text-align: justify;
}

und als content-blocksatz.css in dem Ordner zusatz speichern:
wp-caribou-03
Jetzt muss diese CSS Datei in der theme.plist Datei angemeldet werden:

				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>
			<dict>
				<key>GroupMembers</key>
				<array>
					<dict>
						<key>Enabled</key>
						<false/>
						<key>Files</key>
						<array>
							<string>css/zusatz/content-blocksatz.css</string>
						</array>
						<key>Name</key>
						<string>Inhalt aus dem Content als Blocksatz</string>
						<key>Type</key>
						<string>Stylesheet</string>
					</dict>
				</array>
				<key>GroupName</key>
				<string>[+] Zusatzeinstellungen</string>
				<key>GroupSelectionLimit</key>
				<integer>0</integer>
			</dict>
		</array>
	</dict>
	<key>RWTemplateHTML</key>
	<string>index.html</string>

mit dem Ergebnis:
wp-caribou-04
Wenn so eine Variante standardmäßig aktiviert werden soll, muss man den Code ändern in:

						<key>Enabled</key>
						<true/>

Ich habe diese Variante als Auswahlbox und nicht als Radiobutton erstellt weil die Radiobuttons als “entweder … oder” funktionieren während die Auswahlbox Möglichkeiten dem Muster “sowohl … als auch” anbieten.

Eine Gruppe mit Radiobutton-Varianten muss den Code:

				<key>GroupSelectionLimit</key>
				<integer>1</integer>

haben wie z.B. die Banner Design Gruppe.

2. Farbe bestimmten Elementen zuweisen
Bestimmte Bereiche kann man durch einem Farbwähler die Standardfarbe ändern.
Diese Bereiche müssen ein Tag-Wort bekommen damit die Farbe in der Variante der Datei colourtag.css (die für jede Seite oder für jeden gespeicherten Stil erstellt wird) geändert wird.
Die Caribou Vorlage benutzt für den Hintergrund des Footers schon ein Farbwähler aber nicht für den Text des Footers. Dieser Text hat zwar einen Schatten, aber er ist immer weiss. Würde man den Hintergrund auch weiss stellen, sieht man in diesem Bereich nur den Schatten.
Deswegen soll dieser Bereich auch einen Farbwähler bekommen, so wie Main Text, Sidebar Headings, Sidebar Text etc.
Dem Tag-Wort für solche Bereiche muss ein % Zeichen davor und danach eingefügt, und natürlich muss dieses Tag-Wort nicht identisch mit einem das für andere Bereiche auch benutzt wird.
Die Vorlage Caribou benutzt für den Hintergrund des Footers das Tag-Wort:

%colour_footer_bg%

Es würde sich anbieten für den Text dieses Bereiches das Tag-Wort:

%colour_footer%

zu benutzen.
2.1 Einen neuen Farbwähler für ein Element einfügen
Zuerst, in der theme.plist Datei hinter dem Farbwähler für die Links aus der Content Colour Gruppe

					<dict>
						<key>DefaultColour</key>
						<string>#656565</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Links</string>
							<key>en</key>
							<string>Links</string>
							<key>fr</key>
							<string>Links</string>
							<key>it</key>
							<string>Links</string>
							<key>ja</key>
							<string>Links</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_tags_links%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>

den Code für den Farbwähler des Textes im Footer eingeben (hier zusammen mit dem für Links und mit dem Ende der Farbgruppe):

					<dict>
						<key>DefaultColour</key>
						<string>#656565</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Links</string>
							<key>en</key>
							<string>Links</string>
							<key>fr</key>
							<string>Links</string>
							<key>it</key>
							<string>Links</string>
							<key>ja</key>
							<string>Links</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_tags_links%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>
					<dict>
						<key>DefaultColour</key>
						<string>#FFFFFF</string>
						<key>DisplayName</key>
						<dict>
							<key>de</key>
							<string>Footer Text</string>
							<key>en</key>
							<string>Footer Text</string>
							<key>fr</key>
							<string>Footer Text</string>
							<key>it</key>
							<string>Footer Text</string>
							<key>ja</key>
							<string>Footer Text</string>
						</dict>
						<key>Name</key>
						<string>Links</string>
						<key>Tag</key>
						<string>%colour_footer%</string>
						<key>Type</key>
						<string>Colour</string>
					</dict>
				</array>
				<key>GroupName</key>
				<string>Content Colour</string>
			</dict>

Nach dem Speichern der theme.plist Datei der Page Inspector würde diesen Inhalt zeigen:
wp-caribou-05

2.2 Die Verbindung mit der colourtag.css Datei
Für den Bereich #footer, die Datei colourtag.css legt nur die Farbe des Hintergrundes fest:

#footer {
	background-color: %colour_footer_bg%;
}

Einfach an diesem Code auch die Bestimmung für die Farbe des Textes einfügen:

#footer {
	color: %colour_footer%;
	background-color: %colour_footer_bg%;
}

Die Datei colourtag.css speichern und damit auch dem Text im Footer die Möglichkeit haben eine andere Farbe zu geben.

Ich hoffe dass ich keine gravierende Fehler gemacht habe und dass der Beitrag jemandem nützlich wird.

Kommentieren ist momentan nicht möglich.