First up, get your mock up files, photoshop layout, bootstrap template, or whatever. Then decide on a name for your package which we’ll use for the whole project. I’m making a fashion store magento site for the purposes of learning, so i got a theme from http://w3layouts.com/, and I’ll be calling my theme ‘fashion‘. Once you have your html template ready, we start creating our folders.
Create the following directory stucture:
/app /design /frontend /fashion /default /template /layout /locale
And in the skin directory, create the following structure:
/skin /frontend /fashion /default /images /css /js
Now we have the directory structure in place, we need to create the required files. The easiest way to do this is to copy the files from the base theme, and edit them to suit.
Copy the following files from app/design/frontend/base/default/template/ to app/design/frontend/fashion/default/template/ :
/page/1column.phtml /page/2columns-left.phtml /page/2columns-right.phtml /page/3columns.phtml /page/html/head.phtml /page/html/header.phtml /page/html/footer.phtml
Ok, getting somewhere. Next we create local.xml in /app/design/frontend/fashion/default/layout :
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * local.xml * Customised Magento Theme * @category design * @package fashion * @copyright Copyright (c) 2015 delboy1978uk. */ --> <layout version="0.1.0"> <default> </default> </layout>
Lastly, copy the 3 css files in /skin/frontend/default/css/ into /skin/frontend/fashion/default/css. styles.css is the main stylesheet, print.css is the style for printed materials, styles-ie.css is the style for that popular ‘browser selection tool’ 😉 .
Disable the cache. To do this, navigate to /admin in the browser and log in to your Magento control panel. Once there, go to System > Cache Management . Click select all, choose Disable in the Actions select element, and click submit.
Now we can activate our theme! Click on System > Configuration > General >Design and click on the package option. Type in your package name (in my case fashion), and click Save Config.
It’s not much to look at, but we are now using our own custom Magento theme! 😀
It’s a good idea to disable the WYSIWYG editor for the CMS section, as your HTML will be tinkered with. It’s meant for non-techie-types, so lets turn that off. Go to System > Configuration > Content Management, select Disable Completely, and again save your config.
Lastly, pages can be made out of bits from other pages. Sometimes, it can be awkward finding the file you need if there are several blocks in a page. There is a helper for this which displays the template path. Go to System > Configuration > Advanced > Developer. Above the left hand column, you will see Current Configuration Scope. Select Main Website. In the Debug section to the right, select Yes to Template path hints. Save.
Have fun setting up your own themes! I’ll be blogging more as I learn more, so stay tuned!