Modifying the look of all of those modal windows

This isn't a question...more of a "how to". I looked through the forums and there wasn't a mention of it, and the wiki mentions it a bit, but not to this extent.

I recently was working on a client's site that was very monochromatic.   The problem is, all of the popup modal boxes (“Added to Cart”, "Saving Order…" , etc) were blue and bubbly. I was able to change those by modifying the file "jquery-ui-1.7.2.custom.css" in the folder "includes/jquery/themes/redmond"....but all of the icons were still blue. I am fairly new to jQuery, but it hit me that redmond is just a jQuery UI theme...and I know you can get a predone theme or roll your own theme at http://jqueryui.com/themeroller/

I was able to download a theme that better fit with the look and feel of the site (the one I got was "Smoothness"). All I had to do was drop the "smoothness" directory (which in the distribution is under the css directory) in includes/jquery/themes/ and change the inc_jquery.asp file to reference the new theme. Boom...all of the modal boxes are re-themed!

So here is my step-by-step...

1. Go to http://jqueryui.com/themeroller/ and look at their Gallery or "Roll Your Own". Download the legacy version of the theme (1.7.3 as of this writing) and unzip.

2. Go into the "css" folder of your newly unzipped file. There will be a directory with the name of your theme. Upload this entire directory to /productcart/includes/jquery/themes/

3. Open /productcart/pc/inc_jquery.asp and look for the line:

<link type="text/css" href="../includes/jquery/themes/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

Replace that line with the name of the directory and css file. In my case I downloaded smoothness in 1.7.3 so my line says:

<link type="text/css" href="../includes/jquery/themes//smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" />

Save the file and try it out.

4. In my case the fonts were a bit large, so I added the following line to my pcStorefront.css file:

.ui-widget {font: .8em !important;}

--------------

I haven't found any issues with this as of yet, so if you run into any issues, I would love to know.

Viva la jQuery!





Edited by claydough - 19-November-2010 at 9:55am

Awesome. I was thinking the same thing. The jquery theme roller is so easy to use.

Very nice! Thanks EI. I didn't realize it was an open Wiki.