PDA

View Full Version : Creating new icon cls



miroperez
7 Jul 2010, 9:54 AM
What are the steps to create new icons like the ones in the shipping css? I tried copying an existing one then made minor changes to one like this:


.x-button-plain.x-button-mask img.play, .x-toolbar .x-button-plain.x-button-mask img.play,
.x-button-plain.x-button-pressed.x-button-mask img.play, .x-toolbar .x-button-mask.x-button-mask img.play, .x-button-mask.x-button-mask img.play
{
-webkit-mask-box-image: url('next.png');
}

Am I missing something?

elementsofway
11 Feb 2011, 6:42 AM
I'm guessing this thread is dead, but just in case anyone else stumbles upon it, here's an example of adding a custom icon to a tab panel...

Add this to your CSS:


.x-tab img.callReport, .x-button img.x-icon-mask.callReport {
-webkit-mask-image:url('179-notepad.png');
}


Within your code, use:


{
title: 'Call Report',
html: 'Hello World!',
iconCls: 'callReport'
},

AndreaCammarata
11 Feb 2011, 6:50 AM
Hi guys,
if you want to make a great Sencha Touch mobile application, you don't have to edit Sencha Touch CSS, but use SASS and Compass to create your own theme.
Take a look at this video to learn how.

http://vimeo.com/17879651

Hope this helps

acidfilez
23 Aug 2011, 7:23 AM
1) Add this to your css:


.x-tab img.import, .x-button img.x-icon-mask.import {
-webkit-mask-image: url('data:image/png;base64,replace here .... binary');
}

2) transform the image to binary, online link
http://www.greywyvern.com/code/php/binary2base64

3) then you get the binary, and you replace it on the url.

4) create the button on your sencha

var importBtn = new Ext.Button({
iconCls: 'import',
iconMask: true,
ui: 'plain',
handler: function() {
alert('Funciona Mierda');
}
});

yes, import is your image button.

enjoy

rocky1946
7 Sep 2011, 3:28 AM
Tried the previous thread and it works with slight modifications

1) Add this to your css: (since I use an iPad the apple.css is the css to modify)


.x-tab img.import, .x-button img.x-icon-mask.import {
-webkit-mask-image: url('data:image/png;base64,replace here .... binary');
}
the semi-colon after the closed-parenthesis is not needed

2) transform the image to binary, online link
http://www.greywyvern.com/code/php/binary2base64
does what it says it does

3) then you get the binary, and you replace it on the url.
the code generated goes where the phrase replace here ....binary in step 1 is located
be sure to leave the leading comma and the trailing single quote in place

4) create the button on your sencha

did not use the var importBtn = new Ext.Button
var importBtn = new Ext.Button({
iconCls: 'import',
iconMask: true,
ui: 'plain', used double quotes not single quotes to enclosed "plain"
handler: function() {
alert('Funciona Mierda');
}
});

since I already had the function defined elsewhere, simply added the following
to the items section where the buttons were to be displayed
my image button was named zoom_in

items : [{
iconMask : true,
ui : "plain",
iconCls : 'zoom_in',
handler : zoomIn
. . . . . .

bastard
9 Sep 2011, 11:35 AM
Since this tread keeps popping up high on google for custom icons in Sencha, decided to include a reference link i found:

http://www.senchatouchbits.com/9/adding-custom-embedded-inline-icons.html

wilzdezign
14 Sep 2011, 9:55 AM
adding semi-colon to end is optional (if it is the last statement in the CSS set). It is still preferred to show that the style attribute:value pair is done, and it is required if you have other CSS attribute:value pairs after it.

For single quote or double quote, both will work for the 'ui' value, it doesn't matter

Sasha172
12 Feb 2012, 10:53 PM
I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work :(

Help !

Naga
13 Feb 2012, 2:48 AM
Hi,

You just add it in your .html file



.sample {
-webkit-mask-box-image: url('/public/images/sample.png');
}


and refer it in your button by


iconCls: 'sample ',

it's working fine for me.

Regards,
Nag.

lpfx
27 Feb 2012, 5:48 PM
I followed the instructions perfectly but my iconCls is showing up as a blank grey box.

I'm trying to use the sencha touch 'speedometer2' as the iconCls. The icon is already in pictos folder. But no matter what I do it doesnt work :(

Help !

Sasha172, have you figured it out?

I'm having the same problem.

Can someone help me?

Sasha172
27 Feb 2012, 7:53 PM
Hi,
I managed to solve the problem. And since people still seem to be getting stuck here, I put up the steps on my blog. Take a look :)

http://techtalktone.wordpress.com/2012/02/28/use-custom-button-icons-in-sencha-touch

(http://techtalktone.wordpress.com/2012/02/28/use-custom-button-icons-in-sencha-touch)Hope this helps :D

lpfx
28 Feb 2012, 3:06 PM
Thank you!

steffenbrem
18 Apr 2012, 10:57 PM
Hey guys!

If your creating your own Sencha Touch 2 theme, it's better to use SASS. They documented this part very well and you are good to go in less then a hour.

If you done this, you need to add this in you SASS style file:

@include pictos-iconmask('your_icon_png_file_name');

Now, you NEED to save you icon (60x60) in a specific location. Inside the root of Sencha Touch, the correct path is:
resources/themes/images/default/pictos

Save your .png file here and it works :)

Let me know if this works for you too!

daffodilskkk
27 Jun 2012, 11:42 PM
.x-tab .x-button-icon.newicon,.x-button .x-button-icon.x-icon-mask.newicon{-webkit-mask-image:url(../sencha-touch-2.0.0-commercial/resources/themes/images/default/pictos/compose2.png)};
Put this in ur senha page and in code make following changes:

items : [
{
title: 'Sample',
iconCls: 'newicon '
}]

guilhermevrs
6 Jul 2012, 12:48 PM
I know the thread is old, but maybe more people will have this problem. I think the main problem is that you can't just edit your sass file, but you need to compile it as well.