Actions sur le document
Plone : intégration graphique
L'intégration graphique dans Plone est quelque chose de complexe. Nous allons ici décrire une méthode pour appréhender les fondamentaux : templating et CSS.
A qui s'adresse ce tutoriel ?
A des webmasters, des intégrateurs ou des gestionnaires de contenus qui souhaitent personnaliser le look and feel de Plone. Il est recommandé (mais pas indispensable) d'avoir quelques connaissances sur le language de mis en form CSS2 (Cascading Style Sheet).
S'équiper
Avant de vous lancer dans de longues heures de galère, je vous propose de télécharger un bon navigateur : Mozilla Firefox et d'installer le pluggin suivant : webdevelopper, vous allez vite vous rendre compte que ce petit outil va vous rendre de fier services en vous évitant d'avancer au petit bonheur la chance.
Où chercher ?
A la racine de votre zope en ZMI ( Zope Management Interface accessible en ajoutant "/manage" à la fin de l'url de votre site), vous trouverez le portal_skins , c'est ici que se situent vos css, vos templates, vos javascripts, voici en gros ce qu'il faut retenir pour ce qui nous intéresse :
- Les CSS se situent dans plone_styles
- Les templates se situent dans plone_templates
- Les templates de vos portlets se situent dans plone_portlets
- Les images de votre Plone se trouvent dans plone_images
Nous allons commencer par une simple customisation, rendons nous dans /portal_skins/plone_styles , cliquez ensuite sur ploneCustom.css , dans le haut de lapage vous allez trouver un bouton "customize sur lequel vous allez cliquer.
Nous voilà prêt à travailler sur le look de votre Plone.
Pour comprendre comment les multiples css de Plone sont imbriquées les unes dans les autres et surtout pour pouvoir comprendre comment chaque élément qui constitue le look de votre site vont pouvoir être intégrés dans votre css customisée, vous allez maintenant vous rendre à la racine de votre Plone, toujours en ZMI, et cliquer sur portal_css (le "css registry"). Une fois sur cette page, cliquez sur le second onglet en haut de page : Merged CSS Composition.
Vous avez sous les yeux une page fort intéressante : en gras les css qui apparaissent sont celles qui mélangent celles qui se trouvent juste en dessous en caractères normaux. Chaque élément de votre Zope peut être retrouvé dans une de ces "méta css".
Placer votre logo
Commençons par de l'ultra basic, nous allons remplacer de Plone par notre propre logo, histoire de nous sentir chez nous ;)
Rendez vous dans la ZMI ( Zope Management Interface accessible en ajoutant "/manage" à la fin de l'url de votre site), vous trouverez le portal_skins
Déplacer des portlets
Toujours en ZMI, positionnez vous à la racine de votre site puis dans les onglets du haut de la page cliquez sur l'onglet "Propriétés"
Une fois que vous y êtes, vous allez découvrir un formulaire, dans le bas de ce formulaire vous allez trouver deux champs représentants respectivement les colones de gauche et de droites (celles qui se placent de chaque côté de vos zones de contenu. Ils sont intitulés "left_slot" et "right_slot " , c'es tdans ces slots que nous placerons nos portlets. Un portlet se déclare sous la forme suivante :
here/nom_du_portlet/macros/portlet
pour exemple , nous afficherons le calendrier à haut à droite en plaçant dans le champs "right slot". l'expression
here/portlet_calendar/macros/portlet
Création d'un portlet statique
Plone fournit en standard une serie de portlets :
- Le portlet de navigation;
- le portlet d'identification;
- le portlet de news, qui affiche les news par ordre chronologique inversé 'la plus récente affichée en premier;
- le calendrier;
- le portlet des derniers évènements;
- le portlet review;
- le portlet de nouveautés qui affiche les derniers objets créés ou mofiés.
Vous pouvez rajouter des portlets à Plone en y plaçant les éléments de contenu que vous désirez. Nous allons commencer par quelque chose de simple, un portlet affichant un contenu statique.
Rendez vous ZMI dans portal_skin, puis dans votre répertoire custom. Ajoutez une page template, choisissez en même temps de l'éditer pour y placer le contenu. voilà à quoi doit ressembler le code de votre portlet, entrez y le contenu désiré :
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="plone">
<body>
<!-- mon portlet statique -->
<div metal:define-macro="portlet">
<div class="portlet" id="portlet-static">
<h5 i18n:translate="my_statis_portlet">Titre de mon portlet</h5>
<div class="portletBody">
Contenu de mon portlet
</div>
</div>
</div>
</div>
</body>
</html>
Votre portlet étant maintenant créé, il va falloir lui choisir un emplacement et l'afficher dans votre Plone.
Premiers contacts avec la feuille de style PloneCustom.css
Appliquer des styles à mes titres
Ajouter un header
Appliquer des styles à un portlet
Un portlet est composé de plusieurs zones et nous pouvons appliquer des styles sur chacune de ces zones. pour connaître le nom de ces zones nous allons nous servir de l'extesion Firefox webdevelopper. Nous allons prendre pour exemple un porlet assez complexe, combinant pas mal d'éléments, il est fourni en standard dans Plone et il s'agit du portlet affichant les news. Sur le site http://plone.org
Mot de passe oublié ?
Nouvel utilisateur ?
Toonux Zope and Wifi Stuff
Toonux ouvre Geekcast.eu regroupant quelques screencasts pour geeks
Les journées Python Francophones
Chubaka 0.8.4 sur OpenBSD 3.9
Objectis
Plone developer reference
