On most themes MANAdev extensions look fine out of the box. Despite that, you can easily customize look and feel of the extension:
- Change CSS styles
- Change images
- Change HTML templates
- Adapt layout
Appearance customization process in its core is simple: you find a file you need to modify in base/default theme, copy it to [your package]/[your theme] and modify it there. For extension to be easily upgradable, you need to follow these simple rules:
- Never modify original files.
- Never copy original files to your theme unless you need to modify them.
You should also keep in mind that when searching for a theme file some_dir/some_file.ext, Magento always try several locations (order is important):
- [your package]/[your theme]/some_dir/some_file.ext
- [your package]/default/some_dir/some_file.ext
Note. In some edge cases, search scheme is more complicated than the one described above.
Customizing CSS Files
Use browser's Inspect Element function (available in Chrome and Firefox) to see currently applied CSS styles and in which files they are located.
Then locate a file in skin/frontend/base/default/css/mana*.css
In order to customize file, copy it to skin/frontend/[your package]/[your theme]/css/ and modify it there.
Note. In case CSS file contains relative image paths like ../images/[some image file], please do copy all such files to your theme as well.
Changing Style Images
Use browser's Inspect Element function (available in Chrome and Firefox) to see currently used image files.
Then locate a file you need to substitute in skin/frontend/base/default/images/mana*/*
Upload new image with the same file name to skin/frontend/[your package]/[your theme]/images/mana*/
Customizing HTML Templates
Enable template path hints in System->Configuration:
- Set Current Configuration Scope to your website or your store view.
- Enable Advanced->Developer->Debug->Template Path Hints.
- Consider adding you external IP address to Advanced->Developer->Developer Client Restrictions.
- Save config.
In frontend, notice which red box surronds HTML you want to change and notice associated template path hint like "mana/filters/items/list.phtml".
Then locate a file in app/design/frontend/base/default/template/mana*/*.phtml
In order to customize file, copy it to app/design/frontend/[your package]/[your theme]/template/mana*/*.phtml.
In such cases, view page source and in its <head> element check for all included skin/frontend/base/default/js/mana*.js files.
In each of this files, check for CSS selector rules like $('div.m-some-class p'). In case you find something to be adapted, copy the file to skin/frontend/[your package]/[your theme]/js/mana*.js.
Adapting to Theme Layout
There are cases when layout files located in app/design/frontend/base/default/layout/mana*.xml need to be adapted to theme: