--------------------------------------------
CSS to customize the default Catalog display
---------------------------------------------
The following code can be added to your principal CSS file and then tweaked to enhance the appearance of the default Catalog presentation that comes packaged with UC. (You can view this code live at the following URL: http://www.greystokefarm.com/store/catalog) The code below will not interfere with customizations you might have made if you are using Views and have styled grid displays for your product categories.
Begin CSS code:
.category {background: #cccc99; padding: 1em; border: 2px solid;}
.category tr td {padding: 2em; border: 2px solid; }
.category tr td strong a {font-size: 1.1em; letter-spacing: .1em; font-weight: 700; color: #000; padding-left: .1em; padding-right: .1em; padding-top: .2em; padding-bottom: .2em; }
.category tr td strong a:hover {font-size: 1.1em; background: #ddd; padding-left: .5em; padding-right: .5em; padding-top: .1em; padding-bottom: .4em; border: 1px solid ;}
.category div a img {border: 3px solid #333366; padding: .5em; background: #E0DFB1; margin-top: .6em; }
End CSS code.
In which file do we insert this code in?
I have tried the /modules/ubercart/uc_catalog/uc_catalog.css, but nothing seems to change when I insert this code with my other .category-xxxxxx-xxxx entries. I have tried inserting it before and after this code I have in there now and nothing seems to change when I click on the word catalog in the navigation pane. Any help please?
Re: In which file do we insert this code in?
Put this code in your theme-specific css file, usually called style.css, located in the sites/all/themes directory. It's not a good idea to put it somewhere that can potentially be overwritten by accident or during an update.
large image popup from grid
Hi, your code snippet is nice, but what really interested me once I saw your site was the product grid thumbnails linked to the full size image popup instead of the product page. How do you accomplish that?
Steve