In this section we will take a look at how to configure your theme and also look at what kinds of changes can be made.
When making changes to your theme, it's important to know what you are working on and where to look. Magento themes are complex for beginners: if you open a theme folder, it will not be immediately clear where to search. It is not recommended that you make many changes to your theme as a beginner.
To paint a picture: it can take an experienced web developer several weeks to really get a grip on Magento's theming system. Because of this, it is a good idea to consult an expert for middle to large adjustments.
In the following sections we provide some examples of what we consider small, medium, and large changes. This is only as an illustration, based on what we've encountered.
In general this is changing colors and/or wordings, and simple layout adjustments. For example:
- Changing a heading to normal text
- Removing some links from the store
- Making words or headings bold or italic
- Removing a block from the right column (for example, the Recently Viewed block)
Big changes are those where parts of your theme need to be (re)built. Often this requires programming (PHP) logic. For example:
- Changing the way the drop-down menus of your categories are structured.
- Showing your checkout process on the same page as your shopping cart.
- Showing different kinds of product information at different locations on the product detail page, depending on the type of product. For instance, showing a color selector for your products as a list of clickable color images instead of a drop-down menu containing color names.
Here, we will discuss a way to perform some of the smaller changes previously mentioned, to give you a feel of how to approach similar problems. If you want to read more, it's best to go to http://www.magentocommerce.com/design_guide/articles/working-with-magento-themes, where you will find a manual for people working on Magento themes, written by Magento themselves.
The changes we will use as an example are: removing a block from the right column, changing the color of certain headings, and changing certain headings to normal text.
As previously discussed, you can find the files of your theme in the app/design/frontend/ and skin/frontend/ folders. We'll assume a package called beginner and a theme called guide. Of course, replace these names with your package and theme names wherever necessary. Looking inside the app/design/frontend/beginner/guide/ folder, we see a couple of folders. For changing the look of your theme, the layout and template folders are important. The layout folder contains XML files that tell Magento where the blocks of information in your store should be positioned. The template folder contains PHTML files as per the Magento component that display the information of the information blocks defined in the layout folder. A PHTML file contains PHP code (programming) and HTML code (markup).
All of the discussion in the following sections assumes your theme is structured exactly like the package/theme of a standard Magento theme.
Before you change any code, it's useful to turn off Magento's cache. Otherwise, often your changes will not show. The process to disable the cache can be found in Chapter 11, Maintaining and Administrating Your Store.