...
PrestaShop's templating system enables web-designers and developers to easily build their own theme, provided they have a solid technical grounding.
This The templating system is based on a 3-tier architecture:
...
See Wikipedia for more information on the 3-thier tier architecture: http://en.wikipedia.org/wiki/Multitier_architecture#Three-tier_architecture
...
- All themes have their files located in the
/themesroot folder. - Each theme has its own sub-folder, in the main themes folder.
- Each theme is made of template files (
.tpl), image files (.gif,.jpg,.png), one or more CSS files (.css), and sometimes even JavaScript files (.js). - Each theme has a 180*200
preview.jpgimage file in its folder, enabling the shop-owner to see what the theme looks like directly from the back-officeback office, and select the theme appropriately.
...
- All themes have their files located in the
/themesroot folder. - Each theme has its own sub-folder, in the main themes folder.
- Each theme is made of template files (
.tpl), image files (.gif,.jpg,.png), one or more CSS files (.css), and sometimes even JavaScript files (.js). - Each theme has a 180*200
preview.jpgimage file in its folder, enabling the shop-owner to see what the theme looks like directly from the back-officeback office, and select the theme appropriately.
...
- The
/cssfolder contains all CSS files.- The
/sassfolder contains all the Sass.scsssource files, before they are compiled into the CSS files.
- The
- The
/fontfolder contains the needed font files. - The
/imgfolder contains all images. - The
/jsfolder contains all the JavaScript files. - The
/langfolder contains the theme's translations. Its access rights should be set at CHMOD 666 (for instance), so that the back - office translation tool can read and write into it. - The
/mobilefolder contains the mobile version of the theme. - The
/modulesfolder contains the needed template files for many modules. - The root of the folder contains TPL files only (Smarty files), as well as the
preview.jpgthumbnail file.
...
Smarty 2 has long been deprecated, and should not be used for PrestaShop 1.6 themes.
Bootstrap v3
Since version 1.6, PrestaShop includes the Bootstrap front-end framework (http://getbootstrap.com/). It is a collection of HTML and CSS tools built to help web designer create consistently beautiful and responsive designs (meaning that they can easily adapt to any screen size). Initially an internal effort to document and share common design patterns and assets within the Twitter company, it has quickly grown to become the most used front-end framework.
PrestaShop uses Bootstrap for both its front - office and back - office default templates.
| Info |
|---|
Designers creating a new back - office theme MUST use Bootstrap. Designers creating a new front - office theme CAN SHOULD use Bootstrap, but . While this is currently not an obligation, Bootstrap is deeply built into PrestaShop. |
Bootstrap initially uses the LESS dynamic stylesheet language (http://lesscss.org/), but PrestaShop uses the Bootstrap For Sass port (https://github.com/twbs/bootstrap-sass), Sass being the language that inspired LESS. This makes it possible to use the Compass framework.
...
All web-designers and developers should use the following developer browser extensions:
- Firefox: use the Developer Tools (see https://developer.mozilla.org/en-US/docs/Tools). They can even help you work with Sass: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
- Firefox: alternatively, install Firebug (http://getfirebug.com/), a free extension for easy comparison and debugging between your CSS and the output.
- Firefox/Chrome: install the Web Developer (http://chrispederick.com/work/web-developer/), a free extension adds many handy web developer tools to your browser.
- Safari 5+: use the Web Inspector (see https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html).
- Chrome: use the Developer Tools (see https://developer.chrome.com/devtools/index).
- Opera 9.5+: use Dragonfly, a fully-featured debugging environment (see http://www.opera.com/dragonfly/).
- Internet Explorer 8+: use the Developer Tools (see http://msdn.microsoft.com/en-us/library/dd565628%28v=vs.85%29.aspx).
- Internet Explorer 6 and 7: install the IE Developer Toolbar (see http://www.microsoft.com/en-us/download/details.aspx?id=18359), or use Firebug Lite (see https://getfirebug.com/firebuglite).
...
- Do not mix HTML and PHP code; use Smarty tags in order to get a dynamic page.
- Do not mix HTML and CSS code; put the CSS code in a separate
.cssfile. - Always validate your HTML and CSS code using the W3C validators: http://validator.w3.org/ for HTML and XHTML, http://jigsaw.w3.org/css-validator/ for CSS.
- Do not make SQL queries from a PHP controller (
.phpfile at the root of PrestaShop); use the existing methods from the PrestaShop classes, or create new methods for these classes. - Always check if a method you need already exists in the available classes.
- Do not ever edit PrestaShop's own files; always build your code into modules in order to facilitate updates.
- Make sure to always produce a clear and readable code, making it easy to maintain that code for anyone in the foreseeable future.
- Do comment your code, and write both method names and comments in plain English.
- When editing the theme on a production site, always put the shop in Maintenance Mode first, via the back-officeback office' "Maintenance" preference page.
- Use modern browsers, such as Firefox (latest non-beta version), Google Chrome (latest non-beta version), IE10+ or Opera (latest non-beta version) – and make sure your friends and family members do too!
- Whenever possible, use CSS sprites (read http://www.alistapart.com/articles/sprites and http://www.alistapart.com/articles/sprites2/).
- Disable your browser's cache when developing.