Creating Custom Theme in Magento

1
72

Creating Custom Theme in Magento we create folders for our new theme. We call it help4cms. Then we add a new folder with the name of our new theme.
/app/design/frontend/default/help4cms/ – our new theme
help4cms_magento_theme1
/app/design/frontend/default/help4cms/layout – assign content blocks for each structural block you create.
Layout is available as XML file. Changing it, you can move blocks around the page and assign templates to content blocks for structural blocks markup creation.
You can also 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.
/app/design/frontend/default/help4cms/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.

Now We create subfolders in the /skin/frontend/default/help4cms where we put the layout files: images, styles, javascript / ajax (js) libraries scripts.
help4cms_magento_theme

  • Images (/skin/frontend/default/ help4cms /images/)
  • CSS (/skin/frontend/default/ help4cms /css/)
  • JS (/skin/frontend/default/ help4cms /js/)

Note: Before changing .Phtml file, it must be copied from base (or default) themes to a new theme.

  • Transfer to System -> Configuration -> Design in the top navigation bar
  • Enter help4cms in the text “Default” field
  • Press the “Save config” button in the upper right corner

custom theme magento
Disable Magento cache to see the changes!

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here