On most themes MANAdev extensions look fine out of the box. Despite that, you can easily customize look and feel of the extension:

  1. Change CSS styles
  2. Change images
  3. Change HTML templates
  4. Adapt layout
  5. Adapt javascript to changed HTML template

General Rules

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:

  1. Never modify original files.
  2. 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):

  1. [your package]/[your theme]/some_dir/some_file.ext
  2. [your package]/default/some_dir/some_file.ext
  3. base/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:

  1. Set Current Configuration Scope to your website or your store view.
  2. Enable Advanced->Developer->Debug->Template Path Hints.
  3. Consider adding you external IP address to Advanced->Developer->Developer Client Restrictions.
  4. 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.

Adapting Javascripts to HTML Template Changes

Some .js files depend on specific HTML element structure and if you modify .phtml file, you may break that dependency (and hence break javascript functionality).

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:

  1. Adapting Layered Navigation to Right Column Layout
  2. Adapting Layered Navigation AJAX to Custom Product List Layout