CODEWITHSUNDEEP
jqueryjquery-uithemerollerjquery-ui-theme
Lolly
Lolly

Reputation: 36452

Displaying jquery themeroller icons in colors

H all,

I am using jquery themeroller alert icon. I want this icon to be displayed in different colors. For example display this icon in red color in error message and yellow for warning message. Below is the default icon. 

<span class="ui-icon ui-icon-alert"></span>

Is it possible to add colors to Jquery icons ?

Upvotes: 2

Views: 5206

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can build up your styled icon-set frame using theme roller or other softwares, then specify different background-image URL to different css class according to your needs.

For example: 

red color <span class="ui-icon ui-icon-alert red"></span>
<br><br>
blue color <span class="ui-icon ui-icon-alert blue"></span>

Css:

.ui-icon.red { background-image: url(http://code.jquery.com/ui/1.9.1/themes/base//images/ui-icons_cd0a0a_256x240.png); }
.ui-icon.blue { background-image: url(http://rhizosphere.googlecode.com/hg-history/e546f1a44825e2e1568de9d5bb87d3f2b1f41acd/src/stylesheets/blue/images/ui-icons_6391de_256x240.png); }

So the core jQuery UI css is the same, you simply override specific attribute.

Here is a working fiddle: http://jsfiddle.net/rrbn3/

Upvotes: 1

mfreitas
mfreitas

Reputation: 2405

You can change the icon's color and pretty much everything else using theme roller like so:

http://tinyurl.com/cjdquub

Upvotes: 1

Related Questions