visit http://jqueryui.com/themeroller/…« beginnt, und kopieren die URL in einen Browser, um ThemeRoller mit den Einstellungen des Themes aufzurufen.
----
Das Theme »Sunny« entspricht schon weitgehend unserem neuen Design, mit folgenden Ausnahmen: Der Header über dem Datepicker ist grau und nicht gelb, der Inhaltsbereich und die Rahmenfarbe des aktiven Bereichs ist ein dunkleres Braun als in unserem Design festgelegt. Wir werden also im Bereich »Roll Your Own« ein paar Einstellungen verändern:
Den Hintergrund des Headers von grau in gelb ändern : Die Rahmen- und Hintergrundfarbe unseres zusätzlichen Themes soll zu »Clickable: default state« passen.
Öffnen Sie den Abschnitt »Header/Toolbar«.
Geben Sie im Feld für die Hintergrundfarbe den Wert
#FECE2F
ein – an der Opazität oder der Textur müssen wir nichts ändern.
Der weiße Text ist jetzt vor dem gelben Hintergrund kaum noch sichtbar, daher werden wir ihn soweit abdunkeln, dass er zum grauen Text im Rest unserer Anwendung passt. Geben Sie daher für die Textfarbe den Wert
#333333
ein.
Genauso müssen die Symbole für den Datepicker-Header mit einem größeren Kontrast versehen werden. Wir nutzen ein mittleres Braun, geben Sie daher den Wert
#A27406
ein.
Schließlich ändern wir die Rahmenfarbe zu
#D19405
.
Die Farbe des Rahmens für den Inhalt und den aktiven Status in hellbraun ändern : Der Rahmen des Inhalts-Bereichs ist rund um Akkordeon-Abschnitte zu sehen, zudem definiert er die äußeren Container von Tabs, Dialogen, Slidern, Datepickern und Fortschrittsbalken.
Öffnen Sie den Abschnitt »Content«.
Geben Sie für die Rahmenfarbe die des Header-Rahmens, also
#D19405
ein.
Nutzen Sie die Tabulator- oder Eingabetaste oder klicken Sie irgendwo auf die Seite, um eine aktualisierte Vorschau der Widgets auf der rechten Seite zu erhalten.
Schritt 2. Das neue Theme mit einem Gültigkeitsbereich versehen und es herunterladen
Wenn Sie mit dem Bearbeiten des Sunny-Themes fertig sind, klicken Sie auf den Button »Download Theme« auf der Registerkarte »Roll Your Own«. Damit gelangen Sie zum jQuery UI Download Builder.
Bevor wir die Einstellungen des Download Builder bearbeiten, müssen wir festlegen, welchen Selektor zum Einschränken der Gültigkeit wir nutzen werden, um unser neues Theme nur auf die Inhalts-Bereiche der Reise-Anwendung anzuwenden. Wir wollen sicherstellen, dass wir nur die Tab-Inhalte beeinflussen und nicht das ursprüngliche Theme verändern, das wir auf die Reiter zur Navigation angewendet haben.
Beim Selektor handelt es sich um eine Klasse, eine ID oder ein HTML-Tag, das den Eltern-Container des Elements festlegt, dem wir den Style verpassen wollen. Am besten wählen Sie den Selektor so stark einschränkend aus, dass Sie nicht unabsichtlich andere Elemente mit einem Style versehen, die eigentlich den Standard-Style erhalten sollen. Bei unserer Anwendung zur Reisebuchung sollte der Selektor den Container auswählen, der die Inhalte der Registerkarten umschließt, aber keinen Bezug zum Navigations-Bereich hat.
Schauen wir uns das erzeugte Markup in unserer Anwendung an, dann sehen wir, dass jedem Inhalts-Bereich die Klasse
ui-tabs-panel
zugewiesen wurde:
Da das Markup des Inhalts-Bereichs nach dem für den Navigationsbereich steht und auch unabhängig davon ist, können wir unsere neuen Styles sicher auf die Klasse
ui-tabs-panel
beschränken, ohne die auf die oberen Reiter angewandten Styles zu beeinflussen.
Wir haben nun also unseren Selektor zum Einschränken gefunden und können zum jQuery UI Download Builder
Kostenlos Online Lesen 
