Vous êtes ici : Accueil / Développement / Plone / Création de produits / Gérer les coins arrondis dans un thème Plone avec CSS3 PIE

Gérer les coins arrondis dans un thème Plone avec CSS3 PIE

Par Pierre-Yves Landuré — Dernière modification 22/03/2012 18:59

CSS3 PIE est un outil permettant d'afficher des coins arrondis avec CSS dans Internet Explorer. Il apporte aussi le support des images de fond multiples et des gradients CSS. Ce guide aide à mettre en place cet outil dans un thème Plone.

Ce guide est testé avec:

  • Plone 4.1.3

Prérequis

Installez les outils nécessaires:

command apt-get -y install unzip

Mise en place

Obtention de CSS3 Pie

Téléchargez la dernière version de CSS3 PIE:

command wget "http://css3pie.com/download-latest" \
    --output-document="/tmp/css3pie.zip"

Décompressez le fichier:

command unzip -o -d "/tmp"  "/tmp/css3pie.zip"

Préparation du thème

Placez-vous dans le dossier du produit thème (là où se trouvent les dossiers "profiles" et "browser").

Détectez le nom du produit:

PRODUCT_NAME="$(command grep -r '.various"' 'profiles.zcml' \
    | command sed -e 's/^[^"]*"//' -e 's/.various".*$//')"

Créez le dossier "browser/fonts" destiné à contenir les polices Web:

command mkdir --parent 'browser/javascripts'

Déclarez le dossier "fonts" comme ressource:

command sed -i -e "/<\/configure>/i\\
  <browser:resourceDirectory\\
      name=\"${PRODUCT_NAME}.javascripts\"\\
      directory=\"javascripts\"\\
      layer=\".interfaces.IThemeSpecific\"\\
      />
" 'browser/configure.zcml'

Placez le fichier PIE.htc dans le dossier javacripts:

command mv '/tmp/PIE.htc' 'browser/javascripts/PIE.htc'

Créez le fichier des règles CSS spécifiques à Internet Explorer 6 à 8:

command echo "/*** Exemple usage of CSS3 PIE.
    Uncomment and ajust to your needs.
#portal-globalnav {
 behavior: url(++resource++${PRODUCT_NAME}.javascripts/PIE.htc);
}
***/
" > 'browser/stylesheets/ie-6-8.css'

Intégrez le fichier ie-6-8.css au thème en ne spécifiant pas le média:

command sed -i -e "/<\/object>/i\\
  <stylesheet title=\"\"\\
      id=\"++resource++${PRODUCT_NAME}.stylesheets/ie-6-8.css\"\\
      media=\"\" rel=\"stylesheet\" rendering=\"import\"\\
      cacheable=\"True\" compression=\"safe\" cookable=\"True\"\\
      enabled=\"1\" expression=\"\" conditionalcomment=\"(gte IE 6)&amp;(lte IE 8)\" />\\
" 'profiles/default/cssregistry.xml'

Utilisation dans le thème

Modifiez le fichier "browser/stylesheets/ie-6-8.css" pour intégrer les éléments ayant des coins arrondis. Reportez-vous à la documentation de CSS3 PIE.

Remerciements