Magento Theme // Magento Skin // RWD Child Theme // SASS
The new Magento CE release now contains a new responsive theme named rwd, which is a white and blue theme. in this post I will be using this theme as the parent theme and creating a child theme in which I will change the theme colours. The rwd theme comes with sass files to allow easier changes to the CSS.
Why a child theme?
If you modified the CSS for the RWD theme itself any future updates to the theme files will overwrite the changes you have made, to get round this we can create a child theme and Magento will fall back to looking at the files within the RWD template folder.
Step 1 – Create the directory structure
The Magento directory structure for themes is contained within two places one for the template files and one for the skin (css, images, js) these can be found below:-
- \app\design\frontend\
- \skin\frontend\
The structure of these is
- app\design\frontend\your-package-name\your-theme-name
- skin\frontend\your-package-name\your-theme-name
In this example I will called my package custom1 so I will create the following two folders
- app\design\frontend\custom1
- skin\frontend\custom1
Then create the following sub folders for the theme (in this example my theme is named default) within these folders
\app\design\frontend\custom1\default
\app\design\frontend\custom1\default\etc
\app\design\frontend\custom1\default\layout
\app\design\frontend\custom1\default\template
\skin\frontend\custom1\default
\skin\frontend\custom1\default\css
\skin\frontend\custom1\default\images
\skin\frontend\custom1\default\js
Step 2 – Create the theme.xml
This file will tell Magento that it has a parent theme and to fall back on the parent theme’s files, the location of this file is:
- \app\design\frontend\custom1\default\etc
Create a file named theme.xml and insert the following code
<?xml version="1.0"?> <theme> <parent>rwd/default</parent> </theme>
Step 3 – Copy the skin files
We then copy the folders/files within the RWD folder, which is located
skin\frontend\rwd\default\
to your own folder
\skin\frontend\custom1\default
you should then have the following structure
\skin\frontend\custom1\default\css
\skin\frontend\custom1\default\images
\skin\frontend\custom1\default\js
\skin\frontend\custom1\default\scss
To allow for easier modification to the CSS, the SCSS folder contains Sass files which is an extension of CSS and the software to monitor these files and generate the CSS can be done via the command line or via third party applications. I personally use Scout which is a piece of open source software.
Step 4 – Scout
Configure Scout like:
| Input folder | \skin\frontend\custom1\default\ |
| Output folder | \skin\frontend\custom1\default\css\ |
| JavaScript folder | \skin\frontend\custom1\default\js\ |
| Images folder | \skin\frontend\custom1\default\images\ |
| Config file | \skin\frontend\custom1\default\scss\config.rb |
Whilst testing and customising the scss I recommend setting the environment to Development and output style to expanded. This will allow for debugging the CSS easily as if you look at the CSS it will tell you which scss file and line contains the rules.
For customising the colours you will mainly need the following file
\skin\frontend\custom1\default\scss\_var.scss
Open this is file in your program of choice (dreamweaver, notepad+ etc) it’s well documented and separates and explains each section. For more advanced customisation you can edit the scss files located within the folders within the scss folder.
Using Scout when a file has been updated it will recognize this and re-generate the CSS files that have been modified.
Step 5 – Configure Magento
Upload both folders and subfolders
\app\design\frontend\custom1
\skin\frontend\custom1
Login to your Magento admin section and go to System > Configuration > General > Design
Whilst you’re working on the changes it’s best if you change the cache management so you can see the latest changes without Magento storing them in its cache
system > cache management
Check layouts, blocks HTML output and translations and under actions set disable, click submit
* don’t forget to change back once you have finished *
Refresh your front end and you should see the rwd theme but with any colour changes you have made to the theme. Simply modify the scss files and re-upload the changed CSS files, refresh your browser and see the changes.
Other notes
Within my package “custom1” I created the following additional themes (dark and white) in which I went through the whole process again, but changed the scss files to represent the theme.
The folder structure ended up like
Dark
\app\design\frontend\custom1\dark
\app\design\frontend\custom1\dark\etc
\app\design\frontend\custom1\dark\layout
\app\design\frontend\custom1\dark\template
\skin\frontend\custom1\dark
\skin\frontend\custom1\dark\css
\skin\frontend\custom1\dark\images
\skin\frontend\custom1\dark\js
White
\app\design\frontend\custom1\white
\app\design\frontend\custom1\white\etc
\app\design\frontend\custom1\white\layout
\app\design\frontend\custom1\white\template
\skin\frontend\custom1\white
\skin\frontend\custom1\white\css
\skin\frontend\custom1\white\images
\skin\frontend\custom1\white\js
Images
Below you can view the screenshots of how the different skins look
This post was last modified on 3rd August 2017 7:31 pm