CODEWITHSUNDEEP
htmlwindows-8microsoft-metrowinjsappbar
Akil Pandu
Akil Pandu

Reputation: 567

How to customize Appbar command image in metro apps?

I have metro application in which i am trying to implement Appbar command control. Am able to display the Appbar with some images but the problem is the image is moving when i highlight(hover). Some of my code is here

.homebtn1 .win-commandimage{ background-image: url('/images/homeActive.png');
width:140px; height:75px; };

.appbarExtraClass .win-commandicon
{
height:75px;
width:140px;
margin:0px 2px 2px 2px; 
}

Can anyone please tell me what change do i need to made for my above css in order to make images constant.

Thank you.

Upvotes: 2

Views: 448

Answers (1)

Disco Banana
Disco Banana

Reputation: 102

You can use the :disabled :hover and :active pseudo selectors and apply them to your appBar. It's likely that the styles are what is making the buttons move around a little. This article shows some of the how to's http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx

This blog post shows a lot of colorizing and customizing appbar buttons http://blogs.msdn.com/b/shawnste/archive/2012/07/17/colorizing-a-modern-win8-javascript-appbar-and-appbarcommands.aspx

Upvotes: 1

Related Questions