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
Let's diving into the way a theme is organized: folders, files, where th= ey belong and how to handle them correctly
The main folders of any PrestaShop theme are those:
/cache
folder contains all the temporary files that ar=
e generated and reused in order to lighten the server load. The folder is e=
mpty by default./css
folder contains all CSS files.
/sass
folder contains all the Sass .scss
=
source files, before they are compiled into the CSS files./font
folder contains the needed font files./img
folder contains all images./js
folder contains all the JavaScript files./lang
folder contains the theme's translations. Its ac=
cess rights should be set at CHMOD 666 (for instance), so that the back&nbs=
p;office translation tool can read and write into it.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:
/mails
folder contains the templates for the emails th=
at PrestaShop sends (order confirmation, password request, shipping notific=
ations, etc.)./mobile
folder contains the mobile version of the them=
e./modules
folder contains the template files for many m=
odules./pdf
folder contains the template files for the PDF fi=
les that PrestaShop generates (invoices, delivery slip, supply orders, etc.=
).The root of the folder contains TPL files only, as well as the pre=
view.jpg
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.
The theme's CSS files are located in the /css
folder.
It is recommended to have a common style sheet for global CSS rules:
Then, each of the controller should have its own C=
SS file: for instance, product.css
for the Product page.
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 /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!
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:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
If you do not build your theme with a specific font or icon set in mind,= you can skip this folder.
Theme-related images are to be stored in the /img
folder.=
p>
You can create sub-folder for a better organization. For instance, the d= efault theme has the following subfolders:
/icon
for simple icons (for instance, those not available =
in your chosen font set)./jquery
for jQuery-specific images.You can create more if needed.
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.
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 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.
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:
<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:
{$img_dir}
returns the absolute file path for the {l s=3D'My text'}
is a special method for strings tha=
t need to be translated. Every string should be encapsulated in a {l =
s=3D'...'}
tag.{$link->getPageLink('search')}
returns the absolut=
e file path to another template file, in this case the search.tpl file.
{$base_dir}
returns the absolute file path to the roo=
t of PrestaShop's folder =E2=80=93 and therefore, to the home page.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.
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:
.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:
/* 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.
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>
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.