O'Reilly logo

OpenCart 1.4 Template Design Cookbook by Tahsin Hasan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adjusting layout

In this recipe, we will adjust the layout structure of the featured block. We will apply different style properties to the HTML tags. Currently, the block is table-based and we will convert it to div-based structure.

Getting started

In the featured tpl file, the default layout is table-based. We will make it div based. For that, notice the featured products are showing in a list. We can use ul li tags for this purpose.

How to do it...

  1. First, we will remove the table tags. By table tags I mean table, tr, td. Now, you will see that there is a foreach loop to print out the featured products. We will place the ul tag to wrap the foreach loop.
    <ul id="featured">
    <?php foreach ($products as $product) { ?>
    // ...
    <?php } ?>
    </ul>
    
  2. Here // ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required