OpenCart: Layout Structure

Exclusive offer: get 50% off this eBook here
OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook — Save 50%

Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates

$26.99    $13.50
by Tahsin Hasan | March 2011 | Open Source

Templates in OpenCart provide a powerful way to make your site look exactly the way you want either using a single template for the entire site or a separate template for each site section. Although it sounds like an easy task to build and maintain templates, it can be challenging to get beyond the basics and customize templates to meet your needs perfectly. This article discusses the layout structure of OpenCart. Also shown are the steps to create a new theme for OpenCart and how to reset the browser's default styles. This chapter covers styling properties.

In this article by Tahsin Hasan, author of OpenCart 1.4 Template Design Cookbook, we will cover:

  • Creating a new theme
  • Resetting layout styles
  • Setting basic style properties

 

OpenCart 1.4 Template Design Cookbook

OpenCart 1.4 Template Design Cookbook

Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates

        Read more about this book      

(For more resources on Opencart, see here.)

Introduction

In this article, we will see the default layout structure of OpenCart. We'll discuss the cascading stylesheet file from it and modify it according to our needs.

First of all, we'll use the reset style properties to eliminate cross-browser problems. We will discuss every property here. We'll also see the corresponding effects on our site.

Then, we'll do some basic styling for the site. For each change in style, we will see why we did that.

Folder structure

In our main OpenCart folder, we have the admin and catalog sections. These are two separate subsystems. As the name says, admin has the files and folders for administration operation. Catalog contains the store files and folders. Each admin and catalog section has a separate model, view, and controller. Under this admin and catalog folder, we will see the model, view, and controller folders. You will see different subfolders within those folders.

So, let's discuss this MVC structure in the following paragraph.

OpenCart is built with the MVC design pattern. So, it has model, view, and controller. A user requests the OpenCart controller to process the request. Then, the controller gets the data using the model and processes the fetched data to show the response with the view file. The following figure shows the above operation of MVC:

OpenCart 1.4 Template Design Cookbook

For theme modification, we will focus only on the View folder of the catalog in this article. It has javascript and theme folders. We place our themes under the theme folder and the necessary JavaScript files in the JavaScript folder.

Each theme has an image, stylesheet, and template folder. We will see how we can create a new theme later in this article.

Theme file style

As we stated earlier, OpenCart uses the MVC design pattern. So, the view files remain separated from the core code. These files are .tpl files. And, they are placed under catalog\view\theme\default\template. These .tpl files are basically HTML files. They have PHP code within them to display the necessary data.

OpenCart doesn't use the smarty template engine. Rather, it uses embedded PHP codes that are easy to use. We assign the PHP variables in the controller with necessary data. Then, we call the variable in the .tpl view file. We can also use the global class reference variable. In the controller, we will assign the value like this:

$this->data['shop_name'] = 'store';

Here, we assigned store value to the shop_name variable.

In the .tpl view file, we will display the value like this:

<?php echo $shop_name; ?>

Creating a new theme

In this recipe, we will see the steps to create a new theme for OpenCart. There are some rules to create OpenCart themes.

Getting started

Let's get started with the steps to create a new theme with OpenCart.

How to do it

Following are the steps for creating a new theme for OpenCart:

  1. First of all, we need to create a new folder under catalog\view\theme. For example, we will name it shop for this project.
  2. Now, we need to copy some files from the default theme folder to our new theme folder. The files are the following:
    • catalog\view\theme\default\stylesheet\*.*
    • catalog\view\theme\default\image\*.*
    • catalog\view\theme\default\template\common\header.tpl
  3. We have to edit some values in the header.tpl file for our new theme. We will replace all default keywords with our new theme name shop. Actually, there are six places where we need to replace the new theme name. The lines are the following:

    <link rel="stylesheet" type="text/css"
    href="catalog/view/theme/shop/stylesheet/stylesheet.css" />
    // other lines ...
    <link rel="stylesheet" type="text/css"
    href="catalog/view/theme/shop/stylesheet/ie6.css" />
    //other lines ...
    <div class="div3">
    <a href="<?php echo str_replace('&', '&amp;', $special); ?>"
    style="background-image: url('catalog/view/theme/shop/image/special.png');">
    <?php echo $text_special; ?></a>
    <a onclick="bookmark(document.location, '<?php echo addslashes($title); ?>');" style="background-image: url('catalog/view/theme/shop/image/bookmark.png');">
    <?php echo $text_bookmark; ?></a><a href="<?php echo str_replace('&', '&amp;', $contact); ?>" style="background-image: url('catalog/view/theme/shop/image/contact.png');"><?php echo $text_contact; ?></a><a href="<?php echo str_replace('&', '&amp;', $sitemap); ?>" style="background-image: url('catalog/view/theme/shop/image/sitemap.png');"><?php echo $text_sitemap; ?></a></div>
    //other lines ...

  4. And now, save it.
  5. Now, we will go to the admin area. First log in with our stored admin credentials.

    OpenCart 1.4 Template Design Cookbook

  6. Go to System | Settings in the admin panel:

    OpenCart 1.4 Template Design Cookbook

  7. We will go to the Store tab. We will change the theme from default to shop, our new theme from a select list.
  8. You can make changes on your theme's CSS file.

Resetting layout styles

Before beginning our theme styling work, we must first reset all the styles. This will help us with cross-browser problems.

Getting started

We need to modify the stylesheet.css file of our new theme first. We will go to catalog\view\theme\shop\stylesheet. And open up stylesheet.css in our favourite editor.

How to do it

  1. Now, we will add reset styles to our stylesheet.css file. First, we need to change the browser's margin, padding, and border properties. We will set styles for several different HTML tags. We can add extra style properties into it:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

  2. We will see the effect of our code in our store. The product images will come closer now.

    OpenCart 1.4 Template Design Cookbook

  3. We adjust the line height of body tag. So, put the following code in the CSS file.

    body {
    line-height: 1;
    }

  4. This also squeezes the lines in the body element. The following image depicts this:

    OpenCart 1.4 Template Design Cookbook

  5. By applying the above style, the line height of these tabs becomes shortened.
  6. We need to reset the style for ordered/unordered list elements. Hence, we use the following reset value:

    ol, ul {
    list-style: none;
    }

  7. It shows all the ul, ol tags without the default bullet properties.
  8. Now, we will reset the blockquote element styles. We will find the changes if we use blockquotes in our HTML code:

    blockquote, q {
    quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

  9. For all the elements, we are going to change the focus-styling attributes. We change the outline properties to 0. We set the styles like the following:

    :focus {
    outline: 0;
    }

  10. There could be some styling for insert and deletion in some browsers. So, we will use this styling for the purpose:

    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

  11. We will control the styling of our tables also. We set the border and spacing qualities like the following:

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

  12. We still need to set the attribute cell-spacing to 0.
  13. So, our reset styling becomes the following:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }

    body {
    line-height: 1;
    }

    ol, ul {
    list-style: none;
    }

    blockquote, q {
    quotes: none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }

    :focus {
    outline: 0;
    }

    ins {
    text-decoration: none;
    }
    del {
    text-decoration: line-through;
    }

    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

We can place it at the start of our site's style file stylesheet.css, or we can create a new file and put the content there also. To do that, just create a new CSS file within the catalog\view\theme\shop\stylesheet folder. For example, we can name the new style file as reset.css. If we use a new style file, then we need to add the style file in the controller.

OpenCart 1.4 Template Design Cookbook

 

OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

 

        Read more about this book      

(For more resources on Opencart, see here.)

Setting basic style properties

We have reset browser style properties. Now, we will apply our style to our site. There are some basic styling concerns.

Getting started

We are going to use the basic styling properties in this recipe. We need to modify the stylesheet.css file of our new theme first. We will go to catalog\view\theme\shop\stylesheet and open up stylesheet.css in our favourite editor.

How to do it

We will have to do the following simple steps:

  1. We need to set border properties and letter spacing for our site contents. For this, we use the following styling attributes. We will add it at the beginning of stylesheet.css.

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br, fieldset, textarea
    {
    border:0 none;
    letter-spacing:0.5px;
    }

  2. We can use any convenient value for these properties. After setting the style, we will see the letters move slightly from each other.

    OpenCart 1.4 Template Design Cookbook

  3. Here, the letters are moved slightly from each other.
  4. We can also add a value to our line height attributes. So, the code looks like the following:

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br, fieldset, textarea
    {
    border:0 none;
    letter-spacing:0.5px;
    line-height:15px;
    }

  5. We have added 15px to the line height property. And this makes the following changes to our site:

    OpenCart 1.4 Template Design Cookbook

  6. You can easily find the difference by changing the value of this property. Each row now has a greater height.
  7. Now, we can apply two other properties: vertical-align and word-spacing. See the following code block:

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, br, fieldset, textarea
    {
    border:0 none;
    letter-spacing:0.5px;
    line-height:20px;
    vertical-align:baseline;
    word-spacing:1px;
    }

  8. By applying word-spacing, each word of our site will move away from each other. We have applied 1 pixel here. You can make an adjustment of this value. The following image shows the spacing between two consecutive words:

    OpenCart 1.4 Template Design Cookbook

  9. We will format the heading text styles now. We will set font size, font weight, and colours of these properties. We will use the following code block for this purpose:

    h1{
    font-size:20px;
    }

    h2{
    font-size:19px;
    padding: 4px;
    }

    h3{
    font-size:16px;
    }

    h4{
    font-size:15px;
    }

    h5{
    font-size:14px;
    }

    h6{
    font-size:13px;
    }

  10. Here, we set the font size of some heading styling properties. We can adjust the font size according to our need. We set it for the overall site. But, it will not affect the styling of the main container as there is also a styling property available under the content ID. We will see how to change it. We need to change the heading text colours and the font weight now:
    h1,h2,h3,h4,h5,h6{
    color:#3f3f3f;
    font-weight: normal;
    }
  11. Our heading styles are set. Now, we will change the font colour for our site. Also, we'll set some other attributes for all over the site.
  12. We first set our font colour to #666666.
    body {
    color:#666666;
    }
  13. We can find the changes by visiting the site:

    OpenCart 1.4 Template Design Cookbook

  14. We also apply our font size for the site. So, the code block changes to this:
    body {
    color:#666666;
    font-size:13px;
    }
  15. Our changes will not be available into the site as there is also some styling in the default CSS that sets the font size.
    body, td, th, input, textarea, select, a {
    font-size: 12px;
    }
  16. We remove this code from the stylesheet. So, the fonts get bigger now.

    OpenCart 1.4 Template Design Cookbook

  17. You have to add a style for the font family also:
    body {
    color: #666666;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    }
  18. There is also another font styling for the overall site in the default CSS file:

    * {
    font-family: Arial, Helvetica, sans-serif;
    }

  19. We will remove this code.
  20. We add another property to the body tag. We set the text decoration property to none. So, the code block becomes like the following:
    body {
    color: #666666;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    }
  21. We set a colour attribute to the anchor tag for our site.
    a {
    color: #0066CC;
    }
  22. But the default style comes up with another styling for anchor tag.

    a, a:visited {
    color: #1B57A3;
    text-decoration: underline;
    cursor: pointer;
    }

  23. We remove this style. So, the style becomes like this:

    OpenCart 1.4 Template Design Cookbook

  24. We will add the following style to our anchor tag:
    a {
    color: #0066CC;
    text-decoration: none;
    outline: none;
    }
  25. In the browser, we can see the changes like this:

    OpenCart 1.4 Template Design Cookbook

  26. For anchor-related styling, we will apply the pointer property to our cursor. See the following code:
    a {
    color: #0066CC;
    text-decoration:
    none; outline:none;
    cursor: pointer;
    }
  27. And now, we add a hover effect to our anchor style:
    a:hover{
    color: #CC6600;
    }

    OpenCart 1.4 Template Design Cookbook

  28. On hovering, the text color changes. There is a CSS styling property on the default CSS file.

    a:hover {
    text-decoration: none;
    }

  29. We will remove it.
  30. Now, we need to add some margin to some HTML elements:
    h1, h3, h5, h6, dl, ol, ul, pre, table, address, fieldset {
    margin-bottom: 10px;
    }
  31. There will be a wide space after applying this style:

    OpenCart 1.4 Template Design Cookbook

Summary

In this article we discussed the layout structure of OpenCart. We saw the steps to create a new theme for OpenCart, how to reset the browser's default styles and styling properties.


Further resources on this subject:


OpenCart 1.4 Template Design Cookbook Over 50 incredibly effective and quick recipes for building modern eye-catching OpenCart templates
Published: March 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Tahsin Hasan

Tahsin Hasan is a software engineer from Bangladesh. He passed the Zend Certification Examination on 09 August, 2009 and has become the seventeenth Zend Certified Engineer (ZCE) from Bangladesh. This is the top-most certification on PHP from Zend, the developer of this outstanding scripting language. He is a tech enthusiastic and always keeps himself well-equipped with latest technologies. He has written another book, Opencart 1.4 Template Design Cookbook, with Packt.

Tahsin Hasan has profound knowledge of LAMP environment. His advanced understanding of database environments and Apache web server is an asset. He has proficiency in scalability and optimizing server performance. He has worked with Symfony, CakePHP, Codeigniter and Zend Framework.

Tahsin Hasan shares his ideas and knowledge on tahSin’s gaRage; the address is http://newdailyblog.blogspot.com. He welcomes everyone on his blog to discuss latest web technologies. You can get him at tahsin352@gmail.com.

Books From Packt


OpenCart 1.4: Beginner's Guide
OpenCart 1.4: Beginner's Guide

CakePHP 1.3 Application Development Cookbook
CakePHP 1.3 Application Development Cookbook

PHP 5 Social Networking
PHP 5 Social Networking

OpenAM
OpenAM

Expert PHP 5 Tools
Expert PHP 5 Tools

YUI 2.8: Learning the Library
YUI 2.8: Learning the Library

CodeIgniter 1.7 Professional Development
CodeIgniter 1.7 Professional Development

WordPress 3 Complete
WordPress 3 Complete


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software