Cómo Especificar (Override) De JQuery Icono De Color

He estado haciendo buen uso de jQuery iconos en mi web app, pero han llegado a un punto donde me gustaría usar un color que no soy capaz de lograr de forma predeterminada. Actualmente estoy usando el «Estado de la Calle», el tema, que se utiliza principalmente verde. Pero tengo un cuadro rojo con el texto en blanco, y le gustaría usar un icono que es de color blanco también. Hay iconos de color blanco que se suministran con el tema, pero que sólo se aplica cuando los iconos están dentro de un div (u otro recipiente) que tiene una clase de «ui-state-focus». Esto hará que el icono de blanco, pero se cambio el color de fondo verde, que quiero dejar como el rojo.

Hay alguna manera (probablemente a través de CSS) para anular lo que la imagen de fondo de jQuery utiliza para los iconos, así que puedo usar un color diferente?

Gracias.

ACLARACIÓN: supongo que sería de gran ayuda para mí para publicar el código html actualmente estoy trabajando con:

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

También tengo 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» actualmente se está comentado para que yo pueda ver. Tengo que configurar para fadeIn en la captura de error. Gracias de nuevo por la ayuda.

InformationsquelleAutor MegaMatt | 2009-11-30

6 Kommentare

  1. 91

    Puede sobrescribir los iconos con el siguiente CSS:

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

    Puede descargar el icono del archivo png en cualquier color que te gusta. Sólo cambia el color de la parte en la siguiente url:

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

    Por ejemplo, si desea iconos Rojos, y Aciano Azul los iconos, las direcciones Url que usted necesita son:

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

    Cómo Especificar (Override) De JQuery Icono De Color
    Cómo Especificar (Override) De JQuery Icono De Color

    etc.

    (pero no el uso de la dirección URL como un CDN, ser agradable y guardar los archivos localmente)

    • Y si usted desea utilizar los iconos de color sólo en ciertos lugares, y dejar los valores por defecto para el resto, usted puede fijar sus clases css como: ui-icon.redIcon { background-image: url(temas/altIcons/redIcons.png); } y se refieren a ella en html con las clases «ui-icon-check redIcon»
    • Yo necesitaba: «ui-icon ui-icon-check redIcon»
    • Saber de una manera con la última JQM?
    • Que el enlace funciona, y es maravilloso. Gracias por esto, realmente me ayudó a salir porque no había forma de estilo de el icono de la imagen.
    • Más 1 para el club de la pelea de referencia en azul aciano.
  2. 22

    AUTO-RESPUESTA: Especifica el fondo-dirección URL de la imagen en mí mismo para ser el archivo que utiliza los iconos de color blanco. Así que he añadido un par de líneas a mi archivo CSS:

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

    Esta esencialmente reemplaza la imagen de fondo que por defecto el css jQuery archivo que desea utilizar para el icono, y se logró el color que yo quería. Por supuesto, esto sólo ha trabajado por un icono de color blanco .archivo png se incluye con el tema. Si yo quería algo de loco de color, como el violeta, yo habría necesitado para crear mi propio icono(s). Tenga en cuenta que yo necesitaba para alargar la URL en mi propio archivo CSS frente a la URL que se especifica en el archivo CSS jQuery, porque ellos están situados en dos lugares diferentes en mi fuente.

    • yo también encontré esto. pero hay una manera fácil de cambiar el color de los iconos?
    • Gracias por esto! Yo quería hacer mi botón de «eliminar» los iconos de color rojo, pero deje a los demás como predeterminado. Funciona como un campeón, pero esperemos que añadir una mejor manera algún día.
    • Que tienen; acaba de agregar una clase de el color que quieras: class="ui-icon ui-icon-alert Red"
  3. 16

    Uso integrado en el icono de generador
    para los colores de los iconos #00a300 # verde oscuro

    .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;
    }
    • Leyenda. Yo no sabía acerca de esto. Yo solía jqueryui.com/themeroller/images/… para generar un nuevo conjunto de iconos rojos que luego se agregan al conjunto de iconos en mi tema. 256 ancho y 240 de altura es el valor predeterminado de los iconos de tamaño de archivo (echa un vistazo en los temas de su archivo de imagen)
    • No creo que jQuery-UI quiere que su icono de generador utilizado como un CDN. No estoy seguro de si su servidor se almacena en caché las imágenes, pero todavía tiene que generar esa imagen cuando la caché se ha ido. No es muy agradable para subrayar su servidor como que…. Usted debe generar en él una vez y guardarlo en el servidor
  4. 0

    Probablemente la forma más sencilla de hacerlo es averiguar exactamente lo que imagefile jQuery es el uso de los iconos y, a continuación, modificar ese archivo de imagen (o crear el suyo propio) y colocarlo en el lugar.

    • Que sin duda trabajar, pero otras partes de mi página de clases de uso que hacen uso de la gris por defecto los iconos, y hacerlo adecuadamente. Yo no quiero echar a perder los iconos para lograr el icono de color blanco efecto en un solo lugar.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...