Как указать (переопределить) цвет значка JQuery

Question

Я хорошо использовал значки jQuery в своем веб-приложении, но дошел до того, что я хотел бы использовать цвет, которого я не могу получить по умолчанию. В настоящее время я использую тему "State Street", которая в основном использует зеленый. Но у меня есть красное поле с белым текстом, и я хотел бы также использовать значок белого цвета. Есть белые значки, которые поставляются с темой, но они применяются только тогда, когда значки находятся внутри элемента div (или другого контейнера), который имеет класс «ui-state-focus». Это сделает значок белым, но изменит цвет фона на зеленый, который я хочу оставить красным.

Есть ли способ (скорее всего через CSS) переопределить фоновое изображение, которое jQuery использует для иконок, чтобы я мог использовать другой цвет?

Спасибо.

РАЗЪЯСНЕНИЕ: Я думаю, это помогло бы мне опубликовать HTML, с которым я сейчас работаю:

<!-- 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>

У меня также есть 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" в настоящее время закомментировано, так что я могу видеть это. Я действительно настроил его на fadeIn при обнаружении ошибок. Еще раз спасибо за помощь.

Answer 1

Вы можете перезаписать значки с помощью следующего CSS:

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

Вы можете скачать файл icon png в любом понравившемся вам цвете. Просто измените цветную часть в следующем URL:

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

Например, если вам нужны красные значки и значки Cornflower Blue, вам понадобятся следующие URL:

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

и т.д.

(но не используйте URL в качестве CDN, будьте внимательны и сохраняйте файлы локально)

Answer 2

САМО ОТВЕТ: Я сам указал URL-адрес фонового изображения в качестве файла, который использует белые значки. Поэтому я добавил несколько строк в свой CSS-файл:

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

Это по существу переопределяет фоновое изображение, которое файл jQuery css по умолчанию хочет использовать для иконки, и получает желаемый цвет. Конечно, это сработало только потому, что в тему был включен белый значок .png. Если бы я хотел какой-нибудь сумасшедший цвет, например, фиолетовый, мне нужно было бы создать свои собственные иконки. Обратите внимание, что мне нужно было удлинить URL-адрес в моем собственном CSS-файле по сравнению с URL-адресом, указанным в CSS-файле jQuery, поскольку они расположены в двух разных местах в моем источнике.

Answer 3

Использовать встроенный генератор иконок для цвета значка # 00a300 # темно-зеленый

.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

кнопка: [ text: // не используйте это
html: «Нет», «класс»: «bg-дополнительный текст-белый p-2 border-0»,
нажмите: функция () {
$ (Это) .dialog ( "закрыть");
} ]

Answer 5

Для локально сохраненного файла CSS в этом случае цвет красный:

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

Answer 6

Вероятно, самый простой способ сделать это - выяснить, какой именно файл изображения jQuery использует для иконок, а затем изменить этот файл изображения (или создать свой собственный) и поместить его на место.