Customization

• 1. Adding custom files

  Custom layout updates

  • To add your own custom layout updates, create the file: app/design/frontend/mango/reflector/layout/local.xml or app/design/frontend/mango/estilo/layout/local.xml

  Custom css files

  • To add your own custom css file, you need to enable the option in: System > Configuration > Mango Theme > Theme Settings > Custom CSS > Use Custom CSS
  • Create the file: skin/frontend/mango/estilo/css/style-local.css or skin/frontend/mango/reflector/css/style-local.css

  Custom theme files and template files from third party extensions

  • When adding custom theme files from a third party extension, you can use these folders :
    • app/design/frontend/base/default/layout
    • app/design/frontend/base/default/template
  • When adding custom modified files of the theme, you should copy them from app/design/frontend/mango/default/ to app/design/frontend/mango/estilo(or reflector)

• 2. How to create a child theme

  • To create a child theme in order to add customized versions of the template files, first create the necessary files and folders, in this case, the theme will be called "example":
    • app/design/frontend/mango/example
    • app/design/frontend/mango/example/template
    • app/design/frontend/mango/example/layout
    • app/design/frontend/mango/example/etc
    • app/design/frontend/mango/example/etc/theme.xml
  • The contents of app/design/frontend/mango/example/etc/theme.xml :

    For the estilo theme:

    <?xml version="1.0"?>
    <theme>
        <parent>mango/estilo</parent>
    </theme>
    

    For the reflector theme:

    <?xml version="1.0"?>
    <theme>
        <parent>mango/reflector</parent>
    </theme>
    

  • Then set the theme as the default theme in System > Configuration > Design
  • Now you can place your customized files inside the new child theme.