File System

To get started, the first change we have to make is to setup our folders for our package. First thing to do is to create a new folder in app/design/frontend called ‘yourmagento‘. Inside this folder, create a folder called ‘default‘. Inside the default folder, create two more folders: ‘layout‘ and ‘template‘. Do the same now for the two theme variants aswell – ‘christmas‘ and ‘summer‘. The resulting structure should look like the following:

1

2

3

4

5

6

7

8

9

10

11

12

13

app/

design/

frontend/

base/

default/

yourmagento/

default/

layout/

template/

christmas/

layout/

summer/

layout/

We also need to create our skin for this package too. To do this, we basically replicate the above structure inside the skin in the root of magento, however, instead of ‘layout‘ and ‘template‘ folders, we have ‘css‘, ‘js‘ and ‘images. For example, the file system should look like the following:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

skin/

frontend/

base/

default/

yourmagento/

default/

images/

css/

js/

christmas/

css/

images/

summer/

css/

images/

Adding default css and images to create a basic design

For this step, what I usually do is take the magento default/blank skin and copy this into our yourmagento/default folder. To do this, you need to copy the files from ‘skin/frontend/default/blank/css‘ and ‘skin/frontend/default/blank/images‘ into your default skin folder. After copying these files your skin folder should look like the following:

1

2

3

4

5

6

7

8

9

10

11

12

13

skin/

frontend/

base/

default/

yourmagento/

default/

images/

bunch of copied images here

css/

print.css

styles.css

styles-ie.css

.....

Next you want to create a stylesheet inside your yourmagento/default theme to put an overrides you make to the blank/default theme you just copied in. I’m going to call this file ‘yourmagento.css’. Your CSS folder in ‘skin/frontend/yourmagento/default‘ should now look like the following:

Setting up magento to use your new package and theme

Under themes – make sure it says ‘default’ for ‘Templates’, ‘Skin (Images/CSS)’, ‘Layout’ and also for ‘Default’.

Magento is now setup to use our new design package. Next step is to disable the cache for ‘Configuration’, ‘Layouts’ and ‘Blocks HTML Output’.

Correctly modifying the package XML files
What we need to do now is to create an XML file for our default theme. This needs to be called local.xml. In here we will keep all our layout update/modifications making it easy to upgrade in the future. Go ahead and create the following file:app/design/frontend/yourmagento/defaul/layout/local.xml
One of the main additions to this local.xml file is the inclusion of our CSS files. Earlier we created the file ‘yourmagento.css’, and so we will need to tell Magento, through local.xml, to include this.
I will now show you a very simple version of local.xml just to get you started. I will update this post with further resources on layout modifications very soon.

Once you’ve added the above to your local.xml file, if you view your store you should notice that the paypal logo originally at the bottom of the right hand column has now gone.
To test that the yourmagento.css file is properly being included, a quick check could be (you’ll want to delete the following afterwards though!):

1

*{display:none!important;}

Adding a theme variant

Adding theme variants is actually quite easy in magento once the package has been setup correctly. Because we’ve already added the ‘christmas’ and ‘summer’ theme folders, the first thing you need to do is create the following files in both the christmas and summer skin folders:skin/frontend/yourmagento/christmas/css/local.css
skin/frontend/yourmagento/summer/css/local.css
You’ll notice that the CSS file is called ‘local.css’. The name of this file is not important, what is important is that this file is named the same for each skin variant. You’ll notice that this file is also currently referenced inside the local.xml file we created earlier – just below where we referenced the yourmagento.css file.
Now we’ll make a quick change to our summer theme CSS file.

1

body{background-color:orange!important;}

To test this change, log back into your magento admin and goto:

Admin -> Configuration -> Design

What we need to do now is update the value where it says ‘Templates’, ‘Skin (Images / CSS)’ and ‘Layout’ to ‘summer’. Remember to leave ‘Default’ as ‘default’!

Save and then refresh the frontend of your shop. You should now notice you have an orange background, you can modify images, add images, colors and even modify the layouts through the .phtml files inside the app/design folders.
Stay tuned for future posts on Magento!

9 Comments

Nicolai

I have the sample data from Magento installed. I followed your tutorial and it worked fine, thank you. However if I add an item to the cart, I’m just redirected to an empty cart. This does work if I enable the default theme.

Josh

Siddhartha Bhatta

I just want to know if this is possible or not
I have created my own design using basic html and css which I want to use in magento. I do not want to work with Magento default homepage, instead, i want to apply my own design that I created separately in html and css..I want to know that what i have to do to work with the theme I prepared.. I tried to search in many places but i couldn’t find answer of my question

Josh

Hi, In the admin you go to System -> Configuration -> Web -> Default Pages

You will have to change to the website / store view that you want to change (the dropdown in the upper left corner). You will probably have to create a new CMS page if you want to have something different from your default home page.