locked
Set color of AppBarCommand?and gap? RRS feed

  • 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


    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

    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


    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

    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.
    Sunday, October 14, 2012 3:03 PM