Change the image style af an AppBarCommand in winJs

Question

I've seen the new navbar control in winJs 2.0 for windows 8.1, is fantastic an simple.

But how did they develop the weather app navbar in windows 8? I mean the nice big squared buttons instead of the small round ones?

The only way I found is to have an appbar and don't use any AppBarCommands (because I can't find a way to change the shape of those) but only divs and do all the styling manually.

Is that the only solution or is it possible to square the circle?

Answer 1

I found it myself in the end, changing those classes can change entirely the style of the AppBarCommand:

CSS class           Description
win-command         Styles the entire AppBarCommand.
win-commandicon     Styles the icon box for the AppBarCommand.
win-commandimage    Styles the image for the AppBarCommand.
win-commandring     Styles the icon ring for the AppBarCommand.
win-label           Styles the label for the AppBarCommand.

for example to square the circle:

.win-appbar .win-commandring
{
    border-radius: 0;
}

.win-appbar:hover .win-commandring
{
    border-radius: 0;
}

It's a hard job to ovverride all the default behaviour but it can be done.

Have a look at this for an example of the main styles: http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx