You must know some things to adapt your css for Safari. Here’s some tips.

Background images

It’s a really strange bug.

You want a background image with no repeat or just an horizontal repeat.

As long as i can remember something, we were doing things like that :

#mystyle {
background: #mycolor url(myimage) myposition no-repeat;
}

If you want to be Safari compatible, just write :

#mystyle {
background-image: url(myimage);
background-position: myposition;
background-repeat: no-repeat; /* or repeat-x */
}

Otherwise background repeat and position do not work (you will get a beautiful but unwanted mosaic repeat with a 0 0 position).

Vertical align

In a div sometimes you need a centered vertical align, so you fix things like this for a 200px height cell with a table cell behavior :

#mydiv {
display: table-cell;
height: 200px;
vertical-align: middle;
}

Because you are really careful and meticulous or because you are in a hopeless case, you try to add :

overflow : hidden

Spoiled, I don’t know why but with Safari you must add :

max-height: 200px;

otherwise the height will be your css height + content height

Css hack for safari3 and webkit

Everybody know the “* html” hack for IE6, but if you want to put a webkit only declaration you must do :

html[xmlns*=""] body:last-child myStyleDeclaration {etc ….}

Ca fait des mois que la communauté Plone s’est, en apparence pour les francophones, repliée sur elle -même, et qu’elle ne produit plus que des articles incompréhensibles pour le commun des grenouilles.

Normal car si de nos jours vous voulez un peu d’info sérieuse sur Plone (ou sur n’importe quelle autre techno du reste) sans maîtrtiser la langue anglaise c’est pas gagné.

De plus, en trois ans (depuis l’époque bénie de Zopera Zopeur et des petites guéguerres bien de chez nous … ) Plone a évolué, et comment ! … C’est une révolution mais nous y reviendrons.

Revenons dans notre petit village gaulois : si personne ne s’occupe de faire la communication nécessaire, les 3/4 des DSI français baissent la garde et vont s’orienter vers des technos Php épouvantables juste parcequ’elles s’apellent TINTIN ou PIF. Je trouvais ça drôle il y a quelques années, moi aussi j’aimais bien les écureuils, j’étais moi aussi très éclectique et abonné à Spirou, mais cette forme de retour sur le passé, je dis stop.

Plus sérieusement, c’est embêtant, la plupart des décideurs français qui ont un projet internet/intranet n’ont jamais entendu parler de Plone ou alors c’est un salarié sorti du grenier de leur grand-mère qui a osé le faire et bien-sûr le salarié en question a été gentiment remercié.

Plus embêtant, ceux qui s’intéressent au sujet et qui connaissent Plone ont fini par laisser tomber faute d’arguments francophones bien de chez nous.

Encore plus embêtant, les fans de Plone dont je fais partie, et qui connaissaient bien le sujet, ont sérieusement douté car le projet a connu une telle révolution qu’il était difficile pour tout le monde de s’y retrouver, bien des fois j’ai jugé la situation critique.

Aujourd’hui, personnellement j’ai changé d’avis, ah merde qu’est-ce-que j’ai pas dit, ici chez les grenouilles on dit retourner sa veste, on y reviendra …

Since Plone base properties style could seems too rich for a standard use case, phantasy skin edit forms could be also too complex.

When i saw how easy it is to change some skin properties in a blog system like word press ( …),  i thought we need the same feature in Plone.

Collective Phantasy is done for that.

Building a new skin product with a standard static theme and a customized skin schema is something you can do easily with collective phantasy.

If you want an example, just test the “3 colors theme” plone product.

In your buildout :

in instance eggs section add :

    collective.threecolorstheme

in zcml section add :

    collective.threecolorstheme
    collective.threecolorstheme-overrides

Relaunch your buildout.
Launch your zope instance.

In plone_control_panel you will get :

Check for “Three Colors Theme” Product, this will install the product and its dependencies :

Go back to the home page, of course the “static” theme has changed (my poor contribution to plone themes community)

We want to change the dynamic properties, so we click on “Contents” tab, and we can see that everybody is here : the dynamic root skin for portal, and the phantasy skins repository (read previous posts …) :

We want to build a new skin, so as we have seen in previous posts, in phantasy skins repository we add a new skin :

In this form you could see differences with a classic phantasy skin form (for developpers/integrators look at the code it’s just some easy Archetypes bidouille) :

- 3 colors only + mutators to change all colors

- an entire fieldset removed

- many fields unuseful in this theme are hidden

- some skin attributes added in schema

Go back to reality : just change some colors

Now we will import a skin sample provided in “three colors theme product”.

In alternate_skin folder you will find a zip file and a txt file (howtouseit.txt).

Click on “import images and files”, choose the alternate_skin.zip file

Read howtouseit.txt and change some colors or properties

Use plone kss power to change images’ names quickly

CTRL-F5 to refresh the page, of course you need some design feeling to understand what’s happen here, but it’s not so complicated (…)

In the product you will find another example with another howtouseit.txt, here, then just add a folder and choose the good phantasy skin and you will get :

Loving Plone