WinJS CSS styling for .win-toolbar-overflowareabutton not working

Question

I'm trying to set the color on the view more button and labels on a WinJS toolbar following the documentation here.

Link to WinJS.UI.ToolBar object documentation.

Here is a link to Styling AppBars and ToolBars (HTML).

I am using winjs 4.4.0. release.

this is the CSS styling code that I am using(it is in my default CSS file):

.win-toolbar .win-toolbar-overflowareabutton{
    color:blue;
}

Have also tried these:

.win-toolbar win-toolbar-overflowareabutton{
    color:blue;
}

.win-toolbar .win-toolbar-overflowbutton{
    color:blue;
}

.win-toolbar win-toolbar-overflowbutton{
    color:blue;
}

I will note that other styling for the ToolBar are working.

UPDATE

Would like to get this to work, in case I want to use OTHER colors besides the defaults found in:

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

Any thoughts? Thank You for checking this out. - Rob0

Answer 1

Following some advice here.

One only need to dig through one of the WinJS CSS files to find the appropriate code that they used to style those elements.

The view more button also known as the ellipsis button can be styled with this:

.win-commandingsurface button.win-commandingsurface-overflowbutton:enabled .win-commandingsurface-ellipsis{
    color:blue;
}

This was found on Ln 6138 of the ui-dark.css file.

For the command image I used:

.win-commandimage{
    color:blue;
}

And for the command label I had to use two styles if I wanted the color to change. The other two above would do this automatically for you.

button .win-label{
    color:blue;
}

button:hover .win-label{
    color:white;
}

Hope this helps.

-Rob0