Outils pour utilisateurs

Outils du site


plone:skin

Création d'une skin sous Plone

Le but de cette activité et de faire un tour rapide de plone.
L'essentiel sera la création d'une personnalisation simple de l'interface.

Prise en main

Lancer plone en mode debug :
démarrer / Tous les programmes / Plone / Development / Plone debug

Avec un navigateur aller à :
http://localhost:8080/Plone

Connecter vous :
login : admin
pass : admin

Faites des dossiers et des documents pour expérimenter.

Remplacer le texte de la page d'accueil par 3 mots pour simplifier la création initiale de la skin.

Création d'une skin vide

Cette activité est un survole rapide de :
http://plone.org/documentation/tutorial/creating-plone-themes

Installation de DIY Plone Style

Télécharger le fichier :
http://plone.org/products/diyplonestyle/releases/2.5/DIYPloneStyle-2.5-RC.tar.gz

Le décompresser et copier dans le dossier Products de Zope.

Création du squelette

Ouvrir un invite de commande MS-DOS.

Aller dans le répertoire Products, par exemple :
c:>cd C:\Program Files\Plone 2\Data\Products

Taper la commande (remplacer TestSkin par un nom de votre choix) :
..\..\Python\python.exe DIYPloneStyle\bin\generator.py TestSkin

Avec l'explorateur, s'assurer que le répertoire et son contenu et bien accessible en lecture/écriture.

Installation de la nouvelle skin

Relancer Zope :

  • Ctrl+C dans la fenêtre Plone Debug

Dans plone se connecter (admin) puis aller à :
Préférences / Ajout/Suppression de produits

Installer votre nouvelle skin.

Configuration pour le développement

* Activer le rafraichissement automatique

* Metter le gestionnaire de feuille de styles en mode développement

Objectif

Propriétés du site (ZMI)

Réglage des éléments afficher par plone :

Copie du template de la page

Le dossier TestSkin\skins\testskin_templates est actuellement vide.

Un template placer dans ce dossier prendra la place de celui par défaut de plone.

Aller à http://localhost:8080/Plone/portal_skins/plone_tableless/main_template/manage_main

Copier le contenu du fichier ou le fichier lui même (CMFPlone/skins/plone_tableless/main_template.pt) dans le dossier de votre skin (TestSkin\skins\testskin_templates\main_template.pt)

Si vous visualisez maintenant votre site, il est passé à une mise en page sans tableau.

Identification des éléments de la page

Le but est de faire des coupes franches dans la skin de base pour ne garder que le strict nécessaire.

Installer firebug (extension pour firefox) pour visualiser la structure de la page : http://www.getfirebug.com/

Le but est ne garder que :

html
  head
  body
    div#visual-portal-wrapper
      div#portal-top
        div#portal-header
          h1#portal-logo
        div#portal-personaltools-wrapper
      div#portal-columns

Toutes les autres parties/fonctionnalité, seront retiré de la skin

Réalisation

Utiliser un éditeur pour modifier les fichiers

Code HTML

Ouvrir le fichier main_template.pt (faire une copie de sauvegarde)

Reconstruction du squelette

Supprimer toutes les parties non indiquées.
Ne garder que le contenu des balises :

  • <head>
  • <a metal:use-macro=“here/global_logo/macros/portal_logo”>
  • <div metal:use-macro=“here/global_personalbar/macros/personal_bar”>
  • <div id=“portal-columns”>

Remarque : C'est une démarche simpliste mais elle permet de limité ce sur quoi vous devez focaliser votre attention

Code CSS

Les codes css sont la juste pour application, ne pas les prendre en exemple (et à ne pas regarder avec IE…).

Ouvrir le fichier testskin_styles/testskin.css.dtml

Mise en page des blocs

Faire point par point,

Centrer la page :

* {
	margin:0;
	padding:0;
}
 
#visual-portal-wrapper {
  width:850px;
  margin-left:-425px;
  left:50%;
  position:absolute;
}

Mettre en place le logo

#portal-logo a {
	height:0px !important;
	margin: 0;
	overflow: hidden;
	padding:135px 0 0 0;
	display:block;
}

cacher les éléments “inutiles”

.hiddenStructure {display: block;background: transparent;background-image: none;/* */
border: none;height: 1px;overflow: hidden;padding: 0;margin: -1px 0 0 -1px;width: 1px;}

Pour faire vite…

.documentActions {
  display:none;
}

Placer les fonction sur une ligne :

#portal-personaltools {
	text-align:right;
	list-style-type:none;
}
 
#portal-personaltools li {
	display:inline;
}

mettre en place le contenu

#portal-column-content {
  top:158px;
  left:219px;
  width:631px;
  position:absolute;
}

mettre en place le menu :

#portal-column-one {
  position:absolute;
  top:158px;
  left:0;
  width:219px;
}

Import des images

placer les images dans le répertoire testskin_images :
/download/Archive_images.zip

Les liens vers les images nécessite une notation particulière (ici en dtml donc propre aux css) pour tenir comptes de l'adresse du site :

body {
  background: #FFF url('&dtml-portal_url;/banniere.png') top center no-repeat;
}
#portal-column-one {
  background: #FFF url('&dtml-portal_url;/lien.png') bottom left no-repeat;
}
Pour finir

Ajuster les marge, taille, modifier le mode de positionnement…

La morale c'est que c'est juste des CSS

Code de couleurs

Ouvrir le fichier testskin_styles/base_properties.props : modifier les lignes suivantes :

linkColor:string=#FF1386
linkActiveColor:string=Red
linkVisitedColor:string=#FF1386

ajouter à la css :

a {
  color: &dtml-linkColor;;
  background-color: transparent;
}
a:visited {
  color: &dtml-linkVisitedColor;;
  background-color: transparent;
}
a:active {
  color: &dtml-linkVisitedColor;;
  background-color: transparent;
}
Pour finir

Ajouter une nouvelle variable dans base_properties pour la couleur du titre.
L'utiliser pour mettre en forme le titre.

Les variables définie dans base_properties évite de répéter les valeurs et rendent la skin modulaire.

Et finir la mise en forme des autres éléments HTML.

Utilisation de conditions

modifier le template :

<tal:utilisateur 
  tal:condition="not: here/portal_membership/isAnonymousUser">
<div metal:use-macro="here/global_personalbar/macros/personal_bar">
   The personal bar. (log in, logout etc...)
 </div>
 </tal:utilisateur>

Montre l'usage de tal (une condition et une balise “personnel” qui ne sera pas retranscrite dans la page finale)

Plus sur tal ici :
http://www.p3b.org/tutor/zope/zope_page_templates/zope_page_templates.html/

plone/skin.txt · Dernière modification: 2008/04/24 22:00 (modification externe)