Magento Theme Development: Category Page, Part 2

In the previous article on category pages, we edited the toolbar, grid and list layout. In this second article on customizing the category page, we'll customize the sidebar and do some CSS fixes.

First of all, we'll add some components in the sidebar, so that we can style them. Here, for the purpose of demonstration, we'll just add one or two components and modify them. That'll give you ample understanding of how you can modify the other sidebar components as well. 

For now we'll just add 'compare products' and a sidebar banner to the sidebar. We'll do that from the local.xml code. If you remember from the first articles of the series, you can find the local.xml file in the layout folder of your theme file.

We'll add a reference to the left section, and then add a banner and compare product module in the sidebar, using the code below:

Use it just as a reference code—you can add more modules or banners using the same procedure.

If we look at our HTML design, we'll notice that all components are nicely designed, especially the heading part, which has multiple colors in it. 

Sidebar Module

Whereas our current design is little off, though we can modify the design through CSS, but we need to modify the HTML to add classes for different colors in the heading. 

Sidebar Before editing

To modify the HTML, we'll first enable template hints, and find out that the file responsible for it is \template\catalog/product/compare/sidebar.phtml.

Now we'll open up this sidebar.phtml file, and compare it with the HTML code.

Our design HTML code for the sidebar looks like this:

We can see that the heading has the h3 tag with a class of title, and it has the strong tag around the heading parts, which have a different color. 

For this, we'll replace the block-title div with this:

Refresh the page, and it should look quite close to our HTML design now. You can add and style other sidebar components in a similar way.

Now that we are done editing the phtml files, let's start fixing the CSS styles.

We'll start fixing styles from the top. The first component which needs our attention is the page heading. As we can see, it is quite off, and is not close to our HTML requirements.

Heading before styling

We'll add these lines in our new CSS file to style the heading.

Here we have just given it a good text font, line height, text align, background image, etc. Also, we have made the background transparent with no border. It should look like this now:

Heading after styling

Next we need to modify the toolbar section. For that we'll add these styles in our CSS file:

Here we have just specified some background images, width, height, etc., and it'll pretty much do the trick. The page should look like this:

Toolbar after styling

Now, let's start editing the products section in grid view. The page looks like this now:

Grid View before styling

We'll just have to make some width and hover style adjustments. Also the price color needs changing. We'll do all that by adding these CSS lines:

Now the grid section should look like this:

Grid View after styling

In the last part we need to fix the products section in the list mode. It currently looks quite messed up, but don't worry—a few lines of CSS will set everything right. 

List View before Styling

To make it look good, we'll use these CSS styles:

Here we have set the product image width, floated the price to the right, given the whole section a nice background, border and hover effect, and modified the button slightly. The page should look something like this:

List view after styling

With all this done, your catalog page should look nice and close to our HTML design requirements. You may need some other CSS fine-tuning, but other than that you are all set.

In the next article of this series, we'll start editing the product detail page. 

Please do leave your suggestions and feedback in the comments section. We'll be looking forward to it.

Tags:

Comments

Related Articles