Macadames' blog

Le silence est d'or, jusqu'à ce qu'il devienne plomb.

Collective Phantasy

with 6 comments

Today we will work on skinning Plone, you will see how easy it is, especially when using collective.phantasy.

This product is only plone3.1.x (and perhaps ++) compliant.

I suppose you know how to build a new plone instance using buildout. I know it’s not always so easy for Windows users, but keep cool, read documentations about buildout (it’s a really powerful feature), and send a comment here if you get problems with this question, i will try to help you .

So, in your plone3.1.x buildout.cfg, just add these two lines : In instance – eggs sections :


In instance -zcml section :


Now you could launch your buildout :

    bin/buildout -vvv

Then launch your Plone instance.

    bin/instance start


Install collective.phantasy in Plone

Go on your plone site > Add/Remove Products You will get this screen :

Check for « Collective Phantasy » product and Save the form.

This will install « Collective Phantasy » product and its dependency « Smart Color Widget » :

The portal look is changed, but it’s just an example, not the best wonderful design ever seen ;-),
so we will change it.

Change the portal skin

Go to your portal root, click on Contents :

You will get two new items :

– An Item called « Phantasy Skin repository », it’s a folder containing alternate skins for folders

– An item called « Plone’s logo, colors and border defaults », it’s the dynamic skin used for your portal, you can delete it and recreate it, but now we will just change it click on this item,
then click on « edit » tab

Click on « Colors » tab, change the background color value for « #f3f3fb » :

And save the form, here is the result :

Re-click on edit tabs, then on « dimensions » tab,

change the values for ‘portal width’ and « Portal horizontal position » like this :

And save the form :

hmm it’s better but we will do some new things.

First we will add our logo.

Go back to your skin, use the contextual menu : « Add new… », choose « Skin Image » :

Click on Browse (« Parcourir » in french ), choose your logo image on your HD :

Save the form. Go Back to your skin.

We will change the logo name in skin. Click on edit tab, then on « images » sub-tab.

Change the logo name value for « logo.gif » (the image id you’ve just uploaded), and save the form.

Here is the result :

Go back to your portal home page and refresh the page, CTRL-F5. If you want to see the left column as shown in next image you also need to change the portlet navigation property with « Manage portlets » …) :

Setting a new skin and choose this skin for a particular folder

See global tabs at top, Click on « Folder with other skin »

You see that the portal look is changed here. Ok. Go back to the Phantasy Skins Repository, click on Contents, you see here alternate skins which can be used by any folder :

Click on the only skin present here :

Oh, oh … the same look as we’ve seen somewhere before.

OK, now we will change everything, go back to the portal root > Contents tab, select the dynamic root skin and click on « copy ». :

Go back to the Phantasy Skins Repository, and click on « Paste » :

We will rename this skin, it could be practice, check the second skin and click on « rename » :

Then click on this skin to go on it. Now we will do always the same thing, click on « edit » and change background color, but take care because now the color value must cohabit with a future background image (use Firebug extension to help you) :

Create a css for your skin

Now we will do something special that’s not embed in Phantasy skin parameters. Edit a text file, save it on your HD as a a css file, here we call it « ornicat.css », we add a little new selector in this css, this selector add

a large left violet border to the page :

Create some images used by your skin

We create a global background image which can cohabit with the background color, using Photoshop or any picture dedicated software (we save it on local disk as « portal-background.gif ») :

We create a new logo with the same software (we save it as « logo-2.gif ») :

Post all these files in your skin

Create a zip archive with the 3 precedent files :

Go back to your browser, to your site and to your skin, click on « Import images and files » :

Click on « browse », choose your zip file on your local disk.

Click on import, wait during upload …

Upload is done

Setting up your special skin

Click on « Edit » tab, enter the css file id (ornicart.css here)

Click on « images » sub tab

– Change the logo name for the new logo id (logo-2.gif)

– add a body background image name with your background image id posted first (portal-background.jpg)

– change background image position for « Top right »

– change background image repeat for « Vertcal repeat »

– Save the form

Here is the result

Ah, i think it’s better

Give a folder a new skin

Go to « Folder with another skin », click on Edit, Below Phantasy skin, click on « Add », now you can browse the site for a new skin, Choose the « Alternate skin » we’ve made before.

Save the form Click on CTRL-F5 to refresh the page.

Now you can say « Skinning Plone is not so complex ». 🙂


Written by macadames

13, octobre 2008 à 5:37

6 Réponses

Subscribe to comments with RSS.

  1. j’espere, et j’espere tremblement qu’avec Phantasy Skins, je vais pouvoir fair les sample modifications que je veux. Est-il possible d’avoir un skin de default and donc choisir des autre skin pour certain fichiers? Cela fait plus de 30 ans que j’ecris en France (accent grave).

    Reuven Koblick

    16, décembre 2008 at 6:15

  2. Hello Reuven

    Oh oui tu peux espérer et trembler car ça va encore s’améliorer, on prépare des choses détonnantes dans l’équipe Ingeniweb chargée du design, de vraies petites bombes.

    Mais revenons sur terre, aujourd’hui avec phantasy tu peux changer de skin pour des dossiers. Si tu veux changer de skin pour des contenus non folderish il faut juste modifier l’adapter ou
    en faire un autre (c’est deux lignes de code :
    regarde collective/phantasy/atphantasy/extendcontents/)

    PS: moi aussi j’ai l’accent grave, il vient de Corse 😉


    16, décembre 2008 at 9:57

  3. Clap clap clap.

    Coooool to skin

    Gilles Lenfant

    1, juillet 2009 at 1:44

  4. Merci beaucoup, ce produit est vraiment génial!

    Comment procéder si l’on voudrait utiliser collective.phantasy avec une autre default skin?


    11, janvier 2010 at 4:00

  5. Ca va dépendre comment la skin est faite, en gros si la skin utilise le base properties de plone c’est immédiat et ça marche from scratch. Dîtes moi juste quel est votre besoin en matière de skin et je pourrai vous aider.


    11, janvier 2010 at 8:02

    • C’est exactement ce que nous allons faire – changer les propriétés de base et une paire de viewlet templates, par ex. footer, dans un theme egg. On serve plusieurs de sites et on voudrait que tous ces sites apparaitent avec votre produit, mais notre propre default skin. Merci de votre conseil et bonne suite!


      12, janvier 2010 at 9:29

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :