When the application is activated, it’s time to adjust the design (colouring, layout, graphics) to your individual needs. HTML and CSS codes are stored in the “templates/default/” directory (file with tpl extension - HTML code, file with css extension - CSS code). While doing the modifications of graphics, you should keep in mind the following:
- Modify graphics only by making changes to the CSS files. - if possible, change design only by making modification of the .css files. By doing that, you will be able to keep the original structure of the HTML code, so it will be kept up to standards, and will be easy to update. You will find useful information about style modification in the modyfication of CSS style section. After creating a new CSS style file, we recommend checking it with the CSS validator.
- Pay attention to visibility of important elements - graphics project should be well-balanced. It means layout and colours used in it. You should emphasize the most important elements on the site by using underline, bold or coloured fonts. But be caruful not to overdo it, feature only the elements like company’s name, contact, the most important products or the most important issues.
- Make sure you keep up with the standards when modifying the HTML code - the HTML code of our application is conformed to standards of the W3C, so if you need to modify it, it is important to keep this standards up. It concerns XHTML code, which you can test with validator. What is more, you should also pay attention to directions of availability (you can read more about WAI on site http://www.w3.org/WAI/). To test availability, you can use a suitable vaildator.
- Don’t remove variables - the .tpl files contain PHP variables, that are responsible for displaying various elements of the site e.g.: menu, title, description. Variables are part of code and start with ‘$’ sign e.g.: $sMenu1 or $aData[sName]. It is important not to delete variables, which application are not sure of. If you need to change the design of a particular page, use tips from this sections Changing design of subpages and whole application (templates and themes).
- We recommend reading books about our scripts and web standards - you can find many useful information in books about web standards and website building. It may help you with building your own site.
Information presented below might be helpful for your own website's graphics modification. You will find even more practical instructions and examples in the Tips & Tricks section.
Before getting on with it also read basic terms and templates sections.
Modification of style CSS
Default style template is placed in the “templates/default/style.css” file.
The best way to change design of a page is to create a new style file in the templates/ directory e.g.”style2.css”. In that file you can write new styles or copy content of the default “style.css” file to the new one and make modifications to it. When modifications are ready switch the style template in the “database/config/general.php” file by changing the line.
$config['style'] = "style.css";
Schema you can see below describes specific elements of the code.
List of products
Product's details
Basket
Order form
Changing design of subpages and whole application (templates and themes)
Templates:
Elements of particular page such as title, content, photos, list of subpages, etc. for default layout are placed in the templates/default/pages_default.tpl file.
You can change this layout for every page. The way to create a template is described in the “tips” section.
Attention: copy to a new file only the blocks you want to modify. Other blocks will load from the default template - “pages_default.tpl”.
Themes:
When you need to change layout/design of a particular element, like header or menu, it is not enough to change templates only (as it is described above) but all composition must be altered as for example you need to hide the left menu on a selected page.
In this case the themes mechanism will come in handy. The apropriate files are stored in the “actions\themes\” directory. The “default.php” file contains the default theme. This file is responsible for generating menus (all types) as well as the whole page structure (header, body, footer).
To create a new theme, follow the steps described in the “tips” section.
Version for mobile devices
For the first time in the 3.0 version of the script we added a possibility to prepare another version of the website for mobile devices like mobile phones, palmtops, etc.
Mobile version of the webiste is available at “mobile.php” (so for example: your-website-domain.com/mobile.php). If you want to change any element in the mobile version of your website to a different one, you have to copy the specific block from the original code and put it in the same file with changed name, the new name beginning with: “MOBILE_”. For example: If you want to change a footer in your mobile website, you have to copy the FOOT block in the templates/default/container.tpl file and change the name of the copied block to MOBILE_FOOT. Then you can change the code in this new block.