Page History

...

Starting with version 1.6, PrestaShop theme API heavily relies on the Bootstrap framework (version 3), together with Sass and Compass. Simply put, if you want to build a 1.6-compatible theme, you must use these technologies.

Bootstrap

About Bootstrap

Bootstrap is "a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." This tools makes it a lot simpler to build responsive web sites – meaning websites which adapt their design to the size of the screen, from mobile phone to giant TV.

...

The main classes for these contexts are:

• navbar and navbar-inner: classes container de la barre de navigationContainer class for the navigation bar.

• navbar-fixed-top: pour accrocher la barre de navigation en haut de la To attach the navigation bar to the top of the page.

• brand: pour le titre du siteFor the site's title/store name.

• nav, nav-tabs and nav-pills: pour les ongletsFor the navigation tabs.

• btn and btn-navba: pour les boutonsFor the buttons.

• nav-collapse, collapse, data-toggle, data-target: pour afficher et fermer automatiquementTo automatically hide/show content.

• icon-th-list: pour afficher un icon (uniquement sur les petits écrans ..th..)To display an icon (on small screens only: th).

Here is an example of a navigation bar with a menu on the right:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-th-list"></span></a>
      <a href="#" class="brand">SiteTitle</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Here is an example of menu tab:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Inbox</a></li>
      <li><a href="#">Drafts</a></li>
      <li class="divider"></li>
      <li><a class="disabled" href="#">Trash</a></li>
    </ul>
  </li>
</ul>

Tables

Main classes for tables:

• table, table-responsive: To create a table and activate the scrolling on smaller screens.

• table-striped: To add an alternating background in the rows.

• table-bordered: To add a border.

• table-hover: To add a background to the row when the mouse hovers it.

• table-condensed: To divide the cellpadding in two (makes the table more compact).

• success, warning, danger, etc.: To change the background color of a row or of a cell.

Sample usage::

<table class="table table-condensed table-hover">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr class="warning">
    <td>John</td>
    <td>Carter</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Parker</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Rambo</td>
    <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Panels

Main classes for this context:

• panel, panel-body: To define a panel.

• panel-default, panel-primary, panel-success, panel-info, panel-warning and panel-danger: To adapt the layout to the panel.

• panel-heading and panel-title: To add a header and a title to the panel.

• panel-footer: To add a footer to the panel.

Sample usage:

<div class="panel panel-default">
  <div class="panel-heading">
    <h1 class="panel-title">Panel Title</h1>
  </div>
  <div class="panel-body">
      This is the content of the panel.
  </div>
  <div class="panel-footer clearfix">
    <div class="pull-right">
      <a href="#" class="btn btn-default">Go Back</a>
    </div>
  </div>
</div>

Images

• img-rounded: To display an image with rounded borders.

• img-circle: To display an image within a circle.

• img-thumbnail: To handle thumbnails.

Sample usage:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="thumbnail">
        <img src="avatar.jpg" alt="Sample Image">
        <div class="caption">
          <h3>label</h3><p>description...</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="thumbnail">
        <img src="avatar.jpg" alt="Sample Image">
          <div class="caption">
            <h3>label</h3><p>description...</p>
          </div>
      </div>
    </div>
  </div>
</div>

Lists

Main classes:

• list-unstyled: List without list-style and now padding-left.

• list-inline: Horizontal list.

• breadcrumb: Horizontal list for navigation path.

• dl-horizontal: List with two aligned elements.

• list-group: Panel-list-like display.

Breadcrumb example:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li class="active">Accessories</li>
</ul>

Header and paragraph example:

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">What is HTML?</h4>
    <p class="list-group-item-text">HTML stands for HyperText Markup Language. 
      HTML is the main markup     language for describing the structure of Web pages.</p>
  </a>
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">What is Twitter Bootstrap?</h4>
    <p class="list-group-item-text">Twitter Bootstrap is a powerful front-end framework for faster 
    and easier web development. It is a collection of HTML and CSS based design template.</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">What is CSS?</h4>
    <p class="list-group-item-text">CSS stands for Cascading Style Sheet. CSS allows you to specify 
    various style properties for a given HTML element such as colors, backgrounds, fonts etc.</p>
  </a>
</div>

Forms

Main classes:

• form-inline and form-horizontal on the form element.

• form-group on the div that groups the label and the textarea. Enables automatic adjustment of spacing.

• form-control on the input, textarea and select elements– which by default have a width of 100%.

A container that has the form-group class always needs a label. To add a label and display it, you must use the sr-only class. For instance:

<div class="form-group">
  <label class="sr-only" for="exampleInput">Email address, label not visible</label>
  <input type="email" class="form-control" id="exampleInput" placeholder="Enter email">
</div>

Classes that change the appearance of zones depending on content validation:

• has-warning
• has-error
• has-success

Classes that enable the display of an icon in the textarea:

• glyphicon et form-control-feedback

• glyphicon-ok

• glyphicon-warning-sign

• glyphicon-remove

For instance:

<div class="form-group has-warning">
  <label class="control-label" for="input1">Label with warning</label>
  <input type="text" class="form-control" id="input1">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>

Buttons and links

Main classes:

• btn: Base class for buttons

• btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link: To change the button's appearance

• btn-lg, btn-sm and btn-xs: To change the button's size.

• btn-block: To change the size of the parent element.

• active and disabled: to change the availability of a button.

<span class="button ajax_add_to_cart_button btn btn-default disabled">
  <span>{l s='Add to cart'}</span>
</span>
<a itemprop="url" class="button lnk_view btn btn-default" 
    href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
  <span>{l s='More'}</span>
</a>
<button type="submit" name="submitMessage" id="submitMessage" 
    class="button btn btn-default button-medium">
  <span>{l s='Send'}<i class="icon-chevron-right right"></i></span>
</button>

Sass

About Sass

Sass is the acronym for "Syntactically Awesome Style Sheets". It is a language that you can use to build your CSS files.
While remaining CSS3-compatible, it brings a lot of features that make it easier to create consistent CSS rules with less work, most notably less copy-pasting: nesting, variables, classes, control directives (if, for, each, while), etc.
To achieve this, Sass requires the use of a preprocessors: it turns your Sass files into CSS files that all browsers can read.

Sass has two syntaxes it can use:

• SCSS syntax, or "Sassy CSS":
  • The newer syntax, and the one PrestaShop uses.
  • Files use the .scss extension.
  • Can use semicolons and parenthesis.
  • Extension of CSS3.
• SASS syntax, or "indented syntax":
  
  • Older syntax, less used.
  • Files use the .sass extension.
  • Relies on tab indentation, just as in Python.
  • No semicolon, no parenthesis.
  • Properties must start with a newline.

You can see the difference between both syntaxes here:

h1 {color: #000; background: #fff}

h1
  color: #000
  background: #fff

Installation

Sass (and Compass, see below) require the installation of the Ruby language on your machine.

Compass

FontAwesome