Quickstart: styling app bars (Windows Store apps using JavaScript and HTML)

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

Prerequisites

• Quickstart: adding an app bar with commands
• Quickstart: styling controls

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.1.0/css/ui-dark.css" rel="stylesheet">

produces an app bar that looks like this:

The light style sheet:

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

produces an app bar that looks like this:

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:
  CSS

  Copy

  
  .win-appbar .win-command
  {
      color: rgb(28, 160, 218);
  }
  
  

  

• .win-commandimage, which styles the icon image on the button:
  CSS

  Copy

  
  .win-appbar .win-commandimage
  {
      color: rgb(28, 160, 218);
  }
  
  

  

• .win-commandring, which styles the ring around the image on the button:
  CSS

  Copy

  
  .win-appbar .win-commandring
  {
      border-color: rgb(28, 160, 218);
  }
  
  

  

Pseudo-classes

You can use the following Pseudo_classes as selectors to style app bar icons 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.

  

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

  

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

  

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:

Summary

Related topics

WinJS.UI.AppBar

WinJS.UI.AppBarCommand

AppBarIcon

Build date: 11/29/2012