Book Image

Mastering Magento Theme Design

By : Andrea Sacca
Book Image

Mastering Magento Theme Design

By: Andrea Sacca

Overview of this book

Table of Contents (18 chapters)
Mastering Magento Theme Design
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Tips and tricks


There is some stuff that you must know while creating a theme. The following tips will help you in cases of extreme necessities, particularly when you are looking for a specific file to override.

Template path hint

The app/design/frontend/base/default path contains a lot of files, all divided into many folders. It's a bit hard to remember the path and name of every file. In order to find the path of a file in the base theme, we need to customize and then copy our theme; Magento comes to us with the Template Path Hints option.

This feature will help you a lot if you don't know the position of any file and will help you to speed up the theme creation.

To enable this feature, perform the following steps:

  1. In the Admin panel, navigate to System | Configuration.

  2. On the left side at the bottom in the Advanced box, click on Developer.

  3. On the left side in the Current Configuration Scope box, select the Main Website, option or your own website.

  4. Now, in the Debug box to the right, select YES to Template Path Hints.

  5. Save the configuration.

Back in the frontend, we can see each block surrounded by a red border, with the PHTML file path that generates it.

In this way, we can copy the files from the base theme and paste them to the same location of our theme.

Tip

Alternatively, you can use the Templates Hints 2 module created by Fabrizio Branca at http://www.fabrizio-branca.de/magento-advanced-template-hints-20.html.

The following screenshot shows the template path hints in action. As you can see, each block is surrounded by a red border with the path to the file that generates it:

This is an example of what the screen in this program looks like.

Disabling the WYSIWYG editor

Another useful tip is to disable the WYSIWYG text editor. This will save you a lot of time when you have to write the HTML code inside the CMS pages or blocks, and you can prevent the editor from changing the code you've written.

To disable it, navigate to System | Configuration | Content Management, as shown in the following screenshot:

Here you have three options. You can choose to leave it as Enabled by Default (the default configuration), or you can choose to disable it completely, or to disable by default. I recommend that you at least disable it completely in the development phase.