Customizing Sweet Tooth Design

From Sweet Tooth Magento Reward Points Wiki

Contents 1 Design Guides 2 Sweet Tooth Design Summary 2.1 Sweet Tooth Standard 2.2 Sweet Tooth Platinum 3 Customization Instructions 4 Front-end Customization 4.1 Custom Skin 4.2 Custom Layout 4.3 Custom Template 5 Back-end Customization 5.1 Custom Layout 5.2 Custom Template 6 Your Own Design Package

Design Guides

• Modern Theme Tips
• Hellominty Theme Tips
• Customize Global Points String Display

  Display 100 TOKENS instead of 100 TOKEN POINTS, or other points display changes.

• Customize product view - "You will earn X for buying this product"
• How do I remove the send points to a friend feature?
• How do I remove the redemption catalog?
• Customizing and showing the points slider.
• Installing Sweet Tooth Into A Custom Design Package
• Points Currency Troubleshooting
• How To Turn Off The Points Columns In The Shopping Cart

Sweet Tooth Design Summary

Sweet Tooth Standard

Note: Prior to Sweet Tooth 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 Sweet Tooth design files in:

• app/design/
  • frontend/base/default/
    • template/rewards (folder)
    • layout/rewards.xml
  • adminhtml/default/default/
    • template/rewards (folder)
    • layout/rewards.xml
• skin/frontend/base/default/
  • images/rewards (folder)
  • css/rewards (folder)

Sweet Tooth Platinum

Sweet Tooth Platinum edition has all the same files/folders as the Sweet Tooth standard edition, plus these changes:

1. The files/folders are stored in the base/default theme directory structures
2. TBT_RewardsPlat Platinum module added files and folders:
   • app/design/
     • frontend/base/default/
       • template/rewardsplat (folder)

         (may not be needed)

       • layout/rewardsplat.xml
     • adminhtml/default/default/
       • template/rewardsplat (folder)

         (may not be needed)

       • layout/rewardsplat.xml
   • skin/frontend/base/default/ AND skin/frontend/enterprise/default/
     • images/rewards (folder)
     • css/rewards (folder)
     • fonts/ (folder)
   • skin/adminhtml/default/default/
     • images/rewards (folder)
     • css/rewards (folder)
3. 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 Sweet Tooth DEFAULT skins files:

Note: Prior to Sweet Tooth 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 Sweet Tooth 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 Sweet Tooth 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.