...
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.
...
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 SHOULD use Bootstrap. While this is not an obligation, Bootstrap is deeply built into PrestaShop. |
...
- 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.