Creating new Prestashop themes

Before we start to modify and create our new theme, I always find it’s essential to first understand what CSS rules are being applied to the core HTML layouts. I find that creating a document with the core blocks (page, header, left_column, centre, column, right_colum and footer ) identified together with the sizes being applied to these columns with the css will help save time throughout the design build and avoid styling issues later on.

To start, we going to make a copy of the default prestashop theme, rename this to “mytheme” and then save the files in the themes directory. I am assuming you already have prestashop 1.1 installed, either locally or on a web server and you are familiar with copying and uploading files.

We will then change preferences to make “mytheme the default”, uninstall all the modules and then create the core layout document so we have a viusla for reference. Once we are happy with our main blocks positions and sizes, we will use our pre-designed layout to add the modules we need and style these.

Lets begin…

We are going to create a store design based upon the three column layout but later we will explore changing the templates (tpl files) to produce alternative layouts using 1,2 and 4 columns. Firstly lets duplicate the default theme that comes with prestashop.

Duplicate the default Prestashop theme

Make a copy of the default theme by copying themes/prestshop. Save the folder to your computer and rename this to “mytheme” or whatever name you wish to use. Now copy or upload these renamed folder into the themes directory. You should now have a theme called Prestashop and another called Mytheme in this directory.

Now login to your Prestashop backoffice, go to preferences>>appearance and change the theme to your "mytheme" that you installed and click save.

Uninstalling modules

I like to have everything uninstalled when I begin and then work from the outside in, starting with the key HTML blocks (such as our columns). I find this makes it much easier to check everything is working correctly across all popular browsers, is validated and the diemsions add up. Once we know this is correct we can lock down this part of our rules before moving onto styling the content itself. If we havea problem later, say with a column dropping down, we know its something we have added to the design that has caused this and not our column CSS.

Log into your Prestashop backoffice. Then go to modules. Now click the uninstall button for all modules that are currently installed.

Create a layout reference document.

We are going to base our layout reference document on the "mytheme" HTML of our site that comes from our core tpl files. As previously discussed, this is made up primarily from the header.tpl and footer.tpl files.

When combined, the header and footer.tpl files contain the following HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
    <head>
        <base href="{$protocol}{$smarty.server.HTTP_HOST|escape:'htmlall':'UTF-8'}{$base_dir}" />
        <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
        <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
        <meta name="keywords" content="{$meta_keywords|escape:htmlall:'UTF-8'}" />
{/if}
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <meta name="generator" content="PrestaShop" />
        <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
        <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />
        <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{if isset($css_files)}
    {foreach from=$css_files key=css_uri item=media}
    <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
    {/foreach}
{/if}
        <script type="text/javascript" src="{$base_dir}js/tools.js"></script>
        <script type="text/javascript">
            var baseDir = '{$base_dir}';
            var static_token = '{$static_token}';
            var token = '{$token}';
            var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
        </script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.2.6.pack.js"></script>
        <script type="text/javascript" src="{$base_dir}js/jquery/jquery.easing.1.3.js"></script>
{if isset($js_files)}
    {foreach from=$js_files item=js_uri}
    <script type="text/javascript" src="{$js_uri}"></script>
    {/foreach}
{/if}
        {$HOOK_HEADER}
    </head>

    <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
    {if !$content_only}
        <div id="page">

            
            <div>
                <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
                <div id="header">
                    {$HOOK_TOP}
                </div>
            </div>

            
            <div id="left_column" class="column">
                {$HOOK_LEFT_COLUMN}
            </div>

            
            <div id="center_column">
    {/if}
    {if !$content_only}
            </div>


            <div id="right_column" class="column">
                {$HOOK_RIGHT_COLUMN}
            </div>


            <div id="footer">{$HOOK_FOOTER}</div>
        </div>
    {/if}
    </body>
</html>

These two tpl files also contain our hooks. For example in the right_column div is the following code {$HOOK_RIGHT_COLUMN}

When you add modules in the Prestashop backoffice you specify where these modules should be placed using positions. So if you "add the cart module to the right column using positions", the cart will be placed where {$HOOK_RIGHT_COLUMN} exists in our tpl file which of course is the right_column. In fact, if you wanted to test this, you could move the code {$HOOK_RIGHT_COLUMN} into the footer div and resave your footer.tpl file. You will of course need to re-insall a module such as cart. Once installed, if you refesh you website home page in your browser, you would see that modules that had been placed into {$HOOK_RIGHT_COLUMN} would now be shown in the footer (subject to what CSS styling rules apply of course).

You may recall that our sites index.php file in the root installation also included $smarty->assign('HOOK_HOME', Module::hookExec('home')); simply stated this is saying if the page is the home page, display all modules that have been assigned to the home page which is {$HOOK_HOME}. Hopefully you get the idea, the hooks code in these tpl files determine where modules end up being displayed in your website.

Now lets strip the above HTML from our two tpl files above down to the basics we are interested in right now.

<html>
<head></head>
     <body>
         <div id="page">the wrapper containing all your site information<div>
     <div>
            <h1 id="logo">logo…</h1>
            <div id="header">header content…</div>
     </div>
    <div id="left_column" class="column">left column content…</div>
    <div id="center_column">centre content…</div>
    <div id="right_column" class="column">right column content…</div>
    <div id="footer">footer content…<div>
        </body>
</html>

Having identified the key blocks (our divs as shown above) we can now identify the CSS rules that determine how the html blocks will be styled. During this exercise you will see that we are going to work from the main HTML blocks inwards. We are also going to stick with a 3 column layout. (but had we wanted to start with no right column for example, we could remove the #right_column from the footer.tpl file - we will get to complete new layouts in the future).

Firstly, the easiest way to identify the CSS rules that determine how these main div blocks are displayed is to load up your new prestashop home page in the firefox browser using firebug (a firefox add-on). You can install Firebug by choosing Tools>>Add-ons in Friefox and once installed, run Firebug by selecting tools>>firebug>>open firebug.

firebug

Once open, Firebug allows you to hover over the html elements, understand the DOM structure and identify what CSS rules are being applied to the selected HTML element - Firebug will even tell you

Within this right column under the tab "style", as we click on the HTML element shown in the left column of firebug, it will show us what CSS rules are being applied to the HTML tag. We can use this right column to tell us what rules are being applied to each HTML tag to click, which line in your CSS file the rule is coming from and even edit the CSS rules on the fly to see a "Live view" of the changes rendered as a webpage.

To out this into practice, click on div id=page (you need to select the actual div element itself). Now in the right window you should be able to see that #page has a width of 980px. Make a note and move through the other key divs, noting the sizes applied and if there are any other rules that affect our core HTML column dimensions such as padding. If you theme is the same as mine, you should have the following settings, although if it varies that it fine.

My settings

#page is 980px
#logo is 29%
#header is 71%
#left_column is 190px with 15px of padding to the right (note that there is also a class applied which will apply additional rules)
#centre_column has a width of 556px
#right_column is 190px with 15px of padding to the left
#footer has no width defined but a top-border of 1px

there is also a CSS rule that applies left floats; (global.css (line 198)

{#left_column, #center_column, #right_column
float:left;}

So we know each main column is floated left and the footer is set to clear these floats - a pretty typical set-up.

Now that I have established teh container (in our case #page) is 980px wide I can calculate the widths of the our three columns inside #page. The left and right column are 190px + 15px padding (205px wide) and the centre column is 556px. So our columns add up to a total of 966px and are placed inside #page which is 980px, a difference of 14px. Firstly, I have no idea why there should be a difference of 14px in the css between #pahe and its 3 main columns, therfore I prefer to change it to be correct for what I want rather than have pointless space. So I could already change the overall page width to 966px knowing this would fit by columns precisely side by side without forcinging the right columns to drop down.

(Tip: Although our left and right columns are 190px wide I can also already see in the CSS (well my themes global CSS file anyway), the block CSS, advertising_block and payment logos are all set to 191px wide, 1px wider than the columns they are going into.) As its only 1px you are unlikely to spot the error in the rendered web page but lets change your left and right column css to 191px (if your are also seeing 191px) and the #page width to 968px at this stage. That way we know all the dimensions are correct. Hopefully you can already start to appriciate why I like to work this way.

I recommend either using graph paper or whatever computer program you prefer, that you draw out these blocks with your required dimensions shown. This will form part of your working layout sheet which, as your design gets more complex, will prove invaluable. Below is my simple layout graphic using the revised dimensions that will be applied to my new globalNew CSS very soon. Padding is highlighted in light blue.

outline wire of key block elements

As we start to add to our site, we will be updating our simple block graphic above so we can look in detail at whats going on.