PDA

View Full Version : icon & theming madness



martinorth
1 Jun 2011, 4:46 PM
I am getting mad while trying to add custom coloured icons to a toolbar button. I can't get it to work. I can't see my icons. Here is the code:

I use a sass mixin to generate the css rules:


@mixin custom-iconmask($name) {
x-tab.x-tab-active img.#{$name}, .x-button img.x-icon-mask.#{$name} {
background-image: url(/kibuto/resources/img/icons/#{$name}.png) !important;
-webkit-background-size: 1.65em;
background-color:transparent !important;
}
.x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
background-image: url(/kibuto/resources/img/icons/#{$name}.png) !important;
-webkit-background-size: 1.65em;
background-color:transparent !important;
}
}

the mixin generates these css


x-tab.x-tab-active img.search_contact, .x-button img.x-icon-mask.search_contact {
background-image: url(/kibuto/resources/img/icons/search_contact.png) !important;
-webkit-background-size: 1.65em;
background-color: transparent !important;
}

.x-tab img.search_contact, .x-button img.x-icon-mask.search_contact {
background-image: url(/kibuto/resources/img/icons/search_contact.png) !important;
-webkit-background-size: 1.65em;
background-color: transparent !important;
}

I add iconCls to my button.


contactSearchButton = new Ext.Button({
text: 'Contact Search',
focus: 'Contact',
iconCls: 'search_contact',
ui: 'dark',
handler: kibuto.controllers.search.doSearch,
scope: this
});

This generates:


<div id="ext-comp-1015" class="x-button x-button-plain x-iconalign-left"><span class="x-button-label" id="ext-gen1070">Contact Search</span><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="search_contact" id="ext-gen1071"></div>

I am testing with safari on a windows 7 system and I can see no Icons. What's wrong with my aproach? How it is possible to add custom coloured icons (with no masks) to a button or a tabbar tab button?

martinbroos
10 Jun 2011, 7:54 AM
I think you should either use direct url's to the icon or use the mask way.

so how you work now you only add the argument iconMask: true; and the icon will display.
Otherwise add the absolute url. like. icon: '/icons/test.png';

Maybe theirs an other way but i don't know it ...