In the previous post I defined the custom homepage, in this post I will now start to modify the theme files to get it to look how I want.
The default rwd theme that comes with Magento offers a responsive design and comes with various javascript scripts for the image slider and quick adding products to the shopping cart. As there are certain features that I like and are worthwhile have I will base my new theme on the rwd theme, in which I will create a child theme.
I am going to name the child theme rwd-custom and have created the following folders within the following locations:-
\app\design\frontend\rwd-custom
\skin\frontend\rwd-custom
Within these folders I have created the following sub folders:-
\app\design\frontend\rwd-custom\default
\app\design\frontend\rwd-custom\default\etc
\app\design\frontend\rwd-custom\default\layout
\app\design\frontend\rwd-custom\default\template
\skin\frontend\rwd-custom\default
\skin\frontend\rwd-custom\default\css
\skin\frontend\rwd-custom\default\images
\skin\frontend\rwd-custom\default\js
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\rwd-custom\default\etc
Create a file named theme.xml and insert the following code
<?xml version="1.0"?>
<theme>
<parent>rwd/default</parent>
</theme>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 folder structure
\skin\frontend\custom1\default\css
\skin\frontend\custom1\default\images
\skin\frontend\custom1\default\js
\skin\frontend\custom1\default\scss
I then load up Scout and load the scss config file into this whilst I then modify the various files within the scss folder. This allows easier modification of the default stylesheet, the styles are broken down into various files located with the scss and its sub folders.
Bespoke Magento Homepage
Carrying on from the previous post, in which I defined a custom page template, I will now modify this template to get the layout that I want.
Within the magento admin I changed the layout for the homepage from 1 column to homepage, via CMS > Pages > Home page > Design > Layout > Homepage
Wireframe
Below is what I am aiming to turn the homepage into.
Basic colour wireframe
This post was last modified on 29th July 2017 4:23 pm