Magento 1.4 Theming Cookbook

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

(For more resources on this subject, see here.)

Introduction

As we have just noted, this article is going to be more practical. We are going to see some basic things that will help us modify the appearance of our site, from looking for free templates to the process of installing them and making some tiny changes.

I am sure this article helps us establish a good foundation though most of the things we are going to see are quite simple, so this is going to be a good introduction.

Installing a theme through Magento Connect

We are going to see two ways in which we can install a new Magento theme. The first one is through Magento Connect. This involves a number of steps that we are going to follow along this recipe.

Getting ready

First we need to go to Magento Connect: http://www.magentocommerce.com/magentoconnect.

There, search for the theme Magento Classic Theme Free, or, alternatively, load this link:
http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/928/magento-classic-theme.

How to do it…

This theme, the Magento Classic Theme, is the one we are going to use through this article. Follow these steps to install it:

1. First we need to log into our www.magentocommerce.com site account. This is a necessary step to get the Extension Key.
2. The extension key can be found in a box that looks like the following screenshot:

   

3. We also find some other useful info there, like the compatibility version, and the price, free in this case. There’s also a button that says Get Extension Key. Click on that button:

   

4. After clicking on the Get Extension Key button, the box that we can see in the preceding screenshot appears. On that image we must accept the license agreement, select the Magento version we are using, and again click on Get Extension Key:

   

5. This is the last screen. We need to obtain the extension key and copy it as we are going to use it very soon.

For the next steps we need to go to our Magento installation Admin area screen. There, carry out the following instructions:

1. Go to System menu, then Magento Connect and finally Magento Connect Manager.
2. The Magento Connect Manager screen will appear, just like the following screenshot:

   

3. Here we need to insert the same login info as we used in our Magento Admin screen. In the next screen we need to insert the key we have just copied:

   

4. When we click on the install button the installation process starts. It will only take a few seconds and the theme will be installed into our site. Fast and easy!

How it works…

We have just selected a theme from the Magento site, and installed it into our own Magento installation through the Magento Connect Manager. We can do this as many times as we want, and install as many themes as we need to.

Installing a theme manually

In this recipe we are going to see another method of installing themes into our Magento installation. This time we are going to see how to install a theme manually. Why is this important? Just because we may want to use themes that are not available through Magento Connect, as they can be themes purchased in other places, or downloaded from free themes.

Getting ready

In order to follow this method we need a downloaded theme. You can get the Magento Classic theme from this link:

http://blog.templates-master.com/free-magento-classic-theme/

Once done, we will get a file called f002.classic_1.zip; just unzip it. Inside we will find many folders:

• graphic source: This folder has all the PSD files necessary to help us modify the theme
• installation: This folder is where we can find installation instructions
• template source 1.3.2: The theme is for Magento version 1.3.2
• template source 1.4.0.1: This theme is for Magento 1.4.0.1
• template source 1.4.1.0: This theme is for Magento 1.4.1.0

Though our Magento version is not 1.4.1.0, we could use the theme without problems. What can we find inside that folder? Another two folders:

• app
• skin

This is the folder structure we should expect from a Magento theme.

How to do it…

Installing a theme is as easy as copying those two folders into our Magento installation, with all their sub folders and files. In our Magento installation you will see another app and skin folder, so the contents in the folder of the downloaded theme will combine with the already existing ones. No overwriting should occur. And that’s all; we don’t need to do anything else.

Selecting the recently installed theme

Good, now we have installed one theme, one way or the other. So, how do we enable this theme? In fact it’s quite easy; we can achieve just that from our site admin panel.

Getting ready

If you haven’t logged into your Magento installation, do it now.

How to do it…

Well, once we are inside the admin panel of our site, we need to carry out the following steps to select our new theme:

1. Go to System menu, and then click on Configuration.
2. Look at the General block and select Design.
3. There you will see the following screenshot:

   

4. There, in Current Package Name, we can leave it as default. In the Themes section, in the Default column, we can enter the name of the theme, f002 for this example.
5. We are done. Click on the Save config button and refresh the frontend. You will be able to see the changes.

How it works…

We are done. We have just selected the new theme. As promised it was quite easy, wasn’t it? Try it yourself!