Child pages
  • Laying the Theme's Foundations

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Now that the default theme has been turned into a folder of its own, it is time for you to explore its files: Smarty templates, CSS rules, JavaScript codes, location of the hooks and content blocks... Everything can be changed, and it is up to you to rework it the way you want!

The CSS files

You can edit your theme's styles by editing its CSS files.

The global.css file contains the global structure and the most important part of the design for the theme.

Usually, there is one stylesheet per controller. For instance, the product's page has a product.css file.

If you use Sass/Compass, you must edit the SCSS files first, then regenerate the CSS files.
Once the stylesheet is generated from a SCSS file, the SCSS line and file are referenced within the file.

Code Block
titleSample code from product.css
/* line 6, ../sass/product.scss */
.primary_block {
  margin-bottom: 40px;
}
/* line 9, ../sass/product.scss */
.top-hr {
  background: #c4c4c4;
  height: 5px;
  margin: 2px 0 31px;
}
Code Block
.primary_block {
  margin-bottom: 40px;
}
.top-hr{
  background: $top-line-color;
  height: 5px;
  margin: 2px 0 31px;
}

The images

Images which are used by the theme (not by products) are to be stored in the theme's /img folder, while image which are to be used by the shop itself are to be stored in the /img folder at the root of your PrestaShop installation.

Icons are a special case: PrestaShop 1.6 uses FontAwesome as its iconset: http://fontawesome.io/. It is a font made of icons, giving you scalable vector icons that can instantly be customized.

Using FontAwesome enables you to:

  • use a single file to display many different icons.
  • enjoy great flexibility: size, color, drop shadow, and anything that can be done with the power of CSS.
  • have an excellent render on all screen sizes : PC, TV, Retina, etc.)

The template files

A template files (.tpl)  is Smarty's way to separate the content from the way that content is presented.
The template only have a few dynamic elements (where your content goes). This facilitates the design and update of your sites, both for your content and its presentation.

Code Block
languagexml
titleTemplate file for the HTTP 404 Error page
<div class="pagenotfound">
    <div class="img-404">
        <img src="{$img_dir}/img-404.jpg" alt="{l s='Page not found'}" />
    </div>
    <h1>{l s='This page is not available'}</h1>
    <p>
        {l s='We\'re sorry, but the Web address you\'ve entered is no longer available.'}
    </p>
    <h3>{l s='To find a product, please type its name in the field below.'}</h3>
    <form action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="post" class="std">
        <fieldset>
            <div>
                <label for="search_query">{l s='Search our product catalog:'}</label>
                <input id="search_query" name="search_query" type="text" class="form-control grey" />
                <button type="submit" name="Submit" value="OK" class="btn btn-default button button-small">
                    <span>{l s='Ok'}</span>
                </button>
            </div>
        </fieldset>
    </form>
    <div class="buttons">
        <a class="btn btn-default button button-medium" href="{$base_dir}" title="{l s='Home'}">
            <span><i class="icon-chevron-left left"></i>{l s='Home page'}</span>
        </a>
    </div>
</div>

The template engine uses \{...} to handle instructions. The rest of the document is sent to the browser as is.

It is possible to use a template to generate HTML files, and also XML files, text files, etc.

Scratching that itch: creating all files from zero

...