PDA

View Full Version : tabbar ground



Ploetzi
16 Feb 2011, 10:48 AM
Hi,
how can i change the images in the tabbar on the ground,...there i found that : webkit-mask-image
but how can i get my own images in there?

x-button img.x-icon-mask.reply{-webkit-mask-image:url('data:image/png;base64,

i found in the css, so if i add my own png, how do i add this, which size and which format does this image now have to have so that it works, if i do not embedd it into the css.

best regards

existdissolve
26 Feb 2011, 7:16 AM
The easiest way would be to look at the icons in sencha/resources/themes/default/images/pictos, and then base your custom icons off of how these are created.

Next, you could save your custom images in this directory, and then create your own custom theme and use the SASS @include directive to add your custom icons into the available "set". This way, you can simply use the same methodology for specifying icons for tabs (e.g., iconCls: "mycustomicon"), and don't need to bother with trying to add custom CSS.

Here are some good articles which summarizes exactly what you'll need to pull this off: http://www.vinylfox.com/custom-styling-a-sencha-touch-app/
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch/