Modifying the look of all of those modal windows
Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=4157
Printed Date: 14-July-2025 at 11:50pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com
Topic: Modifying the look of all of those modal windows
Posted By: claydough
Subject: Modifying the look of all of those modal windows
Date Posted: 19-November-2010 at 9:53am
|
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:
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:
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:
-------------- 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! ------------- ----- Clay Johnston Sprung P: 952-303-3598 Visit us at: www.madebysprung.com |
Replies:
Posted By: Greg Dinger
Date Posted: 19-November-2010 at 10:05am
Posted By: joshs
Date Posted: 22-November-2010 at 2:15pm
|
Awesome. I was thinking the same thing. The jquery theme roller is so easy to use. ------------- Josh Shirley josh@windsurfutah.com |
Posted By: ProductCart
Date Posted: 22-November-2010 at 7:44pm
|
Clay, thanks for posting this. It has been turned into a Wiki article on http://wiki.earlyimpact.com/how_to/style_modal_windows_change_jquery_theme - how to change jQuery theme : http://wiki.earlyimpact.com/how_to/style_modal_windows_change_jquery_theme - http://wiki.earlyimpact.com/how_to/style_modal_windows_change_jquery_theme Remember that it's an open WIKI: you can contribute directly to it and we encourage you to do so whenever you have a chance  ------------- The ProductCart Team Home of ProductCart http://www.productcart.com" rel="nofollow - shopping cart software |
Posted By: claydough
Date Posted: 23-November-2010 at 9:26am
|
Very nice! Thanks EI. I didn't realize it was an open Wiki. ------------- ----- Clay Johnston Sprung P: 952-303-3598 Visit us at: www.madebysprung.com |