Module Adjustment in OpenCart: Styling centre featured block

Our featured product module is now at the centre column. It has default layout attributes. We have changed the left positioned featured block. Now, in this recipe, we will focus on enhancing the style of the middle positioned featured block.

1. Getting started

We have already placed our featured block at the middle position. So, we don’t need to go to the admin panel. First, we examine the block with Firebug.

The centre column featured block header needs to match with our site’s other It is currently showing the old style. So, we will change it. Select the Firebug icon, and inspect it. If we place our inspector on the featured block header, it will show the following code in the console:

<h1>Featured</h1>

</div>

Now, click on the center class div, we will ﬁnd the image to It is content_top_center.png:

#content .top

.center{

-moz-background-clip: border;

-moz-background-origin: padding;

-moz-background-size: auto auto;

background-attachment: scroll;

background-color: transparent;

background-image: url(“../image/content_top_center.png”);

background-repeat: repeat-x;

}

Now, open the image with GIMP to edit it and enlarge the image for editing Now, click on the color tool on the toolbox.
We ﬁnd the already used side module block header color with Colorzilla. Click on the Colorzilla icon:

You need to move the mouse on the left-side module header and click on the Then, the Colorzilla icon will change to our selected color. Also, it will show the color attributes and positions:

We have got our color code: #85d8df. Now, we will apply it to the top image of the We will choose the color code from the already open color panel of GIMP. Then, the Color tool will change to this:

Now, select the Gradient tool from You need to apply the color from top to bottom on the image. Our image will become like this:

There is also left and right side image of this top header of the We will ﬁnd it in the same way. The images are:

content_top_left.png
content_top_right.png

We modify those images in the same We need to use the Fuzzy Select Tool and the Bucket Fill Tool from the tool box for this purpose. The left image will become like this:

And the right one will look like this:

If we see our store front, we can view the changes there:

Now, we will modify the We ﬁnd the code at featured_home.tpl under catalog\view\theme\shop\template\module. Currently, it is table-based. But we will convert it to div-based. The following is the table-based code:

<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>

<tr>

<?php for ($j = $i; $j < ($i + 4); $j++) { ?>

<a href=”<?php echo str_replace(‘&’, ‘&’,

$products[$j][‘href’]); ?>”><img src=”<?php echo

$products[$j][‘thumb’]; ?>” title=”<?php echo

$products[$j][‘name’]; ?>” alt=”<?php echo $products[$j][‘name’];

?>” /></a><br />

<a href=”<?php echo str_replace(‘&’, ‘&’,

$products[$j][‘href’]); ?>”><?php echo $products[$j][‘name’]; ?></ a><br />

<span style=”color: #999; font-size: 11px;”><?php echo

$products[$j][‘model’]; ?></span><br />

<?php if ($display_price) { ?>

<?php if (!$products[$j][‘special’]) { ?>

<span style=”color: #900; font-weight: bold;”><?php echo

$products[$j][‘price’]; ?></span>

<?php } else { ?>

<span style=”color: #900; font-weight: bold; text-

decoration: line-through;”><?php echo $products[$j][‘price’]; ?></ span>

<?php } ?>

<a class=”button_add_small” href=”<?php echo

$products[$j][‘add’]; ?>” title=”<?php echo $button_add_to_cart;

?>” > </a>

<br />

<?php if ($products[$j][‘rating’]) { ?>

<img src=”catalog/view/theme/default/image/stars_<?php echo $products[$j][‘rating’] . ‘.png’; ?>” alt=”<?php echo

$products[$j][‘stars’]; ?>” />

<?php } ?>

<?php } ?></td>

<?php } ?>

</tr>

<?php } ?>

</table>

</div>

We will remove the table and use ul li tags Place the ul tag in place of table tags. Like the following:

<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>

// … internal code block

<?php } ?>

</ul>

Now, remove the tr and also td. And in place of td we will place li. We have shown the code block below:

// … internal code block

<?php } ?></li>

We will divide the content within the li tag into two We use div for this purpose. One section is for product image and another section is product description. We wrap those two sections with div tag and add class product-image and product-description. See the following code block.

// … product image

<div class=”product-image”><a href=”<?php echo str_ replace(‘&’, ‘&’, $products[$j][‘href’]); ?>”><img src=”<?php echo $products[$j][‘thumb’]; ?>” title=”<?php echo

$products[$j][‘name’]; ?>” alt=”<?php echo $products[$j][‘name’];

?>” /></a></div>

// … product description

// … internal code

<?php } ?></div>

If we see our featured block in the browser, we ﬁnd the following status of our module:

Now, it’s time to apply css to our module Go to catalog\view\theme\ shop\stylesheet and open up our site’s stylesheet.
We will apply the following code to our featured middle attribute of the ul tag:

#featured-middle {padding: 0px 0px 0px 10px; list-style-type:

none; width: 100%; height: 260px;}

This will change our module block to the following status:

Our products are showing on the one So, you need to use the following code in the li tag. See the code block:

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

This changes the featured module to this stage:

Our product image will be shown in the left and its description on the We use the following code block:

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

This makes our module block look like the following image:

You see that our product description is very adjacent to our product So, we need to apply some style to move it to the right. You can use the following code for this:

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

And our module becomes:

We use some styles to give a border around the product You may use the following code block:

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

So, we can view the borders around our image now:

When we hover over a featured product block, we can add some style to We can write the following code:

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

See the changes on the browser:

You should use same text style for every module with some So, we make the following styling code for the text style:

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

This gives the following changes in our browser:

Apply some hover effect on the You can use the following hover style:

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

If we hover the product name now, it will change its text color; like this:

We may add styles to images, when we hover over You can add the following style block for it:

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

And now go to the browser and hover over the product image to see the result:

3. See also

There are other modules that can be placed at the middle section. We can apply these styles and make changes to those modules also.

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

Opencart

Module Adjustment in OpenCart: Styling centre featured block

1. Getting started

3. See also

Leave a Reply Cancel reply

1. Getting started

3. See also

Leave a Reply Cancel reply

Login