Can you change the color of the jquery ui icons?

Asked by jsherk on 2011-01-17

I was trying to figure out how change the color of the jquery ui icons that are used with my skin. I am using smoothness skin in cloud theme, so all icons are grey/black. I wanted to use a nice bright red cross for delete, instead of just grey.

The short answer to this is, NO you can't change the color!

The only way to change the color is to change skins, which them gives you a whole new set of icons that are all the same color.

My solution? Check out all the great colorful icons provided in the cloud theme located in /themes/cloud/images/ folder. I particularly like the ones in the icon-16 folder.

Now you cannot use these with jquery though (or if you can, I do not know how), so you just have to add an image tag to them instead of using the ui-icon-whatever in the class.

Personally, I copied the icons I want into my plugin /images/ folder, since there are only a dozen or so that I use, and that way they will still work even if I change themes.

Question information

English Edit question
PHPDevShell Edit question
No assignee Edit question
Solved by:
Last query:
Last reply:

This question was reopened

jsherk (jeff-forerunnertv) said : #1

Marking this question as solved, since it wasn't really a question!

TitanKing (titan-phpdevshell) said : #2

There is an easy way to use about three thousand icons included with PHPDevShell. Look under themes/cloud/images/icons-16 what images you would like to use. Now simply call your images with:

$this->template->icon('image-name', 'Image Description');
$this->template->icon('alarm-clock', 'Image Example 1');

Want the icon larger? No problem use 16/24/32 for respective size images in its respective folder in images.
$this->template->icon('alarm-clock', 'Image Example 1', '24');

Note, no PNG is required at the end of 'alarm-clock.png' using 'alarm-clock' is all that is required.

jsherk (jeff-forerunnertv) said : #3

So how you use it in the actual template? Do I just pass it in as a variable and then let smarty display it?

CONTROLLER .php file
$alarm_clock = $this->template->icon('alarm-clock', 'Image Example 1', '24');
$view->set('alarm_clock', $alarm_clock);

VIEW .tpl file

And is it already enclosed in an IMG tag?


TitanKing (titan-phpdevshell) said : #4

All correct, everything is done for you and you would just use

jsherk (jeff-forerunnertv) said : #5

I like that... very nice!


jsherk (jeff-forerunnertv) said : #6

Oops... did not mean to reopen it!