MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Scenario 2 of the HTML Appbar Control sample shows many such selectors in action, in this case to
set the background of the app bar and its commands to blue and the foreground color to green (a
somewhat hideous combination, but demonstrative nonetheless).
As a basis, Scenario 2 (html/custom-color.html) adds a CSS class customColor to the app bar:
In css/custom-color.css it then styles selectors based on .win-appbar.customColor. The following
rules, for instance, set the overall background color, the label text color, and the color of the circle
around the commands for the :hover and :active states:
.win-appbar.customColor {
background-color: rgb(20, 20, 90);
}
.win-appbar.customColor .win-label {
color: rgb(90, 200, 90);
}
.win-appbar.customColor button:hover .win-commandring,
.win-appbar.customColor button:active .win-commandring {
background-color: rgba(90, 200, 90, 0.13);
border-color: rgb(90, 200, 90);
}
All of this styling, by the way, applies only to the standard command-oriented layout. If you’re using
a custom layout, the app bar just contains whatever elements you want with whatever style classes you
want, so you just handle styling as you would any other HTML.
Custom Icons
Earlier we saw that the icon property of an AppBarCommand typically comes from the Segoe UI Symbol
font. Although this is suitable for most needs, you might want at times to use a character from a
different font (some of us just can’t get away from Wingdings!) or to provide custom graphics. The app
bar supports both.
To use a different font for the whole app bar, simply add a class to the app bar and create a rule
based on win-appbar:
win-appbar.customFont {
font-family: "Wingdings";
}
To change the font of a specific command button, add a class to its extraClass property (such as
customButtonFont) and create a rule with the following selector (as used in Scenario 1 of the modified
sample):
button.customButtonFont .win-commandimage {
font-family: "Wingdings";
}
288