Plone site with many skins simultaneously

Installing new skin

As example I will use Notre Dame - skin is used on this website.

At first egg with skin must be added to instance. Edit buildout.cfg and append skin to eggs and zcml parameters in instance section:

[instance]
eggs =
    ...
    plonetheme.notredame

zcml =
    ...
    plonetheme.notredame

Instance must be rebuild and restarted:

./bin/buildout
./bin/instance stop
./bin/instance start

Now new skin must be installed inside PloneSite. Do do it, go to Site Setup -> Add/Remove Products, select checkbox near Notre Dame and click Install button.

After reload you should see website in new skin.

Configuring skin on other domain

At first site must me reconfigured in ZMI.

Go to properties tab in portal_skin (http://example.org:8080/site/portal_skins/manage_propertiesForm) and set REQUEST variable name to HTTP_PLONE_SKIN

In portal_css you must recognize all entries that was added by new skin. In most cases it will be few last entries. New style added by Notre Dame are preceded by ++resource++plonetheme.notredame - so in this case it's very easy.

In these entries you must add new condition:

python: portal.REQUEST.get('HTTP_PLONE_SKIN', *) == 'Notre Dame'

Last thing to configure is apache. Create new file with vhost configuration:

<VirtualHost *:80>
    ServerName admin.example.org
    ServerAdmin admin@example.org

    RewriteEngine on
    RequestHeader append plone_skin "Plone Default"
    RewriteRule ^/(.*) http://localhost:8080/VirtualHostBase/http/%{SERVER_NAME}:80/site/VirtualHostRoot/$1 [L,P]
</VirtualHost>

<VirtualHost *:80>
    ServerName example.org
    ServerAdmin admin@example.org

    RewriteEngine on
    RequestHeader append plone_skin "Notre Dame"
    RewriteRule ^/(.*) "http://localhost:8080/VirtualHostBase/http/%{SERVER_NAME}:80/site/++skin++Notre Dame/VirtualHostRoot/$1" [L,P]
</VirtualHost>

After apache reload you can use two urls:

• backend domain - http://admin.example.org (Default Plone skin)
• frontend domain - http://example.org (Notre Dame skin)

pros and cons

Advantages:

• editor can use the same UI on every site
• visitor can see nicer website
• it's easier to create new skin only for visitors (designer, html and css specialist do not need to bother about screens to edit content)
• caching (e.g. varnish) can be configured only for frontend domain

Disadvantages:

• in backend domain you do not edit content with the same CSS - so you will see effect only after save
• frontend and backend uses the same portlets - in backend you see portlets that are useful only for visitors