JQuery Kochbuch (German Edition)

background-image: none; margin: .7em
0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em
.4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
...
    Das ist nur eine Untermenge der Style-Regeln für den Datepicker. Wenn Sie alle sehen wollen, müssen Sie im Theme-Stylesheet nach dem Block suchen, der mit
ui-datepicker
beginnt.
    Für unsere Reise-Anwendung wollen wir ein paar Override-Regeln schreiben, damit der Header des Datepickers unserem Design entspricht:
    Als erstes entfernen wir den Abstand, der den Header vom äußeren Container des Datepickers trennt:
#travel .ui-datepicker { padding: 0; }
Wie bei der Navigation Bar für die Registerkarten wollen wir den unteren Rand abflachen und die oberen und seitlichen Rahmen entfernen:
#travel .ui-datepicker-header {
    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;
}
Schließlich entfernen wir den Rahmen und das Hintergrundbild für die Navigationspfeile beim Darüberfahren mit dem Mauscursor:
#travel .ui-datepicker-prev-hover,
#travel .ui-datepicker-next-hover {
    border-width: 0;
    background-image: none;
}
    Wenden wir die Override-Styles an, dann sieht unsere Reise-Anwendung nun genau so aus, wie es das Ziel-Design vorgibt ( Figure 15-15 ).
    Figure 15-15. Unser Ziel-Design, zusammengestellt aus ThemeRoller- und Override-Styles
    Diskussion
    Überlegen Sie sich, ob Sie Override-Regeln auf alle Widgets in Ihrem Projekt anwenden oder ob Sie nur Theme-Styles für eine Untermenge überschreiben wollen. Wenn es auch nur eine kleine Chance gibt, dass Sie das Widget unterschiedlich anzeigen wollen, nutzen Sie Override-Styles mit einer Einschränkung auf die Klasse oder ID des Container-Elements, damit Sie nicht die Standard-Formatierung des Widgets verändern.
    Hier ein paar Tipps zum Bearbeiten:
    Wollen Sie den unteren Rahmen eines Widget-Headers entfernen,dann nutzen Sie
border-bottom-width: 0;
anstatt
border-bottom:0;
. Die erste Version behält die Art und Farbe bei, falls Sie sie später nochmals nutzen müssen.
Um übereinanderliegende Elemente mit der gleichen Klasse unterschiedlich zu gestalten, können Sie das Hintergrundbild in einem der Elemente deaktivieren, so dass die Unterschiede in der Hintergrundfarbe deutlich werden.
Müssen Sie die Farbeeines bestimmten Teil eines Widgets ändern, dann entwerfen Sie das Theme so, dass es diese Änderung festlegt, anstatt eine Farbe hartkodiert im Stylesheet anzugeben.
Müssen Sie einen Rahmen ausblenden, wollen ihn aber aus strukturellen Gründen nicht ganz entfernen, dann können Sie ihn auf transparent setzen. Um auch den IE mitspielen zu lassen, setzen Sie den Rahmen-Style auf
dashed
.
Nutzen Sie wann immer möglich bei struturellen Dimensionen em-Einheiten – z. B. bei Abständen und Rändern und vor allem bei Schriftgrößen. Schreiben Sie Styles so, dass sie von einer Standard-Widgetgröße von 1em ausgehen, und versuchen Sie, nicht unter 8em zu kommen, um Texte noch lesbar zu halten.

Ein Theme auf Komponenten anwenden, die nicht zum jQuery UI gehören
    Problem
    Andere Komponenten der Seite – wie zum Beispiel Inhalts-Bereiche, Buttons und Toolbars – befinden sich neben den jQuery UI-Widgets und haben ähnliche Interaktions- und Verhaltensweisen, aber die Designs passen nicht zusammen.
    Lösung
    Sie können Framework-Klassen auf Elemente anwenden, die nicht zum jQuery UI gehören, um das Theme auch dort zu nutzen. (Als Extra werden diese Elemente automatisch angepasst, wenn Sie ein aktualisiertes ThemeRoller-Theme anwenden.)

    ----
    Note
    Dieses Rezept geht von folgenden Annahmen aus:
    Sie haben Grundlagenwissen über die Funktionsweise von CSS und insbesondere das Kaskadieren von Styles, die Vorrangeinstellungen und das Einschränken von Selektionen mit Klassen, IDs oder Elementen. (Lesevorschläge finden Sie im Anhang am Ende dieses Kapitels.)
Sie wissen schon, wie Sie ein Theme mit ThemeRoller erstellen und bearbeiten. (Wenn nicht, schauen Sie sich nochmal Themes für jQuery UI-Widgets mit ThemeRoller erstellen an, in dem genauer beschrieben wird, wie Sie solch ein Theme erstellen und auf Ihren Seiten