Dokumentation

Im Menü Themes stellen Sie für jede Domain eine dynamische Formatierung für Textelemente ein. Das erlaubt es Ihnen, die Werte einer CSS-Datei über eine Benutzeroberfläche zu ändern. Wenn Sie ein neues Theme-Set anlegen, werden automatisch Ordner für Formulare, Überschriften, Navigation, Seiten, Tabellen und Text generiert. Innerhalb der Ordner können Sie für jedes Textelement eine eigene Formatierung anlegen. Beachten Sie, dass Sie in der Datei „themes.xml“ Ihre eigenen Werte definieren können, sodass Sie die Ordner für Formulare, Überschriften usw. nur in der Standardeinstellung sehen.

• Definieren Sie in der Datei „themes.xml“ die dynamischen Werte der Attribute. Weitere Informationen finden Sie im Artikel Dynamic Themes im englischen papaya Wiki unter http://en.wiki.papaya-cms.com/wiki/Main_Page.
• Sie benötigen den Theme-Wrapper, der in der Standardeinstellung aktiviert ist. Sollten Sie den Entwicklungsmodus aktiviert haben, ist der Theme-Wrapper deaktiviert. Weitere Informationen zur Deaktivierung des Entwickungsmodus finden Sie in Kapitel Systemoptionen in der Datei conf.inc.php anpassen.
• Stellen Sie in der Anwendung Domains Ihre Domains ein und weisen Sie ihnen mit der Systemoption PAPAYA_LAYOUT_THEME_SET die Theme-Sets zu. Weitere Informationen zu den Systemoptionen der Anwendung Domains finden Sie in Kapitel Domains.

• wie die Benutzeroberfläche des Menüs Themes aufgebaut ist und
• wie Sie ein Theme-Set erstellen, bearbeiten und löschen.

Klicken Sie im Menü auf Themes. Sie finden das Bearbeitungsmenü, mit dem Sie Theme-Sets erstellen und löschen können, unterhalb der Menügruppen, wenn Sie im Fenster Themes ein Theme auswählen. Die Benutzeroberfläche des Content-Bereichs ist in zwei Spalten aufgeteilt. Links finden Sie das Fenster Themes. Die mittlere Spalte ändert sich je nach gewähltem Theme-Set oder gewählter Funktion im Bearbeitungsmenü.

Im Fenster Themes sehen Sie die Theme-Sets in alphabetischer Reihenfolge. Wenn Sie noch kein Theme-Set erstellt haben, finden Sie nur das Theme-Set Base Set. Klicken Sie auf das Theme-Set, um die Ordner Form, Headline, Navigation, Page, Table und Text zu öffnen. Im Ordner Form sind die Formatierungen für Formulare abgespeichert. Der Ordner Headlines beinhaltet Formatierungen für Überschriften bis zur sechsten Ebene. Formatierungen für Breadcrumb-, Detail- und Main-Navigation finden Sie im Ordner Navigation. Im Ordner Page sind die Formatierungen für Seiten und im Ordner Table die Formatierungen für Tabellen enthalten. Der Ordner Text beinhaltet Formatierungen für Text.

1. Klicken Sie im Menü auf Themes. Das Fenster Themes öffnet sich.
2. Klicken Sie im Fenster Themes auf dynamic. Ihre Theme-Sets werden angezeigt.
3. Wählen Sie das Theme-Set, in dem Sie Änderungen vornehmen möchten. Die Ordner Form, Headline, Navigation, Page, Table und Text öffnen sich.
4. Wählen Sie den Ordner für den Sie die Formatierungen ändern möchten. Das Fenster Dynamic Values öffnet sich.
5. Ändern Sie die Eigenschaften.
6. Klicken Sie auf Speichern. Die Änderungen wurden übernommen.

Table 4.14. Details zum Fenster Dynamic Values: Form

Background Color	Hintergrundfarbe eines Buttons im Formulars Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Color (Button)	Farbe der Beschriftung des Buttons Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Border Color	Rahmenfarbe eines Feldes im Formular Eingabe als Hexadezimalcode oder über neben dem Feld Border Color, um den Farbauswahldialog aufzurufen
Color (Input)	Farbe des Textes Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Error Background Color	Hintergrundfarbe des Feldes bei falscher Eingabe Eingabe als Hexadezimalcode oder über neben dem Feld Error Background Color, um den Farbauswahldialog aufzurufen
Error Border Color	Rahmenfarbe des Feldes bei falscher Eingabe Eingabe als Hexadezimalcode oder über neben dem Feld Error Border Color, um den Farbauswahldialog aufzurufen
Font Size	Schriftgröße des Textes in em

Table 4.15. Details zum Fenster Dynamic Values: Headlines

Color	Farbe des Textes Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Font Family	serif: Serifenschrift, wie Times New Roman sans-serif: Schrift ohne Serifen, wie Arial
Font Size	Schriftgröße des Textes in em
Font Style	Schriftschnitt wie normal, italic und oblique
Font Weight	Schriftschnitt wie normal, bold und lighter
Line Height	1: Zeilenabstand von 100%, 1.2: Zeilenabstand von 120%, 1.5: Zeilenabstand von 150%, 2: Zeilenabstand von 200%

Table 4.16. Details zum Fenster Dynamic Values: Navigation

Color (Breadcrumb)	Farbe des Textes der Breadcrumb-Navigation Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Font Family (Breadcrumb)	serif: Serifenschrift, wie Times New Roman sans-serif: Schrift ohne Serifen, wie Arial
Font Size (Breadcrumb)	Schriftgröße der Breadcrumb-Navigation in em
Font Style (Breadcrumb)	Schriftschnitt wie normal, italic und oblique
Font Weight (Breadcrumb)	Schriftschnitt wie normal, bold und lighter
Hover Color (Breadcrumb)	Farbe des Textes, wenn der Mauszeiger über der Breadcrumb-Navigation ist Eingabe als Hexadezimalcode oder über neben dem Feld Hover Color, um den Farbauswahldialog aufzurufen
Line Height (Breadcrumb)	1: Zeilenabstand von 100% , 1.5: Zeilenabstand von 150% , 2: Zeilenabstand von 200%
Color (Detail)	Farbe des Textes der Detail-Navigation Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Font Family (Detail)	serif: Serifenschrift, wie Times New Roman sans-serif: Schrift ohne Serifen, wie Arial
Link Color (Detail)	Farbe des Textes, wenn der Link bereits angeklickt wurde Eingabe als Hexadezimalcode oder über neben dem Feld Link Color, um den Farbauswahldialog aufzurufen
Font Family (Main)	serif: Serifenschrift, wie Times New Roman sans-serif: Schrift ohne Serifen, wie Arial
Link Color (Main)	Farbe des Textes in der Main-Navigation Eingabe als Hexadezimalcode oder über neben dem Feld Link Color, um den Farbauswahldialog aufzurufen
Link Hover Color (Main)	Farbe des Textes, wenn der Mauszeiger über dem Link ist Eingabe als Hexadezimalcode oder über neben dem Feld Link Hover Color, um den Farbauswahldialog aufzurufen
Link Selected Color (Main)	Farbe des Textes, wenn der Link bereits angeklickt wurde Eingabe als Hexadezimalcode oder über neben dem Feld Link Color, um den Farbauswahldialog aufzurufen

Table 4.17. Details zum Fenster Dynamic Values: Page

Color (Font)	Farbe des Textes Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen
Family (Font)	serif: Serifenschrift, wie Times New Roman sans-serif: Schrift ohne Serifen, wie Arial
Font Size (Font)	Schriftgröße in em
Background Color (Roof)	Hintergrundfarbe der Dachzeile Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Border Color (Roof)	Rahmenfarbe der Dachzeile Eingabe als Hexadezimalcode oder über neben dem Feld Border Color, um den Farbauswahldialog aufzurufen
Link Color (Roof)	Farbe eines Links in der Dachzeile Eingabe als Hexadezimalcode oder über neben dem Feld Link Color, um den Farbauswahldialog aufzurufen
Background Color (Head)	Hintergrundfarbe des Kopfbereichs Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Border Color (Head)	Rahmenfarbe des Kopfbereichs Eingabe als Hexadezimalcode oder über neben dem Feld Border Color, um den Farbauswahldialog aufzurufen
Border Width (Head)	Stärke des Rahmens in Pixeln Auswahl über ein Drop-down-Menü zwischen 1px und 15px Stärke
Background Color (Body)	Hintergrundfarbe des Body-Bereichs Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Background Tile (Body)	kachelfähiges Hintergrundbild
Background Color (Footer)	Hintergrundfarbe des Footer-Bereichs Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Color (HR)	Farbe einer horizontalen Linie Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog aufzurufen

Table 4.18. Details zum Fenster Dynamic Values: Table

Background Color (Data)	Hintergrundfarbe der Zellen Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Background Color (Header)	Hintergrundfarbe der Kopfzeile Eingabe als Hexadezimalcode oder über neben dem Feld Background Color, um den Farbauswahldialog aufzurufen
Text Align	left: Ausrichtung des Textes am linken Zellenrand , center: Ausrichtung des Textes in der Mitte der Zelle , right: Ausrichtung des Textes am rechten Zellenrand</wrap>

Table 4.19. Details zum Fenster Dynamic Values: Text

Color (Footer)	Farbe des Textes im Footer Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog zu öffnen
Headline Color (Footer)	Farbe einer Überschrift im Footer Eingabe als Hexadezimalcode oder über neben dem Feld Headline Color, um den Farbauswahldialog zu öffnen
Link Color (Footer)	Farbe eines Links im Footer Eingabe als Hexadezimalcode oder über neben dem Feld Link Color, um den Farbauswahldialog zu öffnen
Link Hover Color (Footer)	Farbe eines Links im Footer, wenn der Mauszeiger über dem Link ist Eingabe als Hexadezimalcode oder über neben dem Feld Link Hover Color, um den Farbauswahldialog zu öffnen
Color (Headline Link)	Farbe eines Links in der Überschrift Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog zu öffnen
Decoration (Headline Link)	none: normaler Text underline: Schrift wird unterstrichen
Hovercolor (Headline Link)	Farbe eines Links in der Überschrift, wenn der Mauszeiger über dem Link ist Eingabe als Hexadezimalcode oder über neben dem Feld Hovercolor, um den Farbauswahldialog zu öffnen
Active Color (Link)	Farbe eines Links im Text, wenn der Link bereits angeklickt wurde Eingabe als Hexadezimalcode oder über neben dem Feld Active Color, um den Farbauswahldialog zu öffnen
Active Decoration (Link)	none: normaler Text, wenn der Link bereits angeklickt wurde underline: Schrift wird unterstrichen, wenn der Link bereits angeklickt wurde
Color (Link)	Farbe eines Links im Text Eingabe als Hexadezimalcode oder über neben dem Feld Color, um den Farbauswahldialog zu öffnen
Decoration (Link)	none: normaler Text underline: Schrift wird unterstrichen
Focus Color (Link)	Farbe des Links, wenn der Link über die Tabulator-Taste ausgewählt wird Eingabe als Hexadezimalcode oder über neben dem Feld Focus Color, um den Farbauswahldialog zu öffnen
Focus Decoration (Link)	none: normaler Text, wenn der Link über die Tabulator-Taste ausgewählt wird underline: Schrift wird unterstrichen, wenn der Link über die Tabulator-Taste ausgewählt wird
Hover Color (Link)	Farbe eines Links im Text, wenn der Mauszeiger über dem Link ist Eingabe als Hexadezimalcode oder über neben dem Feld Hovercolor, um den Farbauswahldialog zu öffnen
Hover Decoration (Link)	none: normaler Text, wenn der Mauszeiger über dem Link ist underline: Schrift wird unterstrichen, wenn der Mauszeiger über dem Link ist
Font Size (Paragraph)	Schriftgröße des Textes in em
Line Height (Paragraph)	1: Zeilenabstand von 100%, 1.5: Zeilenabstand von 150% , 2: Zeilenabstand von 200%

Mit der Funktion erstellen Sie ein neues Theme-Set. Die Ordner Form, Headline, Navigation, Page, Table und Text werden automatisch erstellt.

1. Klicken Sie im Bearbeitungsmenü auf . Das Fenster Theme-Set hinzufügen öffnet sich.
2. Geben Sie im Fenster Theme-Set hinzufügen einen Titel ein.
3. Klicken Sie auf Hinzufügen. Das Theme-Set wurde erstellt und erscheint im Fenster Themes.

1. Klicken Sie im Fenster Themes auf dynamic. Ihre Theme-Sets werden angezeigt.
2. Wählen Sie das Theme-Set, in dem Sie Änderungen vornehmen möchten. Das Fenster Theme-Set ändern öffnet sich.
3. Ändern Sie den Titel.
4. Klicken Sie auf Speichern. Die Änderungen wurden übernommen.

Mit der Funktion können Sie ein Theme-Set entfernen, das Sie nicht mehr benötigen.

1. Wählen Sie im Fenster Themes das Theme-Set, das Sie löschen möchten. Das Fenster Theme-Set ändern öffnet sich.
2. Klicken Sie im Bearbeitungsmenü auf . Ein Fragedialog öffnet sich.
3. Bestätigen Sie den Fragedialog mit Löschen. Das Theme-Set wurde gelöscht und ist im Fenster Themes nicht mehr sichtbar.