JQuery Kochbuch (German Edition)

Setzen und Bearbeiten aller Style-Einstellungen in einem Theme bereit.
Vorschau mit Beispiel-Widgets auf der rechten Seite : Dort sehen Sie, wie sich der aktuelle Style auswirkt – jedes Widget ist interaktiv, um wirklich alle Styles zeigen zu können (nutzen Sie Ihre Maus, um auch die Hover-Styles und die Styles für aktive Elemente zu sehen), und es wird direkt aktualisiert, wenn Sie die Styles mit der Toolbar anpassen.
    Figure 15-2. Normale Ansicht von ThemeRoller. Links die Toolbar und rechts die Widget-Vorschau
    Die ThemeRoller-Toolbar bietet zwei verschiedene Möglichkeiten an, Themes anzupassen. Sie erreichen diese über die Registerkarten oben in der Toolbar-Spalte:
    Die Registerkarte »Roll Your Own« ( Figure 15-3 ) ist der Arbeitsbereich, in dem Sie eigene Styles für Ihre Themes erstellen. Die verschiedenen Einstellungen sind in Abschnitten zusammengefasst und es gibt Eingabefelder und Tools, um die Styles festzulegen. Dazu gehört auch die Angabe der Schriftart und der Eck-Radien für alle Widgets sowie das Setzen der Hintergrundfarben und Texturen, der Textfarbe und der Symbolfarbe.
Jeder Abschnitt ist standardmäßig eingeklappt, zeigt aber in einem kleinen Symbol rechts vom Label den aktuellen Style an. Öffnen und schließen Sie die Abschnitte nach Bedarf und schauen Sie sich die Vorschau auf der rechten Seite an, die immer direkt auf Ihre Änderungen reagiert.
    ----
    Note
    Für ThemeRoller muss JavaScript nicht aktiviert sein. Ist es abgeschaltet, dann gibt es einen Preview-Button, den Sie anklicken können, um die Änderungen zu sehen.
    ----
Die Registerkarte »Gallery« ( Figure 15-3 ) stellt eine ganze Reihe vorgefertigter Themes bereit, die Sie direkt herunterladen oder als Ausgangsbasis für eigene Anpassungen verwenden können.
    Figure 15-3. Die ThemeRoller-Registerkarte »Roll Your Own« (A) bietet die Möglichkeit, die Schriftart, den Eck-Radius und die Farben für die Styles anzupassen; die Registerkarte »Gallery« (B) liefert Zugriff auf vorgefertigte Themes
    Schritt 2. Ein Theme erstellen und in der Vorschau betrachten
    Bei unserer Anwendung zum Buchen von Reisen werden wir ein Gallery-Theme namens Sunny auswählen, das unserem gewünschten Design (siehe Figure 15-4 ) schon sehr nahe kommt.
    Figure 15-4. Die Gallery-Themes von ThemeRoller bieten oft eine gute Ausgangsbasis für das Erstellen eigener Designs an; Sunny (A) hat schon viele Styles, die zu unserem gewünschten Design (B) passen
    Sunny legt schon einen passenden Hintergrund, einen Schriftstil und Schriftfarben für unser Ziel-Design fest, aber eine Reihe von Styles müssen gegebenenfalls noch angepasst werden, um alles passend zu haben – zum Beispiel sind die Registerkarten von Sunny gelb mit einem grauen Hintergrund, während unsere Registerkarten dunkelgrau mit einem weißen Hintergrund sind.
    Wir können diese Einstellungen leicht ändern, indem wir entweder auf den Button »Edit« unterhalb des Sunny-Bildes in der Galerie klicken (wodurch Sie zu »Roll Your Own« gelangen), oder indem Sie auf das Sunny-Bild in der Galerie klicken, um es zu aktivieren, und dann zur Registerkarte »Roll Your Own« wechseln.
    Wenn Sie die Voreinstellungen von Sunny in der Registerkarte »Roll Your Onw« haben, können Sie mit dem Bearbeiten beginnen. Lassen Sie uns die folgenden Einstellungen anpassen, damit das Sunny-Theme zu unserem Design passt:
    Die Basis-Schrift für alle Widgets setzen : Die Standard-Schriftart sieht im Sunny-Theme und in unserem Ziel-Design sehr ähnlich aus, aber wir können auch einfach den Abschnitt »Font Settings« öffnen (siehe Figure 15-5 ) und entweder bestätigt vorfinden, dass die Einstellungen korrekt sind, oder andere Werte für die Schriftfamilie, das Gewicht und die Größe angeben. Die Schriftfamilie kann mehrere, durch Komma getrennte Namen aufnehmen (wie in der Standard-CSS-Notation). Hier ein paar Hinweise und Tipps:
    Standardmäßig wird die Schriftgröße in »em«-Einheiten angegeben. Wir raten auch dazu, ems anstatt Pixel für die Schriftgröße zu nehmen, denn so wachsen Widget-Text und Widget-Container, wenn der Anwender die Schriftgröße im Browser anpasst.
Geben Sie mehrere Schriftarten an, falls die eigentlich gewünschte Schrift nicht auf dem Computer eines Anwenders installiert ist. Im Allgemeinen sollte man die Liste der Schriftarten mit einer generischen Schriftart wie »serif« oder »sans-serif« enden lassen.
    Figure 15-5. Abschnitte für Font Settings und Corner