Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Quickstart: styling app bars (HTML)

Applies to Windows and Windows Phone

This quickstart gives a few examples of how to style an app bar and its controls.

Prerequisites

Introduction

Quickstart: styling controls explains how the Windows Library for JavaScript style sheets provide a set of styles that automatically give your app the Windows 8 look and feel. The following examples demonstrate the use of Cascading Style Sheets (CSS) to customize some app bar styles.

Light and dark themes

When you choose the light or the dark style sheet for your app, it affects the appearance of the app bar as well as the other controls of your app. For this sample app bar:


<div data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'home', label:'Home', onclick:null, section:'global', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'sort', label:'Sort', type:'button'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon: 'more', label:'More', type:'flyout'}"></button>
</div>

the choice of the dark style sheet:


<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

produces an app bar that looks like this:

Dark style app bar

The light style sheet:


<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

produces an app bar that looks like this:

Light style app bar

Useful CSS properties

The following CSS properties are commonly used with the app bar control:

  • Border-color: Controls the border color of the app bar.

    For example, border-color: rgb(255, 224, 100);

  • Background-color: Controls the background color of the app bar.

    For example, background-color: rgb(255, 224, 100);

Common part and state selectors

Some useful CSS selectors for styling parts and states of your control are:

  • .win-command, which styles the app bar command label:
    
    .win-appbar .win-command
    {
        color: rgb(28, 160, 218);
    }
    
    

    Buttons with colored command labels

  • .win-commandimage, which styles the icon image on the button:
    
    .win-appbar .win-commandimage
    {
        color: rgb(28, 160, 218);
    }
    
    

    Buttons with colored command icons

  • .win-commandring, which styles the ring around the image on the button:
    
    .win-appbar .win-commandring
    {
        border-color: rgb(28, 160, 218);
    }
    
    

    Buttons with colored rings

Pseudo-classes

You can use the following Pseudo_classes as selectors to style app bar buttons when they're in certain states:

  • :hover - The user places the cursor over the icon but does not activate it by clicking. A tooltip of the icon label displays by default while hovering.

    Tooltip over the Home button while hovering

  • :active - The icon is active between the time the user presses the control and chooses an option.

    Active Home button

  • :disabled - The icon cannot accept user interaction. The disabled property of the icon must be set to "disabled" for this pseudo-class.

    Disabled Home button

Styling an app bar with custom colors

One more example of styling an app bar:


.win-appbar
{
    background-color: yellow;
    border: 3px solid blue;
}

.win-appbar .win-commandimage
{
    color: red;
}

produces the following app bar colors:

Yellow app bar

Summary

In this quickstart we gave some examples of styling an app bar and its controls.

Related topics

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

Show:
© 2014 Microsoft