Thursday , March 23 2017
Home >> Magento theme tutorial >> Magento theme tutorial: Creating a Magento 1.8 theme

Magento theme tutorial: Creating a Magento 1.8 theme

This post belongs to magento tutorial, in this magento theme tutorial we will create a package with a default theme in it. At a later stage, we can add more themes in this package, which extend the default theme that we will create in this chapter.

Getting ready for creating  a Magento theme tutorial

The first step of this Magento theme tutorial, open your IDE and navigate to the theme folder (app/design/frontend and skin/frontend/default).

How to create a Magento theme:

The following procedure of this Magento theme tutorial shows you which actions are required to create a custom theme:

1. Create the following folders:

  •  app/design/frontend/packt/default
  • ‰app/design/frontend/packt/default/layout
  • app/design/frontend/packt/default/template
  • skin/frontend/packt/default

2. Copy the content of the folder skin/frontend/default/blank/to skin/frontend/packt/default. The folder looks as follows:

Magento theme tutorial

 

If your files are exactly the same with the picture of this Magento theme tutorial, you did right. Next go to the following step.

3. Configure the new theme and package in the backend. Navigate to System| Configuration| Designand configure as follows:

Magento theme tutorial

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/supportand register to have the files e-mailed directly to you

4.  Save the configuration and your site will look as follows:

Magento theme tutorial

The theme is now installed and ready for further development

How it works…

With a Magento theme tutorial above, we have just created a blank theme; a theme with only structural CSS. When we want to customize the look and feel with CSS, we have to work in the following folders and files

  • skin/frontend/packt/default/css
  • skin/frontend/packt/default/css/styles.css (the main css file)
  • skin/frontend/packt/default/images (the css images folder)

With these files, you can change the CSS look and feel of the shop. If you want to change some of the HTML code, you have to work in the app/design/frontend/packt/defaultfolder.

This folder is inherited from the app/design/frontend/base/default folder where the standard files are stored. If you want to change a file in the base folder, you need to copy the file with the same folder structure from the basefolder to your theme.

Changing the code of the base package files will also work but this is not recommended because these files are part of the Magento core. When these files are changed, your changes will be lost after a Magento upgrade and your code maintainability becomes low.

If you want to change the header.phtml file that is located at app/design/frontend/base/default/template/page/html/header.phtml, you have to copy it to app/design/frontend/packt/default/template/page/html/header.phtml.

When it is located there, clear your caches. Now, the file of your theme is loaded instead of the one in the base folder.

In the Magento development process, you have to clear the caches to see your changes. It is also possible to disable the cache. If so, you don’t have to clear the cache many times when developing but you will have longer page loads.

There’s more at this Magento theme tutorial:

To see from where every file is loaded, you can turn on Template Path Hints. To do this, go to the backend and navigate to System| Configuration| Developer.Navigate to your store view in the top-left corner and set the following configuration:

Magento theme tutorial

When this is set, navigate to the frontend and you will see red columns around every block.

Follow our Magento theme tutorials to master Magento template!


Ready to foster your knowledge with MAGENTO 2 BASIC GUIDE

The new Order Success combo with Magento 2 Inventory Management, Magento 2 Order Fulfillment, Magento 2 Dropship, Magento 2 Barcode Management and Magento 2 Purchase Management

magento website development services


About Champ