Über Swatches hingegen formatierst du die Darstellung der mit Hilfe von Stacks eingebundenen Inhalte. Du legst also fest, welche Randabstände der Inhalt haben soll, welche Farbwerte z.B. ein Text oder eine Überschrift ausgegeben werden sollen etc. Dieses Muster ist bei allen Swatches, so sehr verwirrend das auf den ersten Blick auch sein mag, bei allen Swatches gleich:
Im oberen Bereich der Konfigurationsoberfläche eines Swatches hast du eine Möglichkeit festzulegen, auf welchen Bereich des Webseiteninhalts sich die Vorgaben des Swatches auswirken sollen - das wird über einen sogenannten Selektor gesteuert, dieser Begriff kommt aus der CSS-Sprache:
Der Selektor ist Teil einer CSS-Regel, diese Regel beinhaltet ausser dem gerade erwähnten Selektor eine Deklaration welche wiederum aus einer Eigenschaft (Property) und einem Wert (Value) besteht. Also z.B. so:
strong {
color: red;
}.
Der ganze oben gezeigte Code ist die Regel. "strong" ist der Selektor, gefolgt von der in geschweifte Klammern gesetzten Deklaration, diese bestehend aus der Farbvorgabe "color" mit dem Wert "red".
Swatch Selector
Du kannst eine solche Regel genauso im Backend einer Webseite als Code schreiben, der Swatch soll dir hierfür aber eine Benutzeroberfläche bieten, der eigentliche Code wird dann von RapidWeaver geschrieben. Hier wird die Vorgabe des Swatches mit dem zu formatierenden Webseiten-Inhalt verknüpft.
Die Konfigurationsmöglichkeiten für den Swatch sind:
- Class: Classes sind eindeutige IDs zur Verknüpfung der Vorgaben mit dem Inhalt. Alle Vorgaben, die der Swatch macht, wirken sich über eine eindeutige ID bzw. Klasse auf Stacks aus, die über diese ID angesprochen werden können.
- Element: Im Elementmodus kannst du aus einer vordefinierten Liste von Elementen auswählen, auf die sich die jeweilige Formatierung auswählen soll.
- CSS: Im CSS-Modus kannst du deinen eigenen benutzerdefinierten CSS-Selektor definieren
Eine Klasse kannst beliebig vielen Stacks zuweisen, alle Stacks mit der gleichen Klasse werden gleichartig formatiert. Klasse sollten keine Leerzeichen enthalten und sollten mit einem Buchstaben beginnen (Zahlen sind zwar erlaubt, aber die Klasse darf nicht mit einer Zahl beginnen). Zur Trennung solltest du Bindestriche nutzen.
Optional Selectors
Hier lassen sich spezifische Vorgaben für jeweils übergeordnete Stacks (Parent Stacks) gemacht werden, diese werden deshalb auch als Parent Class bezeichnet. Es gibt einige spezielle Klassen, die hier verwendet werden können:
- loaded: Wendet die Vorgabe nur an, wenn der gesamte Inhalt geladen wurde.
- touch: Wendet die Einstellung nur auf Geräten mit berührungsempfindlichem Display an.
- no-touch: Wendet die jeweilige Vorgabe nur auf Geräte ohne berührungsempfindliches Display an.
Über Pseudo-State kannst du einen bestimmten Zustand festlegen, wann die jeweilige Formatierung ausgeführt werden soll. Diese Zustände werden in CSS auch Pseudo-Klassen genannt. Du kannst sie aus einem Drop-Down-Menü auswählen.
Über Media-Query kannst du, abhängig von der Anzeigebreite einer Webseite festlegen, ob eine bestimmte Formatierung wirksam werden soll oder nicht.
Auf den ersten Blick erscheint das alles vielleicht etwas kompliziert, aber ich hoffe ich habe dir mit meinen Anführungen ein wenig näher gebracht, was sich hinter den einzelnen Einstellungsmöglichkeiten verbirgt.
Notes
Die Möglichkeiten unter Notes sollten selbsterklärend sein, darauf gehe ich nicht weiter ein.
---
Bildquelle: Pexels