Benutzer-Werkzeuge

Webseiten-Werkzeuge


handbuch:04._menuegruppe_administration:04_-_menue_themes_-_formatierungen_fuer_domains_einstellen

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

handbuch:04._menuegruppe_administration:04_-_menue_themes_-_formatierungen_fuer_domains_einstellen [2014/04/11 10:53] (aktuell)
Zeile 1: Zeile 1:
 +===== Menü Themes - Formatierungen für Domains einstellen =====
 +
 +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.
 +
 +<WRAP center round info 60%>
 +Um Formatierungen für mehrere Domains einzustellen,​ müssen Sie zuvor einige Einstellungen vornehmen.
 +</​WRAP>​
 +
 +  * 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 [[Handbuch:​03. Installation:​04 - Systemoptionen in der Datei conf.inc.php anpassen#​entwicklungsmodus_aktiv|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 [[Handbuch:​09. Anwendungen,​ Seiten- und Boxmodule:​04 - Domains - Mehrere Domains anlegen und verwalten#​einstellungen_domains|Domains]].
 +
 +==== In diesem Kapitel erfahren Sie ====
 +
 +  * wie die [[Handbuch:​04. Menügruppe Administration:​04 - Menü Themes - Formatierungen für Domains einstellen#​gui_themes|Benutzeroberfläche des Menüs Themes]] aufgebaut ist und
 +  * wie Sie ein Theme-Set [[Handbuch:​04. Menügruppe Administration:​04 - Menü Themes - Formatierungen für Domains einstellen#​set_hinzu|erstellen,​ bearbeiten]] und [[Handbuch:​04. Menügruppe Administration:​04 - Menü Themes - Formatierungen für Domains einstellen#​set_loeschen|löschen]].
 +
 +==== Benutzeroberfläche des Menüs Themes ====
 +
 +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ü.
 +
 +| {{figure:​menues:/​themes-menue.png?​}} |
 +
 +=== Fenster Themes ===
 +
 +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.
 +
 +| {{figure:​menues:/​themes-f-form.png?​}} |
 +
 +<WRAP center round info 60%>
 +Wenn Sie in der Datei "​themes.xml"​ Ihre eigenen Attribute definiert haben, weichen sowohl die Namen der Ordner als auch die Inhalte der Fenster //Dynamic Values// von der Dokumentation ab.
 +</​WRAP>​
 +
 +== So ändern Sie die Formatierungen ==
 +
 +  - Klicken Sie im Menü auf //Themes//. Das Fenster //Themes// öffnet sich.
 +  - Klicken Sie im Fenster //Themes// auf //​dynamic//​. Ihre Theme-Sets werden angezeigt.
 +  - Wählen Sie das Theme-Set, in dem Sie Änderungen vornehmen möchten. Die Ordner //Form//, //​Headline//,​ //​Navigation//,​ //Page//, //Table// und //Text// öffnen sich.
 +  - Wählen Sie den Ordner für den Sie die Formatierungen ändern möchten. Das Fenster //Dynamic Values// öffnet sich.
 +  - Ändern Sie die Eigenschaften.
 +  - Klicken Sie auf **Speichern**. Die Änderungen wurden übernommen.
 +
 +Table 4.14. Details zum Fenster Dynamic Values: Form
 +| Background Color | Hintergrundfarbe eines Buttons im Formulars ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Color (Button) | Farbe der Beschriftung des Buttons ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Border Color | Rahmenfarbe eines Feldes im Formular ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Border Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Color (Input) | Farbe des Textes ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Error Background Color | Hintergrundfarbe des Feldes bei falscher Eingabe ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Error Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Error Border Color | Rahmenfarbe des Feldes bei falscher Eingabe <wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Error Border Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Font Size | Schriftgröße des Textes in em |
 +
 +| {{figure:​menues:/​themes-f-headlines.png?​}} |
 +
 +Table 4.15. Details zum Fenster Dynamic Values: Headlines
 +| Color | Farbe des Textes ​ <wrap lo>​Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Font Family | serif: Serifenschrift,​ wie //Times New Roman// ​  <​wrap lo> sans-serif: Schrift ohne Serifen, wie //Arial// </​wrap>​|
 +| 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% |
 +
 +| {{figure:​menues:/​themes-f-navigation.png?​}} |
 +
 +Table 4.16. Details zum Fenster Dynamic Values: Navigation
 +| Color (Breadcrumb) |Farbe des Textes der Breadcrumb-Navigation ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Font Family (Breadcrumb) |serif: Serifenschrift,​ wie //Times New Roman// ​  <​wrap lo> sans-serif: Schrift ohne Serifen, wie //Arial// </​wrap>​|
 +| 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   <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Hover Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Line Height (Breadcrumb) | 1: Zeilenabstand von 100% , 1.5: Zeilenabstand von 150% , 2: Zeilenabstand von 200% |
 +| Color (Detail) |Farbe des Textes der Detail-Navigation ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Font Family (Detail) |serif: Serifenschrift,​ wie //Times New Roman// ​  <​wrap lo>​sans-serif:​ Schrift ohne Serifen, wie //Arial// </​wrap>​|
 +| Link Color (Detail) |Farbe des Textes, wenn der Link bereits angeklickt wurde   <​wrap lo>​Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Font Family (Main) |serif: Serifenschrift,​ wie //Times New Roman// ​  <​wrap lo>​sans-serif:​ Schrift ohne Serifen, wie //Arial// </​wrap>​|
 +| Link Color (Main) |Farbe des Textes in der Main-Navigation ​  <​wrap lo>​Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Link Hover Color (Main) |Farbe des Textes, wenn der Mauszeiger über dem Link ist   <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Hover Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Link Selected Color (Main) |Farbe des Textes, wenn der Link bereits angeklickt wurde   <​wrap lo>​Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +
 +| {{figure:​menues:/​themes-f-page.png?​}} |
 +
 +Table 4.17. Details zum Fenster Dynamic Values: Page
 +| Color (Font) |Farbe des Textes ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Family (Font) |serif: Serifenschrift,​ wie //Times New Roman// ​  <​wrap lo> sans-serif: Schrift ohne Serifen, wie //Arial// </​wrap>​|
 +| Font Size (Font) |Schriftgröße in em |
 +| Background Color (Roof) |Hintergrundfarbe der Dachzeile ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Border Color (Roof) |Rahmenfarbe der Dachzeile ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Border Color//, um den Farbauswahldialog aufzurufen</​wrap>​ |
 +| Link Color (Roof) |Farbe eines Links in der Dachzeile ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Background Color (Head) |Hintergrundfarbe des Kopfbereichs ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Border Color (Head) |Rahmenfarbe des Kopfbereichs ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Border Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Border Width (Head) |Stärke des Rahmens in Pixeln ​  <​wrap lo> Auswahl über ein Drop-down-Menü zwischen 1px und 15px Stärke </​wrap>​|
 +| Background Color (Body) |Hintergrundfarbe des Body-Bereichs ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Background Tile (Body) |kachelfähiges Hintergrundbild |
 +| Background Color (Footer) |Hintergrundfarbe des Footer-Bereichs ​  <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Color (HR) |Farbe einer horizontalen Linie   <​wrap lo> Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +
 +| {{figure:​menues:/​themes-f-table.png?​}} |
 +
 +Table 4.18. Details zum Fenster Dynamic Values: Table
 +| Background Color (Data) | Hintergrundfarbe der Zellen <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| Background Color (Header) | Hintergrundfarbe der Kopfzeile <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Background Color//, um den Farbauswahldialog aufzurufen </​wrap>​|
 +| 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>​ |
 +
 +| {{figure:​menues:/​themes-f-text.png?​}} |
 +
 +Table 4.19. Details zum Fenster Dynamic Values: Text
 +| Color (Footer) | Farbe des Textes im Footer <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Headline Color (Footer) | Farbe einer Überschrift im Footer <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Headline Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Link Color (Footer) | Farbe eines Links im Footer <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Link Hover Color (Footer) | Farbe eines Links im Footer, wenn der Mauszeiger über dem Link ist <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Link Hover Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Color (Headline Link) | Farbe eines Links in der Überschrift <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Decoration (Headline Link) | none: normaler Text <wrap lo> ​ underline: Schrift wird unterstrichen </​wrap>​|
 +| Hovercolor (Headline Link) | Farbe eines Links in der Überschrift,​ wenn der Mauszeiger über dem Link ist <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Hovercolor//,​ um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Active Color (Link) | Farbe eines Links im Text, wenn der Link bereits angeklickt wurde <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Active Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Active Decoration (Link) | none: normaler Text, wenn der Link bereits angeklickt wurde <wrap lo> ​ underline: Schrift wird unterstrichen,​ wenn der Link bereits angeklickt wurde </​wrap>​|
 +| Color (Link) | Farbe eines Links im Text <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Decoration (Link) | none: normaler Text <wrap lo> ​ underline: Schrift wird unterstrichen</​wrap>​ |
 +| Focus Color (Link) | Farbe des Links, wenn der Link über die Tabulator-Taste ausgewählt wird <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //Focus Color//, um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Focus Decoration (Link) | none: normaler Text, wenn der Link über die Tabulator-Taste ausgewählt wird <wrap lo> ​ underline: Schrift wird unterstrichen,​ wenn der Link über die Tabulator-Taste ausgewählt wird </​wrap>​|
 +| Hover Color (Link) | Farbe eines Links im Text, wenn der Mauszeiger über dem Link ist <wrap lo> ​ Eingabe als Hexadezimalcode oder über {{figure:​icons_papaya:​16x16:​actions:/​color-select.png}} neben dem Feld //​Hovercolor//,​ um den Farbauswahldialog zu öffnen </​wrap>​|
 +| Hover Decoration (Link) | none: normaler Text, wenn der Mauszeiger über dem Link ist <wrap lo> ​ underline: Schrift wird unterstrichen,​ wenn der Mauszeiger über dem Link ist </​wrap>​|
 +| 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% |
 +
 +==== Bearbeitungsmenü ====
 +
 +=== Set hinzufügen und bearbeiten ===
 +
 +Mit der Funktion {{figure:​bearbeitungsmenue:/​set_hinzu.png}} erstellen Sie ein neues Theme-Set. Die Ordner //Form//, //​Headline//,​ //​Navigation//,​ //Page//, //Table// und //Text// werden automatisch erstellt.
 +
 +| {{figure:​menues:/​themes-f-set_hinzu.png?​}} |
 +
 +== So erstellen Sie ein neues Theme-Set ==
 +
 +  - Klicken Sie im Bearbeitungsmenü auf {{figure:​bearbeitungsmenue:/​set_hinzu.png}}. Das Fenster //Theme-Set hinzufügen//​ öffnet sich.
 +  - Geben Sie im Fenster //Theme-Set hinzufügen//​ einen Titel ein.
 +  - Klicken Sie auf **Hinzufügen**. Das Theme-Set wurde erstellt und erscheint im Fenster //Themes//.
 +
 +== So bearbeiten Sie ein Theme-Set ==
 +
 +  - Klicken Sie im Fenster //Themes// auf //​dynamic//​. Ihre Theme-Sets werden angezeigt.
 +  - Wählen Sie das Theme-Set, in dem Sie Änderungen vornehmen möchten. Das Fenster //Theme-Set ändern// öffnet sich.
 +  - Ändern Sie den Titel.
 +  - Klicken Sie auf **Speichern**. Die Änderungen wurden übernommen.
 +
 +=== Set löschen ===
 +
 +Mit der Funktion {{figure:​bearbeitungsmenue:/​set_loeschen.png}} können Sie ein Theme-Set entfernen, das Sie nicht mehr benötigen.
 +
 +== So entfernen Sie ein Theme-Set ==
 +
 +  - Wählen Sie im Fenster //Themes// das Theme-Set, das Sie löschen möchten. Das Fenster //Theme-Set ändern// öffnet sich.
 +  - Klicken Sie im Bearbeitungsmenü auf {{figure:​bearbeitungsmenue:/​set_loeschen.png}}. Ein Fragedialog öffnet sich.
 +  - Bestätigen Sie den Fragedialog mit **Löschen**. Das Theme-Set wurde gelöscht und ist im Fenster //Themes// nicht mehr sichtbar.
  
handbuch/04._menuegruppe_administration/04_-_menue_themes_-_formatierungen_fuer_domains_einstellen.txt · Zuletzt geändert: 2014/04/11 10:53 (Externe Bearbeitung)