CSS to customize the default Catalog display

Contrib type: 
Code/CSS Snippet
Complete and working


Ubercart 1.x

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.

fxtradesman's picture
Joined: 03/01/2008
Juice: 5
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?

darkbrewery's picture
Joined: 02/09/2008
Juice: 49
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.

riceman's picture
Joined: 08/19/2008
Juice: 4
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?


chrisi's picture
Joined: 09/24/2008
Juice: 2
this helps

to get the image in your catalog to the full size, just change the file in the directory files/imagecache/uc_category/files. I didnt find the code snippet where the images are resized to the format in this folder, but if you replace an image to the size you like it ll displayed in this size at your site.

hope this helps.

regards, chris

Ryan's picture
Joined: 08/07/2007
Juice: 15453
Re: this helps

Hey Chris, et al - images are actually being resized by the Imagecache module. It lets you define resize patterns called presets through a UI under Site configuration in your Admin menu. Check it out... there are several different presets here for UC, and you should be able to change the sizes however you want. Furthermore, if you're using Views to create a catalog, you should be able to setup the View so that it uses the original image or any Imagecache preset.

jamesonspooner's picture
Joined: 01/05/2012
Juice: 8

This was very helpful in helping to create my catalog display when I built my website for Designer Fabric For Sale