Magento: Creating your own design package
In this post I'm going to demonstrate:
- How to setup the filesystem for a new Magento design package
- Adding default CSS and images to create a basic design
- Setting up the configuration to use this package
- How to correctly modify the layout via XML files
- Adding two theme variants ('christmas' and 'summer')
Now, some of the examples will be extremely basic. However, they should be enough to send you in the right direction.
For reference, the package name we're going to be using throughout this tutorial is 'gravitywell'.
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 'gravitywell'. 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:
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:
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 gravitywell/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:
Next you want to create a stylesheet inside your gravitywell/default theme to put an overrides you make to the blank/default theme you just copied in. I'm going to call this file 'gravitywell.css'. Your CSS folder in 'skin/frontend/gravitywell/default' should now look like the following:
Setting up magento to use your new package and theme
Now we need to tell magento which design package and theme we're using. Login to your magento admin and goto Admin -> Configuration -> Design.
- In Package: Current Package Name - type 'gravitywell'
- 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:
One of the main additions to this local.xml file is the inclusion of our CSS files. Earlier we created the file 'gravitywell.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 gravitywell.css file is properly being included, a quick check could be (you'll want to delete the following afterwards though!):
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:
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 gravitywell.css file.
Now we'll make a quick change to our summer theme CSS file.
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!