Smith-Web.net

As mentioned in my previous post, here is a step by step guide on how we used site specific css stylesheets to override parts of a global CSS stylesheet on the new multi-site magento setup we are using at Kully Supply.

First a little background on our setup. We created a new design package, lets call it Kully for the purposes of the tutorial. So under the app/design folder, we added a new folder Kully. Under that we added a default folder to hold all of the default templates for the sites. For each site we created another folder under the Kully folder to put templates and layouts that needed to be different from the default template. For example, under the Kully folder we would have ‘default’, ’site1′, ’site2′, etc folders.

To set up the site skins we used the following settings under the design section of each sites configuration. Package->Current Package Name: Kully, Themes->Translations: default, Themes->Templates: site1, Themes->Skin (Images / CSS): default, Themes->Layout: site1, Themes->default: default.

This makes it so that Magento will first look in the ’site1′ folder for any layouts or templates. Any that it can’t find there it looks next in default. By setting the skin folder to default, we only have 1 core css file to keep up-to-date.

To add another css file to each site, we could have copied the default page.xml file from the default layout into each sites layout folders, but if we had to change one of those, we’d likely have to change them all, and as we’re going to be running many stores of this one install, that would get tedious changing all of those files. So we created a module for the purpose of being able to load another smaller layout file just for each site.

In order to do this you have to do the following.

Under the /app/code/local folder, create a new package folder. In our case, we used Kully. Under that create a folder for your new module, we’ll call it SiteSkin. Creat a folder ‘etc’ under that. So in our case we would have a directory structure like this.

app/
  code/
    local/
      Kully/
        SiteSkin/
          etc/

In the ‘etc’ folder, create a file called config.xml with the following xml in it.

<?xml version="1.0"?>
<config>
    <modules>
        <Kully_SiteSkin>
            <version>0.1.0</version>
        </Kully_SiteSkin>
    </modules>
    <frontend>
        <layout>
            <updates>
                <siteSkin>
                    <file>siteskin.xml</file>
                </siteSkin>
            </updates>
        </layout>
    </frontend>
</config>

Under app/etc/modules create a file called Kully_All.xml and place this code in it to activate the module.

<?xml version="1.0"?>
<config>
    <modules>
        <Kully_SiteSkin>
            <active>true</active>
            <codePool>local</codePool>
        </Kully_SiteSkin>
    </modules>
</config>

Now that you have done this, you might be asking, what good does this do for me?

Back in your app/design/frontend/kully/site1/layout folder, you can now create a siteskin.xml file to add new css files, override blocks, etc for that site. See below for an example.

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="head">
            <action method="addItem"><type>skin_css</type><name>css/site1.css</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/site1.js</name><params/></action>
        </reference>
    </default>
</layout>

The css/site1.css and js/site1.js just goes in your default skin folder.