Header-Style für die Datepicker anpassen. Zunächst beschäftigen wir uns mit den Registerkarten.
Eingeschränktes Überschreiben
Das Design, das wir für die Registerkarten entworfen haben, soll speziell für die Reise-Anwendung genutzt werden. Wir wollen vielleicht gar nicht die gleichen Anpassungen – Symbole, Schriftgröße und so weiter – auf jedes Tab-Widget in unserer gesamten Anwendung nutzen. Um sicherzustellen, dass diese Styles nur auf die Reise-Anwendung wirken, schränken wir die Override-Regeln auf die eindeutige ID unserer Reise-Anwendung ein.
Jede neue Regel beginnt mit der Widget-spezifischen Klasse, die der zu ändernden Komponente zugewiesen ist. Wenn wir zum Beispiel die Styles für die Navigation Bar der Registerkarten ändern, schreiben wir eine Regel für die Klasse
.ui-tabs-nav
:
.ui-tabs-nav { /* unsere Override-Style-Regel */ }
Nun grenzen wir sie auf unsere Reise-Anwendung ein, indem wir deren ID davorstellen (
travel
):
#travel .ui-tabs-nav { /* unsere Override-Style-Regel */ }
Override-Regeln schreiben
Nach dem Anwenden des Theme-Stylesheets sieht der Navigationsbereich unserer Registerkarten wie in Figure 15-12 aus: Die einzelnen Reiter sind klein und durch einen Rahmen umschlossen, der sie vom äußeren Container durch ein paar Pixel trennt.
Figure 15-12. Unsere Registerkarten mit dem ThemeRoller-Theme vor dem Überschreiben
Unser Design ( Figure 15-13 ) sieht aber große Reiter mit Symbolen und ohne Hintergrund vor – sie scheinen über dem Inhalt der Registerkarten zu liegen.
Figure 15-13. Unser Ziel-Design
Um die Standard-Tab-Styles zu überschreiben, nehmen wir ein paar Änderungen vor:
Zunächst entfernen wir den äußersten Rahmen. Das gesamte Tabs-Widget ist von einem 1 Pixel breiten Rahmen umschlossen, dazu kommen noch ein paar Pixel Abstand. Damit die Reiter über dem Inhaltsbereich erscheinen, entfernen wir beide:
#travel.ui-tabs { padding: 0; border-width: 0; }
----
Note
Zwischen unserer einschränkenden ID
#travel
und der Klasse
.ui-tabs
befindet sich absichtlich kein Leerzeichen, weil beide auf das gleiche Element im Markup angewendet werden:
----
Als nächstes flachen wir den Zusatzrahmen des Navigations-Bereichs ab (wir setzen den unteren Eck-Radius auf Null) und entfernen die oberen und seitlichen Rahmen. Zudem entfernen wir die zusätzlichen Abstände, damit die Reiter direkt an der linken Seite des Widgets beginnen, und wir verstärken die Rahmenbreite auf 3 Pixel, damit sie unserem Design entspricht:
#travel .ui-tabs-nav {
border-width: 3px;
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
padding: 0;
}
Die Reiter stehen ein bisschen zu dicht beieinander, also fügen wir mehr rechten Rand hinzu:
#travel .ui-tabs-nav li {
margin-right: .5em;
}
Und wir passen den selektierten Reiter
.ui-tabs-selected
an, damit er mit dem Inhalts-Bereich verbunden erscheint. Wir verbreitern den Rahmen auf 3 Pixel und entfernen dann den Abstand zwischen Reiter und Inhalt. Dieser Abstand steht direkt mit der Dicke des Rahmens der Navigation Bar im Zusammenhang, also können wir den Abstand entfernen, indem wir einen negativen 3-Pixel-Rand zuweisen:
#travel .ui-tabs-nav li.ui-tabs-selected {
border-width: 3px;
margin-bottom: -3px;
}
Jetzt greifen wir auf unsere eigenen Symbole zu. Da jedes Symbol auf seinem Reiter einmalig ist, können wir es als Hintergrundbild über die eindeutige ID des Reiters zuweisen. (Technisch gesehen sind das keine Override-Styles, aber wir müssen auf diese Regeln verweisen, wenn wir das Symbol der gewählten Registerkarte gleich mit einem Style versehen.)
#tab-flight {
background: url(../images/icon-tab-flight.png) no-repeat .3em center;
padding-left: 50px;
}
#tab-car {
background: url(../images/icon-tab-car.png) no-repeat .1em center;
padding-left: 45px;
}
#tab-package {
background: url(../images/icon-tab-package.png) no-repeat .1em center;
padding-left: 45px;
}
Die selektierte Registerkarte nutzt ein etwas anderes Symbol auf einem weißen anstatt auf einem grauen Hintergrund. So fügen wir für jede Registerkarte eine Regel hinzu, die die Widget-spezifische Klasse für das selektierte Element nutzt (
.ui-tabs-selected
):
#travel .ui-tabs-nav li.ui-tabs-selected #tab-flight
Weitere Kostenlose Bücher
Kostenlos Online Lesen 
