Ecommerce Developer
 
 

Platforms & Shopping Carts

Building a Magento Theme Start to Finish, Part 17: The Category Page Grid

By Armando Roggio on June 04, 2010 · with 6 Comments

 

The product grid on a category page displays similar products and is almost always one of the sections a shopper will interact with during the normal course of browsing an ecommerce site.

In this episode, I will be making style changes to the product grid, including resizing it, adjusting backgrounds, and managing the fonts. I will also switch to a list view of the products and make a few more minor changes.

Magento Theme Start to Finish, Part 17

The Magento Theme Series, To Date

Adjusting Widths

At the moment, the "pager" tables that contain elements like the user field for selecting the number of products to display or the selector for choosing grid or list view are 704 pixels wide. I want to condense this a little to better fit my Pine Theme.

The style describing these widths is on about line 286 of boxes.css and is described as a percentage—100 percent to be specific. I am going to change that to 98 percent, making it just about 690 pixels wide.

table.pager { width:98%; background:url(../images/pager_bg.gif) repeat-x 0 100% #f9f9f9; }

Changing the Table's Background, Borders

Next, I simply remove the background style from this same line in the CSS.

table.pager { width:98%;}

Just one line further down in the style sheet is a declaration for "pager" td tags. These elements presently have a solid top border. I am going to reposition it to the bottom, change its color to the brown from the Pine Theme palette, and make it dotted.

table.pager td { width:33%; border-bottom:1px dotted #372016; padding:4px 8px; vertical-align:middle; }

Fonts

There are a few font-related styles that I need to change. The first of these describes the regular text inside of the "pager" tables. I want to change the color of this font to the green from the Pine Theme palette, transform the characters to uppercase lettering, and make the font very bold. I am going to make these changes at the table.pager description that I removed the background from earlier.

table.pager { width:98%; color:#2AA92A; text-transform: uppercase; font-weight: bolder; font-size: 1.25em;}

The anchor tags from this section, and really much of the site, are managed in reset.css at skin > frontend > default > pine > css. I want to change the style for anchor tags and hovers at about line 40 and 41 respectively. Again, I will be using the green and brown from the Pine Theme palette.

a           { color:#2AA92A; text-decoration:none; }
a:hover     { color: #372016; }

For the "sort by" selector at the top of the product grid, there is yet another anchor style. This style indicates which filtering method is currently applied. To change this style, I head to about line 291 of boxes.css. I will use the brown from the palette for the normal state. The color will change to white when a user hovers, and will get a brown background.

table.pager td.sort-by .active {color:#372016}
table.pager td.sort-by .active:hover { color:#fff; background: #372016; }

Product Grid Borders

Each product image in the product grid has a border style. I want to change these and use the brown from the palette. The style description for these is on about line 705 of boxes.css.

.listing-type-grid .product-image img { border:1px dotted #372016; border-left:0; }

Product Grid Font

There are two additional font descriptions that I need to change within the product grids. The first of these is for the product titles, which are styled at about line 577 of boxes.css. I simply change the color to the Pine Theme brown.

.catalog-listing h5 a, .catalog-listing h5 a:hover {
    color:#372016; text-decoration:underline; font-size: 1.5em; }

I also want to change the font color for the price text. This style description is on about line 505 of boxes.css. In total, I change the color to #2AA92A seven times in this section of the style sheet.

/************************* Prices */
.price { white-space:nowrap !important; }

.price-box { padding:5px 0 10px; }
.price-box .price { font-size:13px; font-weight:bold; color:#2AA92A; }

/* Regular price */
.regular-price { color:#2AA92A; }
.regular-price .price { font-size:13px; font-weight:bold; color:#2AA92A; }

/* Old price */
.old-price { margin:0; }
.old-price .price-label { font-size:12px; font-weight:bold; white-space:nowrap; }
.old-price .price { font-weight:bold; font-size:13px; color:#2AA92A; text-decoration:line-through; }

/* Special price */
.special-price { margin:0; padding:3px 0; }
.special-price .price-label { font-size:11px; font-weight:bold; text-transform:uppercase; white-space:nowrap; color:#000; }
.special-price .price { font-size:13px; font-weight:bold; }

/* Minimal price (as low as) */
.minimal-price { margin:0; }
.minimal-price .price-label { font-size:12px; font-weight:bold; white-space:nowrap; }

a.minimal-price-link { display:block; font-size:12px; text-decoration:underline; color:#444; }
a.minimal-price-link:hover { color:#444; }
a.minimal-price-link .label {}
a.minimal-price-link .price { font-weight:normal; color:#444; }

/* Including tax */
.price-including-tax { display:block; color:#888; }
.price-including-tax .label {  font-size:10px; text-transform:uppercase; white-space:nowrap; color:#888; }
.price-including-tax .price { font-size:13px; font-weight:bold; color:#2AA92A; }

/* Excluding tax */
.price-excluding-tax { display:block; color:#888; }
.price-excluding-tax .label { font-size:10px; text-transform:uppercase; white-space:nowrap; color:#888; }
.price-excluding-tax .price { font-size:12px; font-weight:normal; color:#2AA92A; }

/* Incl tax (for order tables) */
.price-incl-tax { display:block; }
.price-incl-tax .label { display:block; white-space:nowrap; }
.price-incl-tax .price { display:block; font-weight:bold; }

/* Excl tax (for order tables) */
.price-excl-tax  { display:block; }
.price-excl-tax .label { display:block; white-space:nowrap; }
.price-excl-tax .price { display:block; font-weight:normal; }

/* Price range */
.price-from { margin:0; }
.price-from .price-label { font-size:12px; font-weight:bold; white-space:nowrap; }

.price-to { margin:0; }
.price-to .price-label { font-size:12px; font-weight:bold; white-space:nowrap; }

/* Price notice next to the options */
.price-notice { padding-left:7px; }
.price-notice .price { font-weight:bold; }

.price-as-configured { margin:0; }
.price-as-configured .price-label { font-weight:bold; white-space:nowrap; text-transform:uppercase; }

.price-box-bundle { padding:0 0 10px 0; }
.price-box-bundle .price-box { margin:0 !important; padding:0 !important; }
.price-box-bundle .price { color:#222; }

.product-pricing-grouped li { padding:2px 0; }
.product-pricing-grouped li .price { font-weight:bold; color:#2AA92A; }

Complete Grid

The List View

The product grid is done. But Magento also offers shoppers an option to view product category pages in a list format. So I need to switch to that list view and make a minor change before I am done with this page.

On about line 691 of boxes.css, I find a style describing the top borders for the list view products. I want to change this to dotted from solid and to the Pine Theme brown from a medium gray. I also move the border from the top to the bottom of each product listing.

.listing-type-list .listing-item { border-bottom:1px dotted #372016; padding:12px 10px 12px 0; }

Finally, to compensate for some spacing concerns, I head to about line 310 of boxes.css and add a width attribute to the main column's style description.

.col-main       { float:right; width:704px;}

The product category page is now complete. In the next episode, I will begin to style the product detail pages.

Related Articles

6 Comments

Rss-sm