Scenario 2 of the

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

To provide graphics of your own, do the following for a 100% resolution scale: • Create a 160x80 pixel png sprite image with a transparent background, saving the file with the .scale-100 suffix in the filename. • This sprite is divided into two rows of four columns—that is, 40x40 pixel cells. The top row is for the light styling theme, and the bottom is for the dark theme. • Each row has four icons for the following button states, in this order from left to right: default (rest), hover, pressed (active), and disabled. • Each image is centered in its respective 40x40 cell, but remember that a ring will be drawn around the icon, so generally keep the image in the 20–30 pixel range vertically and horizontally. It can be wider or taller in the middle areas, of course, where the ring is widest. For other resolution scales, multiple the sizes by 1.4 (140%) and 1.8 (180%) and use the .scale-140 and .scale-180 suffixes in the image filename. To use the custom icon, point the command’s icon property to the base image URI (without the .scale-1x0 suffixes)—for instance, icon: 'url(images/icon.png)'. Scenario 3 of the HTML Appbar Control sample demonstrates custom icon graphics for an Accept button: The icon comes from a file called accept.png, which appears something like this—I’ve adjusted the brightness and contrast and added a border so that you can see each cell clearly: The declaration for the app bar button then appears as follows (some properties omitted for brevity): Note that although the sample doesn’t have variations of the icon for resolution scales, it does provide variants for high contrast themes, an important accessibility consideration that we’ll come back to in Chapter 17. For this reason, the button element includes style="-ms-high-contrast-adjust:none" to override automatic adjustments for high contrast. 289