Magento has many pre-loaded features and is an open-source ecommerce framework. However, most of the designs you find on the Magento themes are outright disappointing as compared to the latest trends. Magento has three themes which are: base, default, and Responsive Web Design (RWD). To create stunning design that fulfills your client’s requirement and follows the latest trends, you need to customize the front-end design.
You can find many themes at magentocommerce which can be free as well as paid. Check if you can find the best design and layout that meets your expectation. If you don’t find what you are looking for there, it’s time to create a custom theme in Magento.
Let’s see how we can do so by customizing default look. First, we must check how the directories and files are organized in this Ecommerce platform.

app
|—code
|—design
|    |—frontend
|        |—base
|        |—default
|        |—MyPackage
|        |   |—myTheme
|        |       |—etc
|        |       |   |—theme.xml
|        |       |
|        |       |—layout
|        |       |   |—local.xml
|        |       |
|        |       |—template
|        |
|        |—rwd
|
skin
|—frontend
|—base
|—default
|   |—css
|   |—images
|
|—MyPackage
|—MyTheme
|—css
|   |—myStyle.css
|
|—images
|—js
|—myScript.js

The XML files in the layout folder which defines the structural and content blocks of the theme. This will control the content block too.
The template files are with .phtml extension and abide in app/design/frontend/{packageName}/{themeName}/template which has the markup for Magento blocks that displays the frontend. The skin folder will contain all the important elements including CSS, images, js, Sass and so on. Magento has a manageable searching strategy.
This way you won’t have to duplicate the template, skin or the layout files across the theme. It is recommended to duplicate only those files that needs to be altered. If the files are unchanged, they will be loaded from the parent theme.

Creating Child theme

Step 1: Create folders and file structure for the child theme

To this follow these steps:

• Go to design or frontend.
• Create your package.
• There are 3 packages- Base, Default, and RWD.
• Our child theme will be on RWD theme, a responsive theme.

app/design/frontend/{packageName}/{themeName}/etc
app/design/frontend/{packageName}/{themeName}/etc/theme.xml
app/design/frontend/{packageName}/{themeName}/layout
app/design/frontend/{packageName}/{themeName}/layout/local.xml
app/design/frontend/{packageName}/{themeName}/template

Change the {packageName} with what you want and do the same for {themeName}. We have changed the package name to MyPackage and theme to MyTheme.

app/design/frontend/MyPackage/MyTheme/etc
app/design/frontend/MyPackage/MyTheme/etc/theme.xml
app/design/frontend/MyPackage/MyTheme/layout
app/design/frontend/MyPackage/MyTheme/layout/local.xml
app/design/frontend/MyPackage/MyTheme/template

Once the files are ready, inform Magento about parent theme for MyPackage/MyTheme.
For this, open app/design/frontend/MyPackage/MyTheme/etc/theme.xml and edit your theme.xml.



rwd/default


Open skin/frontend/ and create skin folders.

skin/frontend/MyPackage/MyTheme/css
skin/frontend/MyPackage/MyTheme/css/myStyle.css
skin/frontend/MyPackage/MyTheme/images
skin/frontend/MyPackage/MyTheme/js
skin/frontend/MyPackage/MyTheme/js/myScript.js

Step 2: Load child theme’s CSS and JS files

Once our CSS and JS files has been created as css/myStyle.css and js/myScript.js respectively, these files needs to be hooked to the child theme.

Open app/design/frontend/MyPackage/MyTheme/layout/local.xml and put XML code







skin_csscss/myStyle.css

skin_jsjs/myScript.js





Above this, we will load myStyle.css but it can hook on the top of CSS under the head tag. This prevents from overriding the theme, to do that we’ll have to hook it after the parent’s CSS. Remove the parent’s styles.css and add again in the following order:


skin_csscss/styles.css


skin_csscss/styles.css


skin_csscss/myStyle.css


skin_jsjs/myScript.js

Step 3: Save child theme configuration

Login to admin panel and go to System > Configuration > General > Design and update as follow:

Package Option –
Current Package Name – MyPackage
Theme option –
Skin (Images / CSS) – MyTheme
Default – MyTheme

After completing this step, clear the cache and reload the homepage. You will see myStyle.css and myScript.js with the URL of the new Magento child theme package:

http://example.com/skin/frontend/MyPackage/MyTheme/css/myStyle.css
http://example.com/skin/frontend/MyPackage/MyTheme/css/myScript.js

And it’s done!

The post Create Custom Child Theme In Magento in 3 Easy Steps appeared first on Enterprise Web Cloud.