Guide to Customize Theme for Magento

commas-left

If you want to customize Magento theme for your online store, this blog helps you out as it contains a complete guide to customize theme without any hassle.

You can check it out and share your views by commenting below.

commas-right

Custom Theme Magento

As we all know that any Magento theme is included numerous templating files and skin files that allow us to develop the visual experience of your store. In the Magento file system; these are the two such files that reside in two main directories. Below, you can find two main directories in which you files are residing:

  • 1
    app/design

    directory – Files, which control how the page templates are rendered.

  • 1
    skin

    directory – Files, which control the visual aspects of the theme – CSS, images and more.

There are lots of files that you can find in the

1
app/design

directory, which only needs to be accessible to the application, and those files can be locked down as well. In this each directory, there are some files in a theme that are broken down into sub-directories by type of file.

Here, we will discuss you can easily develop your own custom theme for Magento 1.8, so go through this guide that can help you out:

First – Directory structure for themes in custom design package

Initially, one of the best parts of developing your own custom theme is to develop your directory structure.

1
2
3
4
5
6
7
8
app
 + design
    + frontend
       + your_new_package_name  (package)
          + your_new_theme_name  (theme in your new package)
             + layout
             + template
             + locale
1
2
3
4
5
6
7
skin
  + frontend
     + your_new_package_name  (package)
        + your_new_theme_name  (theme in your new package)
           + css
           + images
           + js

Create new files

1
2
3
/app/design/frontend/your_new_package_name/your_new_theme_name/layout/local.xml
/skin/frontend/your_new_package_name/your_new_theme_name/css/custom.css
/skin/frontend/your_new_package_name/your_new_theme_name/js/custom_js.js

Now, finally, you have to add some boiler to local.xml so that custom.css as well as

1
custom_js.js

will get comprised.

For all the Magento users, it is also possible to add JavaScript files to their themes by adding below mentioned.

1
local.xml

If the theme is professionally and well coded, it should have following mentioned traits:

  • A single layout file that named
    1
    local.cml

    is the place where all the layout updates are located.

  • There are no layout files with the same name as any layout file in the base theme.
  • There are no css files that have same name as any css file in the default skin.
  • Make sure there should be no
    1
    .phtml

    template file except for those that were changed to support the new theme.

Remember to Apply New Package and Theme to Your Website

It is important for you to apply it to your Magento store so that you can easily find changes as you work once you have developed the skeleton directory structure to hold your new design package. Once you done with it, you will surely wanted to look your new theme that you have developed, so make sure you apply it to your development website with the help of Magento Admin Panel.

You can go the system on admin section, then you can go to

1
configuration -> design

tab. In the package panel, you can also set the current package name like whatever you have named.if you are looking to develop a new theme in CE, you can set the default theme to default in the themes panel, and you can name it whatever you named.

Comprehending layout XML files

Rather than using other methods, you can use xml that enables users to change various aspects on our page without manually changing the

1
.phtml

files. This is one such chapter that known as default theme, so once you change the theme, this path will also change.

Layout/page structure

Well, the core layout of any theme is mainly defined by

1
page.xml

which is situated in

1
app/design/frontend/base/layout/default/page.xml

However, there are two biggest tasks layout that carries out. Initially, it describes the visual layout for your store. We all know that by default, Magento is using three column layout, so it is known of

1
3columns.phtml
1
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

However, if you are looking to change the category default page, you can add below code in.

1
local.xml
1
2
3
4
5
6
<reference name="root">
    <action method="setTemplate"><template>page/2columns-right.phtml</template>
    <!-- Mark root page block that template is applied -->
    <action method="setIsHandle"><applied>1</applied></action>
</action>
</reference>

Same with pages

1
<catalog_product_view>
1
<cms_page>

So, this way you can easily develop a custom Magento theme for your online store that fits in your requirements. Moreover, you can also hire a professional Magento theme developer, who will handle your project and delivers outstanding quality service.

If you want to customize your magento theme or need experts advice then click here.

Coding Source : magenmarket

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*