GuppY 4.5 est livré avec ses skins de base, no_skin, skn_1 skn_2 et skn_3, un exemple de customisation plus évoluée (la skin carbonix) et d'autres dont certaines introduisent à la technique d'utilisation des div/css.

On voit qu'une page est divisée en 3 zones principales : 1- une entête (logo, bannière, citation et icônes menu) 2- un corps de page (boîte centrale entourée de boîtes latérales) 3- un pied de page
	La skin "No_skin"

II - La skin de base de GuppY: No_skin

Architecture HTML simplifiée d'une boîte:

Cette skin ne créant que des boîtes "simples" dans le corps de page, elle est particulièrement adaptée aux "petites configurations" ou connexions bas débit.

La "customisation" consistera à "enjoliver" les boîtes de base (partie 2) et à encapsuler en-tête et pied de page (parties 1 et 3) dans des boîtes similaires.

III - Autres skins :
Skn_1, Skn_2, Skn_3 et Carbonix

1. Les points d'entrée

Pour éviter des modifications au coeur même de GuppY, pour y insérer du code ou le customiser hpage et bpage.inc sont pourvus de quelques "points d'entrée" :

• $­­­­­­­­­­­­­­­­­­­­headinc juste avant la balise , pratique pour rajouter du javascript par exemple.
• $­­­­­­­­­­­­­­­­­­­­imgtabup et $­­­­­­­­­­­­­­­­­­­­tabup en tête de body
• $­­­­­­­­­­­­­­­­­­­­tabcita au dessous des citations
• $­­­­­­­­­­­­­­­­­­­­tabmenu au dessous de la ligne du menu icônes
• $­­­­­­­­­­­­­­­­­­­­tabfoot au dessus du pied de page
• $­­­­­­­­­­­­­­­­­­­­tabdown et $­­­­­­­­­­­­­­­­­­­­imgtabdown en fin de body

Il suffit de valoriser ces points d'entrée dans la skin pour obtenir un GuppY personnalisé :

• site en 800x600 en l'englobant dans un conteneur (table ou div) grâce à $­­­­­­­­­­­­­­­­­­­­imgtabup et $­­­­­­­­­­­­­­­­­­­­imgtabdown
• encadrer l'en-tête comme les boîtes latérales en activant $­­­­­­­­­­­­­­­­­­­­tabup et $­­­­­­­­­­­­­­­­­­­­tabcita (ou $­­­­­­­­­­­­­­­­­­­­tabmenu)
• encadrer le pied de page comme les boîtes latérales en activant $­­­­­­­­­­­­­­­­­­­­tabfoot
• encadrer la bannière... et bien d'autres choses encore selon votre imagination.

Et n'oublions pas que ces modifs ne seront pas perdues lors d'une correction ou une migration

2. Paramétrage des skins skn_1, skn_2, skn_3 et Carbonix

Les fichiers skin.inc des trois premières sont identiques et comportent, en plus des fonctions de base de no_skin, les fonctions htable2() et btable2() nécessaires à la création des boîtes d'en-tête et de pied de page et des paramètres supplémentaires personnalisables.
Un simple éditeur texte (style Notepad) est suffisant pour leur apporter des modifications.

Leurs différences ?

• Skn_1 s'appuie sur style.inc de base, tout est paramétré par la config d'Admin.
• Skn_2 utilise son propre style.inc, clone du style.inc de base dont on peut changer quelques valeurs ou certaines variables (Attention danger...).
• Skn_3 embarque elle un style.css (tiré du style.inc de base grâce à l'excellent plugin GenCSS de Nico), son style est donc "figé".
• Les paramètres sont valorisés différemment suivant le rendu désiré:
  • Juste les boîtes centrale et latérales customisées pour skn_1,
  • Idem, plus les boîtes en-tête et pied de page pour skn_2 et 3 ,
  • Et en plus la bannière dans une boîte pour skn_3 .
• Carbonix, architecturée sur le même principe est nettement plus compliquée et difficile à régler. Certains attributs sont déportés dans la feuille de style et elle modifie davantage de paramètres de configuration pour son propre usage.

Détaillons un peu ces paramètres :

les manipulations sur ces fichiers ne sont pas anodines et pas toujours gratuites... Un point-virgule, une quote (simple ou double) oubliée et c'est la cata, l'affichage est complètement désorganisé et PHP ne fournit aucun message sur les erreurs qu'il rencontre.

Personnalisation d'une skin : Il suffit de remplacer les images par d'autres portant le même nom (et changer la valeur de $­­­­­­­­­­­­­­­­­­­size si nécessaire).

Quelques idées : Présentations originales d'une skin avec des boîtes perso toutes simples et vite faites:

copier un dossier de skin dans un autre dossier de inc/img/skin prenez une image existante. Là j'ai créé un simple bouton (sous PaintShop Pro) découper l'image en 9 zones en prenant soin aux dimensions des angles enregistrer les 8 imagettes périphériques dans ce dossier, avec les mêmes noms que l'original Il suffit alors de coordonner la couleur d'arrière plan des boîtes centrale et latérales dans Config, site. On pourrait aussi utiliser la partie centrale comme fond de boîte.	Exemple de découpe	Présentation ?
Nota : Ces vues shématisées ne tiennent pas compte des autres possibilités offertes par la configuration d'Admin (avec ou sans logo, bannière, citations, etc... )

III - Les autres skins

Les autres skins livrées avec GuppY 4.5 fonctionnent de façon similaire.

Dans certaines d'entre elles les tableaux des fonctions htable() et btable() sont remplacés par des "conteneurs" div. Cette solution, plus "moderne", couplée à une gestion optimisée de la feuille de style permet des gains de performance non négligeables.

Fonte: GuppYSkins

Autore : valkiro Copyright 2007 by valkiro