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.

We wanted to create a single theme that we could use accross all of our websites, while also being able to control the skin of each site and also the option to override templates for a given site. My co-worker, Greg Halbert, did the design work for the site and the illustration of our new company mascot, Kaptain Kully and did a lot of the site specific CSS. I had the task of importing all of our data from the old stores into the new site, as well as creating the skeleton template and skin as well as several custom modules, including a skin module that allows us to use a default css file for all of the sites that controlls the structure, while being able to specify a css override file for each site easily. I will be posting info on that module later.

We currently have 3 sites transferred over, Flushmate Repair Parts, Zurn Products and SharkBite Plumbing, with several more to be relaunched in the next few weeks.

The site also features a Featured Listing system for displaying the companies listings. The system was created with CakePHP and features Google Maps, Lightbox photo galleries, and xml data feeds out to many real estate search portals such as Trulia, Zillow, etc.

All of the forms on the site are integrated with Top Producer, a real estate client management program.

Visit Site »