Ändern der Farbe von jQueryUI dialog schließen X

Habe ich ein jQueryUI Dialog, aber das X zu schließen, es ist die gleiche Farbe wie der hintergrund. Wie könnte ich es ändern. Ich habe mit der jqueryUI CSS-gehostet auf Ihrer Website, und es funktioniert, also muss es mein jQuery Thema. Ich habe ein live-Beispiel an http://www.tapmeister.com/dialog/, und der code ist unten aufgeführt. Dank

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
        <meta charset="utf-8" />
        <meta name="robots" content="noindex" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link href="css/ui-lightness/jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
        <style type="text/css">
            .ui-dialog-titlebar { border:0; background:none; color:#000000; }
        </style> 

        <script type='text/javascript'>
            $(document).ready( function() {$("#dialog").dialog({autoOpen: true});});
        </script>

    </head>

    <body>
        <div id="dialog" title="Title">Hi There!</div>
    </body>
</html>
InformationsquelleAutor user1032531 | 2012-10-11
  1. 3

    Ihre image-Farbe ist weiß: http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png

    Öffnen Sie die Datei in Photoshop oder einem anderen Foto-Bearbeitungs-Programm. Dann eine Farbüberlagerung die Farbe, die Sie wollen. In Photoshop wäre es die "Menü > layer > layer style > color overlay". Speichern, dann die Datei hochladen.

    Kann es besser sein, nur verwenden Ihre vorhandenen orange Bild. Verwenden Sie einfach die CSS Deckkraft.

    .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}

    Diese Weise wird es einer weniger Bild genannt.

    EDIT:

    Code:

    .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}

    Ersetzen Mit:

    .ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}
    • Was war verwirrend war mir firebug sagt Fehler beim laden der url des Bildes.
    • Dein Beispiel scheint nicht zu funktionieren.
    • Ist filter: alpha(opacity=40); korrekt?
    • "filter: alpha(opacity=40);" ist richtig, aber das ist für den IE. "opacity: 0.4;" ist für andere Browser.
    • Sie sagen, es funktioniert nicht, was nicht funktioniert? Ich schaute auf Ihre ersten Beispiel zu versuchen und zu Debuggen, aber ich sehe, der code wurde noch nicht Hinzugefügt. Müssen Sie den alten code ersetzen mit dem, was ich gepostet.
    • Ich bearbeitet meine post zeigen, was code, der benötigt wird, um ersetzt werden, mit dem, was ich ursprünglich gepostet.
    • Dank Xarcell. Ihr Recht, es funktioniert. Ich zuerst legen Sie einfach Ihre neue CSS-Datei in die Haupt-Datei, firebug zeigte es als überschreiben der CSS in jquery-ui-1.9.0.custom.css, aber offenbar etwas anderes passiert. Ich bin mit ein wenig Schwierigkeiten zu verstehen, sprites. Den link den du gepostet zeigt ui-icons_ffffff_256x240.png hat es gezeigt, als weißen, aber nur, weil .decodiert {background-color: #FFFFFF;color: #222222;}. Ich habe auch versucht, die änderung von ui-icons_ffffff_256x240.png" ui-icons_222222_256x240.png" in der Haupt-Datei, aber nicht die Ergebnisse, die ich erwartet hatte. Können Sie helfen, zu erklären, was Los ist?
    • Danke für die Antwort. Eine Erklärung wäre extra zu schätzen!

    InformationsquelleAutor Xarcell
  2. 2

    Linie 262:

    .ui-widget-header .ui-icon {
 background-image: url("images/ui-icons_ffffff_256x240.png");
}

    Müssen Sie ein neues Bild hinzufügen, um dieses sprite (oder als neues Bild, komplett), das ist die Farbe, die Sie wollen.

    • Ich habe nie gearbeitet mit sprites vor. Ich glaube, ich habe mehrere von Ihnen in das Verzeichnis. ui-icons_222222_256x240 ist schwarz, und sollte funktionieren. Was wäre der beste Weg, um einfach nur mit Wechsel von ui-icons_ffffff_256x240 und mit ui-icons_222222_256x240
    InformationsquelleAutor Billy Moat
Schreibe einen Kommentar