How do I set the text color of jQuery UI dialog title bars?

Question

I inherited a project from another developer who used jQuery UI.

I've added a few pages that have jQuery UI dialogs and jQuery UI datepickers.

The problem is, the text of the title in the jQuery UI dialog title bar is the same color as the color of the title bar. In the jQuery UI datepicker, the arrows that the user clicks to change the month on the calendar are the same color as the background there too!

I think this is set somewhere in the jQuery UI CSS. Can someone please tell me where in the CSS I need to make the adjustment so that the text is visible?

My .ui-widget section is given below and I'm getting gray widgets and text on a gray background:

.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: I have awarded the points for the answer below. I discovered that the reason that the widget is invisible is that the jQuery UI image files are missing from the copy of the program I'm working on!

Solution 1

Mine looks like this

.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 changed color: #222222 to color: red and it changed only the text in the dialog header.

Solution 2

The jQuery UI Theme Roller can help you roll out your own theme for jQuery. If a previous developer used jQuery, then he most likely also used theme roller to build his CSS. I would search through your files and look for a file with a name like jquery-ui-*.css where the * represents the version number (e.g. 1.8.4).