jquery icon?

[Nick]

For buttons in a browse I can enter a jquery icon (name). But what to enter here?
I looked up the jquery icon names but these names don't seem to work here.
What works is an abbreviation like 'check' for 'ui-icon-check' but is this how it should work
and where can I find all of these abbreviations?

Are there somewhere icon .png files stored for these jquery icons that I could change?

TIA,
Nick

C9 Nettalk7

[kevin plummer]

yes - just drop the ui-icon-

on the jquery website if you mouse over the icons it will tell you the name.

[Bruce]

what Kevin said.

>> Are there somewhere icon .png files stored for these jquery icons that I could change?

yes - all the icons are together in a single PNG. The file is in your \themes\theme\images folder. The name of the file depends on the colors etc.

cheers
Bruce

[Nick]

>yes - all the icons are together in a single PNG. The file is in your \themes\theme\images folder. The name of the file depends on the colors etc

Yes I've seen that file but do you know how to change a single icon? If I open this in whatever graphic editor it shows as one picture.


Thanks Kevin and Bruce.
Cheers,
Nick

[Nick]

Well, never mind for the moment.
It's a bit of a puzzle. Not all icons can be selected by dropping the first "ui-icon-".

Nick

[Bruce]

Hi Nick,

>> Yes I've seen that file but do you know how to change a single icon? If I open this in whatever graphic editor it shows as one picture.

It appears as one image, because it is one image. Fetching files from a server is "expensive". So one of the optimizations is to put all the graphics together into one graphic file, then use CSS to show "just a little bit" at a time. If you inspect the www.CapeSoft.com home page in FireBug you'll see this in action.

The pictures used for the menu on the right, and the logo on the top left, are all enclosed in a single PNG file. If you inspect say the logo with FireBug you'll see that it uses a couple of CSS attributes;

background-image: url("/images/menu.png");
background-position: 0 -590px;
height: 90px;
width: 300px;

the image holds all the graphics. The background-position sets the "position" of the top left corner, the height and width then clip as necessary.

the icons use exactly the same approach. All are combined into a single file, and the CSS determines which little bit is displayed. (actually the ui-icon-name is really the name of the CSS class.)

You can add more icons by adding more CSS - using either a different Image file, or the same image file, with more stuff added. Or you can edit the existing icons just by editing the existing image file.

>> It's a bit of a puzzle. Not all icons can be selected by dropping the first "ui-icon-".

make sure you're distinguishing between the jQuery-UI icons and the jQuery-Mobile Icons. They use different graphic files.
And remember the name is case sensitive.

cheers
Bruce

[Nick]

Hi Bruce,

Thanks for this info.
I wanted to change the colo(u)r of one f the icons and found out how to do it.

Cheers,
Nick