2010-12-14 2 views
2

Ich habe ein Projekt von einem anderen Entwickler geerbt, der jQuery UI verwendet hat.Wie lege ich die Textfarbe der Titelleisten von jQuery UI-Dialogen fest?

Ich habe ein paar Seiten hinzugefügt, die jQuery UI Dialoge und jQuery UI Datepickers haben.

Das Problem ist, der Text des Titels in der Titelleiste des jQuery UI-Dialogfelds hat dieselbe Farbe wie die Farbe der Titelleiste. Im jQuery UI Datepicker haben die Pfeile, auf die der Benutzer klickt, um den Monat im Kalender zu ändern, die gleiche Farbe wie der Hintergrund dort!

Ich denke, das ist irgendwo in der jQuery UI CSS festgelegt. Kann mir bitte jemand sagen, wo im CSS ich die Einstellung vornehmen muss, damit der Text sichtbar ist?

Mein .ui-Widget Abschnitt ist unten angegeben, und ich bin immer grau Widgets und Text auf einem grauen Hintergrund:

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } 
.ui-widget .ui-widget { font-size: 1em; } 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; } 
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } 
.ui-widget-content a { color: #222222/*{fcContent}*/; } 
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; } 
.ui-widget-header a { color: #222222 /*{fcHeader}*/; } 

UPDATE: ich die Punkte für die Antwort unten ausgezeichnet. Ich habe festgestellt, dass der Grund dafür, dass das Widget unsichtbar ist, dass die jQuery-UI-Bilddateien in der Kopie des Programms fehlen, an dem ich gerade arbeite!

Antwort

2

-Mine sieht aus wie dieses

.ui-widget-header { border: 1px solid #aaaaaa; 
background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 
50% 50% repeat-x; color: #222222; font-weight: bold; } 

I color: #222222 zu color: red geändert und es änderte nur den Text im Dialog-Header.

+0

Ich habe versucht, die # 222222 in der Ui-Widget-Header auf Rot zu ändern. Es hat den Text, der den Monat "Dezember" anzeigt, in Rot geändert, aber die Schaltflächen zum Ändern in einen anderen Monat sind immer noch auf einem grauen Hintergrund unsichtbar. : -/ –

+0

Interessanterweise verwandelt sich das Widget, wenn ich die Hintergrundfarbe "ui-widget-header" in BLAU ändere, in ein unsichtbares blaues Widget auf blauem Hintergrund, aber wenn ich die Maus darüber bewege, leuchtet es grau! –

+0

Das liegt daran, dass den Schaltflächen und dem Hover-Ereignis unterschiedliche Stile zugewiesen sind. – Josh

2

Die jQuery UI Theme Roller kann Ihnen helfen, Ihr eigenes Thema für jQuery auszurollen. Wenn ein früherer Entwickler jQuery verwendet hat, hat er höchstwahrscheinlich auch Theme Roller verwendet, um sein CSS zu erstellen. Ich würde Ihre Dateien durchsuchen und nach einer Datei mit einem Namen wie jquery-ui-*.css suchen, wobei das * die Versionsnummer (z. B. 1.8.4) darstellt.

Verwandte Themen