Glad to hear it's working.
Since you're effectively hosting your own UI theme anyway, you should check out the jQuery UI themeroller. This would give you a lot more control over your theme, I think.
I've not really messed with the jQuery UI skin very much, but I'm fairly sure these steps will get you where you need to implement your own theme:
- First, go to the link above and input your colors as you like, then download the whole zip file.
- Extract the "jquery-ui-1.9.1.custom.zip" file on your computer. Navigate to the new folder, then to the "css" folder immediately inside that, then "custom-theme" (or whatever you named it when you downloaded it).
- Rename the "jquery-ui-1.9.1.custom.css" file to "jquery-ui.css", and rename the "images" folder to "jquery-images".
- Copy both of them into your skin folder.
- Open your layout.master, and look for the "<portal:StyleSheetCombiner" line. Make sure it has "IncludeJQueryUI="false" inside it. If it's set for true, switch it to false.
- Next look for the "<portal: ScriptLoader" line. Add this inside it: AssumejQueryUiIsLoaded="true".
- Directly underneath your ScriptLoader, paste the following line:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
- Open your style.config. Inside it you'll need to add the line: <file>jquery-ui.css</file> (if it's not already there).
- Next, open the "jquery-ui.css" file. Because the folder for your images is different, and because the jquery css is now being combined with all your other CSS by the StyleSheetCombiner, you'll need to make a few changes. Ignore the quotes for find & replace stuff.
- First, do a "find and replace". Find "(images/", and replace it with "('jquery-images/".
- Now find ".png)", and replace it with ".png')". The apostrophe's are important.
- Next, find "(Opacity", and replace with "('Opacity".
- Next, find "('Opacity", then look at each line and add an apostrophe to the end right before the number. You can't do a replace here because the numbers are always different. The like will say "filter: alpha('Opacity=#)", you'll need it to say "filter: alpha('Opacity=#')" - Note the apostrophes.
This way you'll hopefully be able to get more control over your color scheme and images.
Hope this helps,
-Isaac