Module Adjustment in OpenCart: Applying styles to categories

Now, we will apply styles to our category block. We need to customize the current style and attributes. We place it on the left side of our store front.

1.  Getting started

First, we will go to our admin panel. We use our stored credentials to get into the administration section. Then, go to Extensions | Modules to view category block. We will see the position, sort order, and status of the category block.

Now, we will customize the style of the category block.

2.  How to do it…

1. First let’s see the current style of the category block:

2. Open up the category tpl file; that is placed under the catalog\view\theme\ shop\template\module.catalog\view\theme\shop\template\module:

<div class=”box”>

<div class=”top”><img src=”catalog/view/theme/default/image/

category.png” alt=”” /><?php echo $heading_title; ?></div>

<div id=”category” class=”middle”><?php echo $category; ?></div>

<div class=”bottom”>&nbsp;</div>

</div>

3. This page is also divided into three sections: top, middle, and The top section contains the top header, the middle holds the category list, and the bottom layer contains the block bottom style.
4. We will apply style to our category For inspection, we will use Firebug. Let’s play with Firebug. Click on the Firebug icon, then click on the Inspect icon. Now, bring the mouse on the category block like this:

5. When we click on this block, we will see the corresponding HTML tag on the console The following image demonstrates this:

<div id=”category”>

<ul>

<li>

6. If you click on the ul tag, the style for this tag will be shown on the right side of the Firebug console panel:

#category ul{

list-style-image: url(“../image/bullet_1.png”);

list-style-position: outside;

list-style-type: disc;

margin-bottom: 0;

margin-left: 8px;

margin-top: 0;

}

It is also showing the category style’s line number in the stylesheet.css file. So, let’s go to that line in our style file. We will apply the following style to the li tag:

#category ul li{ padding: 10px 0px; border-top: 1px solid #eee;}

Here, we use 10px padding for top and bottom and 0px padding for the left and right side. And, there is a top border for li. When we see it in the browser, it will appear like the following:

7. The list is slightly away from the left If we examine with Firebug, we find that there is a left margin and left padding:

We can check the adjustment by removing the left padding and margin. We make an adjustment in our category ul style like this:

padding-left: 0px;

And it will be shown like this now:

8. You can apply some hover effect on the li For this, we change the background color on mouse hover with the following style attribute:

#category ul li:hover { background-color: #f7f7f7;}

So, our category block will become like this:

9. We will change the font style and color of the category We change the text decoration and text color. You can use the following style attribute for it:

#category ul li a { text-decoration: none; color: #3FCDFF; }

This will make our category block look like the following:

10. Now the text needs to change on mouse We apply a different color to the text for hover effect. Use the following style for it:

#category ul li a:hover { color: #FFC62F; }

So, we have our category block like this:

Our complete style code block for category module stands like this:

/* —- start of category block—- */

#category ul { margin-top: 0px; margin-bottom: 0px; margin-left: 8px; 

padding-left: 0px; list-style: url(‘../image/bullet_ 1.png’);}

#category ul li{ padding: 10px 0px; border-top: 1px solid #eee;}

#category ul li:hover { background-color: #f7f7f7;}

#category ul li a { text-decoration: none; color: #3FCDFF; }

#category ul li a:hover { color: #FFC62F; }

/* —- end of category block—- */

11. We can change the top header image in the same way we did for the featured Or we can remove the image also, like this:

<div class=”top”><?php echo $heading_title; ?></div>

And, to change the icons on the left of each category, you can make the following changes in the category ul style:

list-style: url(‘../image/name-of-the-icon.png’);

So, our complete style code for this module block becomes this:

/* —- start of middle- featured block—- */

#featured-middle {padding: 0px 0px 0px 10px;

list-style-type: none; width: 100%; height: 260px;}

#featured-middle li {width: 50%; float:left; display: inline;}

#featured-middle li:hover { background-color: #f7f7f7;}

#featured-middle li a { text-decoration: none; color: #3FCDFF; }

#featured-middle li a:hover { color: #FFC62F; }

#featured-middle .product-image {float: left;}

#featured-middle .product-description {float:right; padding: 20px 30px 0px 0px;}

#featured-middle .product-image img{ border: 1px solid #ddd; padding: 3px;}

#featured-middle .product-image img:hover{ border: 1px solid #aFaFaF;}

/* —- end of middle- featured block  */

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.