Design Guide

We hope that this section will help out with customizing MageRewards. This guide assumes that you are already knowledgeable in how to customize Magento designs by itself. If you don't, you should read over  Magento's Designer Guide.

Design Guides

MageRewards Design Summary

MageRewards 

Note: Prior to MageRewards version 1.6, frontend template files were located in the "default/default" directory rather than the "base/default" directories mentioned below.

All design and skin files are transferred to the default  package and the default theme. This means you'll find MageRewards design files in:

  • app/design/
    • frontend/base/default/
      • template/rewards (folder)
      • layout/rewards.xml
      • layout/rewardsplat.xml
    • adminhtml/default/default/
      • template/rewards (folder)
      • layout/rewards.xml
  • skin/frontend/base/default/
    • images/rewards (folder)
    • css/rewards (folder)
    • fonts/ (folder)
  1. TBT_RewardsOnly module for points-only mode functionality
    • app/design/
      • frontend/base/default/
        • template/rewardsonly (folder)
        • layout/rewardsonly.xml

Customization Instructions

To add your own custom skin, copy (not move) over the file you want to modify in the same folder structure as it appears in the default/default theme, into your own theme.

For example, lets say you want to customize the file:

  • design/frontend/||your_package||/default/rewards/product/view/points.phtml.

To do so, copy this file over to:

  • design/frontend/||your_package||/<your_theme>/rewards/product/view/points.phtml

Now do whatever changes you would like to the file in <your_theme>.

Front-end Customization

Custom Skin

The following file/folders contain MageRewards DEFAULT skins files:

Note: Prior to MageRewards version 1.6, frontend templates files were located in the "default/default" directory rather than the "base/default" directories mentioned below.

  • skin/frontend/base/default/
    • images/rewards (folder)
    • css/rewards (folder)
    • fonts/arial.ttf

To customize, you need to follow the standard Magento custom design procedures: Copy the files to your own custom theme/package and work from there. Keep note that modifying any core/default files voids your MageRewards support/updates warranty.

If you want your CSS skin customizations to  extend our base default customization, you can import the default style sheet in the top of your own custom style sheet. For example, in the top of your custom file skin/frontend/custompackage/customtheme/css/rewards/catalog.css file you could add something like following at the top:

@import url("../../../../default/default/css/rewards/catalog.css");

Note: If you move the skin file to your own custom theme, you must also move over the skin images. In Magento, skin images are referenced relative to the skins folder so they need to be updated accordingly.

Custom Layout

See the following file and follow the customization instructions mentioned above.

app/design/frontend/base/default/layout/rewards.xml

Custom Template

See the following folder and follow the customization instructions mentioned above.

app/design/frontend/base/default/template/rewards

Back-end Customization

The back-end for MageRewards does not have any skins.

Custom Layout

See the following file and follow the customization instructions mentioned above.

app/design/adminhtml/default/default/layout/rewards.xml

Custom Template

See the following folder and follow the customization instructions mentioned above.

app/design/adminhtml/default/default/template/rewards

Your Own Design Package

Since all design and skin files are transferred to the default package and the default, if you're using your own package (<your_package>/default) then you will have to follow  these instructions.

Still need help? Get Help Get Help