Comment Spécifier (Override) JQuery Couleur De L'Icône

Question

J'ai été faire un bon usage de l'jQuery icônes dans mon application web, mais sont venus à un point où je voudrais utiliser une couleur que je ne suis pas en mesure d'atteindre par défaut. Je suis actuellement à l'aide de la "State Street" thème, qui utilise principalement vert. Mais j'ai une boîte rouge avec du texte en blanc, et que vous souhaitez utiliser une icône qui est blanc ainsi. Il y a des icônes blanches qui sont fournis avec le thème, mais ils ne sont appliquées lorsque les icônes sont à l'intérieur d'un div (ou autre récipient) qui a une classe de "ui-state-focus". Cela rendra l'icône blanc, mais va changer la couleur d'arrière-plan de vert, je veux laisser comme rouge.

Est-il possible (probablement via CSS) pour remplacer ce que le fond de l'image jQuery utilise pour les icônes, afin que je puisse utiliser une couleur différente?

Merci.

PRÉCISIONS: je suppose que ce serait aider pour moi de poster le code html, je suis actuellement en train de travailler:

<!-- currently produces a default 'grey' icon color -->
<!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div -->
<div id="errorMessage">
    <span class="ui-icon ui-icon-alert" style="float: left"></span>
    Only 1 Activity can be added at a time 
</div>

J'ai aussi CSS:

.dialog #errorMessage
{
    /*display: none;*/
    background-color: #CC3300;
    color: #FFFFFF;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: bottom;
    bottom: auto;
    font-size: .80em;
    width: 100%
}

"display: none" est actuellement en commentaire afin que je puisse le voir. Je l'ai mis en place pour fadeIn sur erreur de capture. Merci encore pour l'aide.

Answer 1

Vous pouvez remplacer les icônes avec le code CSS suivant:

.ui-icon
{
    background-image: url(icons.png);
}

Vous pouvez télécharger l'icône du fichier png dans n'importe quelle couleur que vous aimez. Il suffit de changer la couleur de la partie de l'url suivante:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

Par exemple, si vous voulez des icônes Rouges, et de Bleuet Bleu icônes, les Url que vous avez besoin sont:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

etc.

(mais n'utilisez pas l'URL comme CA, être gentil et enregistrer les fichiers localement)

Answer 2

AUTO-RÉPONSE: Spécifié l'arrière-plan-URL de l'image de moi-même pour être le fichier qui utilise les icônes blanches. J'ai donc ajouté quelques lignes de mon fichier CSS:

.dialog #errorMessage .ui-icon
{
    background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png);
}

Essentiellement, cela remplace l'image d'arrière-plan que la valeur par défaut de jQuery fichier css veut utiliser pour l'icône, et de la couleur que je voulais. Bien sûr cela ne fonctionné, parce qu'une icône blanche .png fichier inclus avec le thème. Si je voulais quelques fous de la couleur, comme le violet, j'aurais besoin de créer mon propre icône(s). Notez que j'ai besoin d'allonger l'URL dans mon propre fichier CSS rapport à l'URL spécifiée dans le fichier CSS jQuery, parce qu'ils sont situés à deux endroits différents dans ma source.

Answer 3

Utilisez la fonction de l'icône de générateur pour la couleur de l'icône #00a300 # vert foncé

.ui-icon
{
    background-image: url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;
}

Answer 4

Probablement la façon la plus simple de le faire est de savoir exactement ce que imagefile jQuery utilise pour les icônes, puis modifier le fichier image (ou en créer un) et déposez-la en place.

Answer 5

Pour stocké localement fichier css dans ce cas, la couleur rouge:

<style>
#my_id .ui-icon {
  background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png);
}
</style>}