PHPDevShell

Can you change the color of the jquery ui icons?

Asked by jsherk

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

Language:
English Edit question
Status:
Solved
For:
PHPDevShell Edit question
Assignee:
No assignee Edit question
Solved by:
jsherk
Solved:
Last query:
Last reply:

This question was reopened

Revision history for this message
jsherk (jeff-forerunnertv) said : 		#1

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

Revision history for this message
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.

Revision history for this message
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
{$alarm_clock}

And is it already enclosed in an IMG tag?

Thanks

Revision history for this message
TitanKing (titan-phpdevshell) said : 		#4

All correct, everything is done for you and you would just use
{$alarm_clock}

Revision history for this message
jsherk (jeff-forerunnertv) said : 		#5

I like that... very nice!

THanks

Revision history for this message
jsherk (jeff-forerunnertv) said : 		#6

Oops... did not mean to reopen it!