Let’s say you already have HTML, CSS, JavaScript layout. How to make a theme for Magento, using this layout? In this article I describe steps to create a theme.
At the first stage we create folders for our new theme. We call it my_theme. Then we add a new folder with the name of our new theme.
/app/design/frontend/default/my_theme/ – our new theme
/app/design/frontend/default/my_theme/layout – assign content blocks for each structural block you create.
Layout is available as XML text file. Changing it, you can move blocks around the page and assign templates to content blocks for structural blocks markup creation.
In fact, you can change the visual layout of every page in your store with the help of several separate layout files. The basic layout is defined in page.xml, which is located in /app/design/frontend/base/default/layout/page.xml.
Magento Custom Development
Take your online store to the next level with BelVG Magento Custom Development
Visit the page/app/design/frontend/default/my_theme/template
• Each file, used to wrap the basic template view, is placed in the template/page (1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml).
• It is the basic framework of our pages in HTML files. Editing these files, we can adjust a new look of the page structure.
• template/page consists of html subfolders, in which the footer, the header and the reference blocks of our template can be changed.
• Each of them uses a simple function calls, for example, getChildHtml (), so we can also define the search block in XML-files.
We create subfolders in the /skin/frontend/default/my_theme/folder, where we put the layout files: images, styles, javascript / ajax (js) libraries scripts.
• Images (/skin/frontend/default/my_theme/images/)
• CSS (/skin/frontend/default/my_theme/css/)
• JS (/skin/frontend/default/my_theme/js/)
Upon creating new files in our theme, consider the following factors:
1. Avoid overlapping of layout file names with layout files in the main theme.
2. Avoid overlapping of css file names with css files in the default cover.
3. No .phtml file templates, except those which are modified to support your new theme.
It is important to remember! Before changing .Phtml file, it must be copied from base (or default) themes to a new theme. When Magento detects one of the files in a new theme, it will ignore .phtml file from a base (or default) theme. Copy only those files that will be changed. It minimizes the number of errors during Magento upgrade.
The new theme is created, and we need to apply this theme to our website/store. Go to Magento admin panel.
• Transfer to System -> Configuration -> Design in the top navigation bar
• Enter my_theme in the text “Default” field
• Press the “Save config” button in the upper right corner
Disable Magento cache to see the changes!
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Helpful
when i do this my site comes to the installation side
Thanks a lot….
Thank you very much, one question, how I can edit the homepage of magento. after installation of a theme .. regards
Hey, Tatiana…
Thanks a lot for this helpful information…
Sorry, confusing about this:”It is important to remember! Before changing .Phtml file, it must be copied from base (or default) themes to a new theme. ”
I have copied “app/design/frontend/default/modern/template/page”folder to “app/design/frontend/default/my_theme/template/” and write some css in “skin/frontend/default/luke_theme/css/local.css”, new css not showing.
Kara,
Thanks for the comment you wrote above. You are right, saying that everyone makes things according to his/her mind.
You recommend to create a separate package with a new theme placed in it, but I think, this is a perfect idea only for big stores with 7-10 themes. Otherwise, you will spend extra time on transferring required modules and templates.
I see no difficulties in creating the theme in the default folder and customizing it according to the desired design over there (in fact, you have the standard functionality, but different visual look of the layout). It saves not only your time, but nerves.
This might just be one of those holy wars, where everyone has their own way of doing things, but I would never recommend making a new theme inside of the default package. Instead, I would encourage everyone to make any new themes as their own independent packages in
app/design/frontend/yourpackage/default (for your layout and template files)
and skin/frontend/yourpackage/default (for your css, image and other files)
It is helpful to copy over the CSS and images from one of the other themes to your new package/default theme so you have some initial styling (or create your own cleaner starting CSS), but it’s not necessary to carry over any of the default/default layout and template changes.
It was helpful to make custom themes inside of the default package in the early Magento days, but once the base package was implemented (CEv1.4 & EEv1.8) the default package became just a set of demo themes, not important to the theme hierarchy any longer.
By making your own custom package, rather than your own custom theme inside of the default package, you preserve the ability to have fallback inside of your own package so that you can have your package’s default theme carry most of your customizations and still have slight customizations to that theme for not-for-sale products, or parts, or season theme changes.
For what it’s worth. My 2 cents.