Answered by:
Set color of AppBarCommand?and gap?

Question
-
How to set icon color of AppBarCommand , I can set font color.
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'contact', label:'登陆'}" style="color: #fff;"></button>
And how to set the interval between them? Or set their size?
Friday, March 30, 2012 8:23 AM
Answers
-
Set the border-color also:
/* CSS - Appbar style */ .win-appbar { background-color: #7C007C; color: #FFFFFF; } .win-appbar .win-label, .win-appbar .win-commandimage, .win-appbar button:hover:active .win-commandring, .win-appbar button:hover .win-commandring, .win-appbar .win-commandring { color: #FFFFFF; border-color: #FFFFFF; }
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- Edited by Jie Bao Monday, April 2, 2012 9:45 AM
- Proposed as answer by Matt SmallMicrosoft employee, Moderator Wednesday, April 4, 2012 3:18 PM
- Marked as answer by Jie Bao Monday, April 9, 2012 7:25 AM
Monday, April 2, 2012 9:41 AM -
change
.win-appbar button {
margin-left: -20px; /* or margin-right */
}to decrease their interval.
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- Proposed as answer by Matt SmallMicrosoft employee, Moderator Wednesday, April 4, 2012 3:18 PM
- Marked as answer by Jie Bao Monday, April 9, 2012 7:25 AM
Monday, April 2, 2012 9:45 AM
All replies
-
Set the border-color also:
/* CSS - Appbar style */ .win-appbar { background-color: #7C007C; color: #FFFFFF; } .win-appbar .win-label, .win-appbar .win-commandimage, .win-appbar button:hover:active .win-commandring, .win-appbar button:hover .win-commandring, .win-appbar .win-commandring { color: #FFFFFF; border-color: #FFFFFF; }
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- Edited by Jie Bao Monday, April 2, 2012 9:45 AM
- Proposed as answer by Matt SmallMicrosoft employee, Moderator Wednesday, April 4, 2012 3:18 PM
- Marked as answer by Jie Bao Monday, April 9, 2012 7:25 AM
Monday, April 2, 2012 9:41 AM -
change
.win-appbar button {
margin-left: -20px; /* or margin-right */
}to decrease their interval.
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
- Proposed as answer by Matt SmallMicrosoft employee, Moderator Wednesday, April 4, 2012 3:18 PM
- Marked as answer by Jie Bao Monday, April 9, 2012 7:25 AM
Monday, April 2, 2012 9:45 AM -
Set the border-color also:
/* CSS - Appbar style */ .win-appbar { background-color: #7C007C; color: #FFFFFF; } .win-appbar .win-label, .win-appbar .win-commandimage, .win-appbar button:hover:active .win-commandring, .win-appbar button:hover .win-commandring, .win-appbar .win-commandring { color: #FFFFFF; border-color: #FFFFFF; }
Bob Bao [MSFT]
MSDN Community Support | Feedback to us
Also, if your style choices mean the 0.13 alpha on the hover for the ring isn't strong enough anymore, then the rule to change it is
button:hover .win-commandring { background-color: red; }
Obviously, specifically red is probably a bad choice, but it makes it easy to confirm that it's working. I use the color rgba(255,255,255, 0.25) when I need a stronger hover.- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Monday, October 15, 2012 3:31 PM
Sunday, October 14, 2012 3:03 PM