Message-ID: <1645171307.379236.1711706375192.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_379235_1214550963.1711706375187" ------=_Part_379235_1214550963.1711706375187 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html Organization of a Theme

Organization of a Theme

Organization&n= bsp;of a Theme

Let's diving into the way a theme is organized: folders, files, where th= ey belong and how to handle them correctly

=20 =20

Folders

The main folders of any PrestaShop theme are those:

The following folders are not directly theme-related, but help you make = sure the whole of PrestaShop's feature have a design that is consistent wit= h your theme:

The root of the folder contains TPL files only, as well as the pre= view.jpg thumbnail file.

Thumbnail file

The preview.jpg file at the root of the theme's folder is t= he thumbnail that is used by PrestaShop in its back office theme selec= tor.

It serves as a visual reminder of what the theme is, and you should ther= efore make it a screenshot rather than your company's logo.

It can have any size =E2=80=93 the default theme's is 180*445 pixels.

It must be a JPEG file.

CSS and Sass

CSS

The theme's CSS files are located in the /css folder.

It is recommended to have a common style sheet for global CSS rules: global.css.
Then, each of the controller should have its own C= SS file: for instance, product.css for the Product page.

Sass / Compass

Sass and Compass files are optional: you do not need to use these tools = to build the CSS files for your back office theme.

If you do use Sass and Compass, we strongly advise to put the source .scss files in the /sass theme, so that other develo= pers can have access to theme and rework them more easily.

From there, you can generate the CSS files in the /css fold= ers from the Sass files in the /sass folder!

Font

The /font folder is optional: it contains the fonts that yo= u chose to use for your theme.

For instance, the default PrestaShop theme uses the Font Awesome font se= t (http://fortawesome.github.io/Font-Awesome/) for= its responsive icons, and therefore has the following files in its /= font folder:

If you do not build your theme with a specific font or icon set in mind,= you can skip this folder.

Image

Theme-related images are to be stored in the /img folder.

You can create sub-folder for a better organization. For instance, the d= efault theme has the following subfolders:

You can create more if needed.

JavaScript

JavaScript files are to be stored in the /js folder.

Unlike CSS files, we recommend you NOT to have a common/global JavaScrip= t file, nor should you have a single file per controller.

Language

All the translation files are to be stored in the /lang fol= der.

Files should be named after their ISO 3166-1 alpha-2 code in lowerc= ase: for instance, fr.php.

These files should be generated by PrestaShop integrated translation too= l (located in the Localization / Translations menu).

The mobile theme

The default theme in PrestaShop 1.6 is fully responsive, meaning that it= adapts itself to any screen size.

Your own theme should be responsive too! If not, then you should build a= n alternative theme targeted at smaller screen =E2=80=93 or use/adapt the o= ne available in PrestaShop 1.5's default theme.

PrestaShop has a mobile theme option in its back office: in the Preferen= ces / Themes page, the "Mobile" tab in the "Your current theme" section giv= es you the following choices: disable the option, or enable it for smartpho= nes, tablets or both.

Once this option is enabled, the theme that is displayed to the mobile v= isitor is not the default desktop theme but the alternative theme that is l= ocated in the /mobile folder: it is better suited for small sc= reen sizes, and therefore your customers will appreciate the difference.

In essence, the content of the /mobile folder is another co= mplete PrestaShop theme: it has the same overall file structure with its ow= n /css, /img and /js folders, and it= s own template files.

Files

Templates files

PrestaShop uses the Smarty template engine for its theme system. Smarty = makes it possible to separate content (the information being presented) fro= m presentation (the way the information is displayed). The template file mi= xes both in order to generate a fully-formed HTML file.

A template file is built with two types of block of code:

Note that you can generate more than just HTML pages with Smarty: XML fi= les, text files, email file, etc.

See for instance the constant and variable blocks in 404.tpl, the templa= te file displayed when PrestaShop needs to send a 404 File Not Found error = message:

=20
<div&=
gt;
=09<div>
    =09<img src=3D"{$img_dir}/img-404.jpg" alt=3D"{l s=3D'Page not found=
'}" />
    </div>

=09<h1>{l s=3D'This page is not available'}</h1>
=09<p>
=09=09{l s=3D'We\'re sorry, but the Web address you\'ve entered is no longe=
r available.'}
=09</p>

=09<h3>{l s=3D'To find a product, please type its name in the field b=
elow.'}</h3>
=09<form action=3D"{$link->getPageLink('search')}" method=3D"post">=
;
=09=09<div>
=09=09=09<label for=3D"search_query">{l s=3D'Search our product catal=
og:'}</label>
=09=09=09<input id=3D"search_query" name=3D"search_query" type=3D"text" =
/>
    =09=09<button type=3D"submit" name=3D"Submit" value=3D"OK">{l s=
=3D'Ok'}</button>
=09=09</div>
=09</form>

=09<div>
=09=09<a href=3D"{$base_dir}" title=3D"{l s=3D'Home'}">{l s=3D'Home p=
age'}</a>
=09</div>
</div>

=20

(this is a simplified version of the real template file, which you c= an find here: = https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/= 404.tpl)

People familiar with HTML (which you should be if you intend to build a = PrestaShop theme) will immediately notice some {$tag_name} tags in the regular HTML content. These are PrestaShop's Smarty variables= .

There are already a few interesting variables here:

PrestaShop uses the Smarty 3 engine. You can learn more about Smarty and= its syntax here: http://www.smarty.net/do= cs/en/smarty.for.designers.tpl.

Style sheets

Template files render into HTML files, with no styling (except for inlin= e styles, if any), which means that the blocks of content are displayed as-= is, bare bones, one block after the other. This is where style sheets (CSS = files) are useful: they are here to redefine the way the blocks of content = are displayed, sometimes even rearranging whole portions of the page in ord= er to make it look better. Font, margin, columns and many other design aspe= cts can be recomposed using CSS.

You can create and edit CSS files any way you want, making sure that the= y are stored in the /css folder.
It is recommended to have = a common style sheet for global CSS rules: global.css.
Then= , each of the controller should have its own CSS file: for instance, = product.css for the Product page.

If you are starting from the default theme's style sheet files, you shou= ld rather edit the corresponding Sass files in the /sass folde= r, then generate the new CSS files and store it in the /css fo= lder. This ensures consistency between CSS and Sass files.

Here is an example of a Sass file:

Filename: /sass/product.scss
=20
.primary=
_block {
  margin-bottom: 40px;
}
.top-hr{
  background: $top-line-color;
  height: 5px;
  margin: 2px 0 31px;
}
=20

...which gets rendered into these CSS lines:

Filename: /css/product.css
=20
/* 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;
}
=20

As you can see, the $top-line-color variable in the Sa= ss file turns into the #c4c4c4 value in the rendered CSS = file. Sass variables in the default PrestaShop 1.6 theme are stored in the = _theme_variables.scss file.

Image files

The images used by the theme should be stored in its /img f= older (and subfolders for specific cases, for instance /img/icon for Gif icons and /img/jquery for jQuery-specific images).<= br>You can use pretty much any kind of image you wish when creating your de= sign.

In terms of icons, PrestaShop uses the Font Awesome font set, stores in = the /font folder. Using a font for icons has many advantages:<= /p>

  • A single file for many different icons.
  • Many possible variations: size, color, shades, rotation, etc.
  • Display equally great on all screen sizes and resolutions: PC, TV scree= n, Retina, etc.

Tools

As an aside, you need a solid IDE (and a good knowledge of it) in order = to quickly locate the needed file with a grep-like tool.

You also need to get acquainted with pre-compilation tools, to make your= life easier.

------=_Part_379235_1214550963.1711706375187--