MageDirect

How to install theme in Magento 1

Overview

In this article, we will try to understand how to create a custom theme for Magento 1.x. We will name our theme Custom and choose this theme in the design.

Work in files

We will work in two main directories/folders:

magento1.x/app/design/frontend/custom/theme

magento1.x/skin/frontend/custom/theme

and in the following folders we will work:

Folder app contains files response for main logic and layout of our site.

Folder skin contains files response for images, styles, and js.

Attention

In the folder app, we have also other files called: base and default. It is not allowed to change them, we may only reference them.

Inside these two folders, it is not allowed to create other themes.

Our Custom theme will override files from base and default, but our theme can override only files with the same name.

 

custom

 

We need to copy from folder base our theme files which will be customized.

We need to change page types for our site

So we copied in our theme folder page (this folder contains types page view, example: 1 column, 2 columns and 3 columns) for phtml and xml.

  • folder page in layout– xml files for view our page and we call our phtml files here;
  • folder page in templates – phtml files it is a block with functionals which we use in xml;

It is the main principle of work in CMS Magento.

In this folder, there are 4 layouts of view page on the site. After that, we can start adding custom changes.

page

layout

 

Now, for our theme, we need styles and we repeat last moves – copies from skin/base folder css -> styles.css for changes.

css styles

Admin Panel

The last step for our work is to choose our theme in the admin panel.

Go to System -> Configuration -> Design and below showed what we need to type in each field.

In Content Package Name we need to enter the name of our folder custom and in other field enter theme. See the first screenshot for understanding why we enter it.

In last input, we enter the theme name default. It will be parent theme and this theme will be overright.

design

Was this article helpful?
Dislike 0
Views: 15
Sergiy Dmitruk

Sergiy DmitrukMagento Developer

Rate us
1 Star2 Stars3 Stars4 Stars5 Stars
(6 votes, average: 4.83 out of 5)
rating-magedirectLoading...
Bottom Top