Custom Image in Tab bar

[murali3]

Hi,

I need to fit the custom image in tab bar, i was going through the video http://vimeo.com/17879651 but here they are explain about pick the image from "pictos" and change the $base-color and $base-gradient etc.,

But i have a custom image which i need to fit into tab bar. Please find the attached image("tab-bar-icons.jpg") for the tab bar icons and also hi-lighted image is not actual. I am herewith attached the actual icon("asup.png") also.

Please help.

Regards,
Murali

[Naga]

hai,

You just define your image in your .html file as

.image{

-webkit-mask-image:url('/images/home_graphic.png');}

and refer that image using iconCls in your tabpanel.

iconCls: 'image',

[murali3]

Naga, Thanks for replying...

Actually i cannot directly modify the CSS file because it is generated by SASS. The "-web-mask-image" code is generated something like below...

.x-tab img.add, .x-button img.x-icon-mask.add {
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABqUlEQVRoBe2awWnDUBBE843B4NxcQSAFOC4lJeTkoxtJDykgvRhcgCFNJCFgIs+ChEHSJX93YT6ZD4ssmR3NztNFH5Wu6+6iVynlEZpbp+4J3s5OjWm7DRxZuMMCdUB9oyzNmrJe01hEejMtM5exIh6bCI3JbFkDT27EckEDs5DI8iHCWcmy6IowC4ksHyKclSyLrgizkMjyIcJZybLoijALiSwfIpyVLItuOGFso/xiuEvAgJdeK0DqJrHEhtsTTh9ul9y/ChR2KE+Y1ruDt2ccI7d6PszcK+oFFblWELt3Cn6i/8epMW5/W+LKGrUZ/0NwboF5QxuPsfY8dmOxJs41cBOYHCZF2BFeE60i3AQmh0kRdoTXRKsIN4HJYVKEHeE10frvCNvr4RH1HojH3rGHr3hqA7VdkxPKvuKJ3AA4hn7BM3xxA5N71Fdv1gz/tax3P+hFHmsJwM/8wraMadqOh5GuXda76rVqNWb7wgeevQvRRQ1MBCPFiginxEokKsJEMFKsiHBKrESiIkwEI8WKCKfESiQqwkQwUqyIcEqsRKIiTAQjxcoVrP83/9czD9EAAAAASUVORK5CYII=');
}

I tried the way you said in my CSS file, but it dint work for me

[murali3]

It is base64 converted code..

[Naga]

hai,

Am not saying you to modify in css file , You just define your image in .html file or in css file at last and just call that image using iconCls.

[murali3]

Naga, I tried it in the same way, but somehow that dint work for me....

[Naga]

hai,
Otherwise you can just specify your path in icon instead of using iconCls like

icon: '/public/images/pointer.png',

it's working fine for me.

[murali3]

xtype:'asups',
id: 'asuppagetab',
//iconCls: 'asup',
icon :'resources/themes/images/default/pictos/battery_full.png',
iconMask: false

[murali3]

Still no luck...

[Naga]

xtype:'asups',
id: 'asuppagetab',
//iconCls: 'asup',
icon :'resources/themes/images/default/pictos/battery_full.png',
iconMask: false

hai,

what is asup here. Add '/' before resources.

icon :'/resources/themes/images/default/pictos/battery_full.png',