Exemple de modification de skin

Pour vos questions au sujet de la personnalisation du script, des skins... - About customizing the script.

Modérateurs : boulmontjj, Pierre G., Malabar, Otomatic

Règles du forum
Pensez à effectuer une recherche et à consulter la FAQ, la réponse à votre question a de grandes chances d'avoir déjà été donnée ;-).
Dans votre message, n'oubliez pas de mentionner l'URL vers votre livre d'or, cela nous permet de vous aider bien plus efficacement :super:.
neum
Messages : 34
Inscription : Mer 18 Juin 2008, 18:29

Exemple de modification de skin

Messagepar neum » Ven 20 Juin 2008, 13:37

capturesEcransLivredOr.zip
(153.3 Kio) Téléchargé 1062 fois
Bonjour à tous et en l'occurrence à l'administrateur Malabar qui m'avait demandé ce qui va suivre :

Je suis donc Neum, comme vous tous utilisateur de cet excellent module php de livre d'Or de l'équipe Alex, et en pleine élaboration d'un site dynamique pour le groupe de Blues Rock bordelais auquel j'appartiens.

J'ai donc entrepris de "re-skinner" entièrement le GuestBook pour l'implémenter parfaitement dans l'iconographie du groupe (que j'ai réalisée pour nos supports print) - sur la base du concept identitaire de notre formation - et bien sûr ici, dans le design du futur site. Je me suis servi du skin de départ "AguestNew".

Etant donné que le site est en construction en local sur mon Mac pour le moment, je ne peux pas fournir de lien web pour vous montrer le résultat obtenu. Je me "rabat" donc sur des fichiers liés à ce post : des captures-écrans de notre livre d'Or, en JPG, encapsulées dans un dossier zippé (j'espère que le forum prend en compte ce type de manipulation et de format...).

Juste 2 mots pour que tout le monde comprenne le principe de ce travail :

-> Tout se joue sur une illusion graphique : le formulaire est transformé en pochette de vieux vinyles 33 tours. On y reprend notre logo, nos matériaux visuels (graisse, tâches d'huile, trace de blanc d'Espagne, salissures, froissements, etc...) et nos emblêmes visuels : des pin ups des années 50.
-> Donc tout ce qui était couleur en aplat a été annulé au profit de gif, jpg ou png transparents en fond. Tous les boutons ont été ainsi refaits. Mais également les bandeaux de séparation par exemple, passant d'une existence virtuelle en code couleur hexadécimal à de vraies images, toutes issues de l'univers graphique que j'ai déjà créé pour le groupe.

-> Pour que cela puisse fonctionner, il a fallu "verrouiller" deux choses :

-> Le fond est en "no-repeat;" et attaché au scroll ( "background-attachment: scroll;"). Il suit donc le formulaire lorsque la page défile. Une balise "Body {;} générale a été crée en première ligne du fichier CSS pour lui mettre une "margin:0;", afin que le Background soit à "bords perdus" comme on dit, et non pas cerné d'un liseret blanc.
-> Le livre d'Or lui-même est formaté en "float:left;" , c'est à dire ferré à gauche et non plus en position de recentrage automatique dès que l'on élargit ou réduit la fenêtre. Mais puisque la balise Body a été formatée en "margin:0;", ila fallu ici lui adjoindre spécifiquement une "position:absolute;" suivi d'une "margin-left:5%;", afin que le formulaire du livre - surtout la partie inférieure avec les messages postés - dispose d'une marge gauche d'aération pour ne pas coller au bord de la fenêtre du navigateur.
-> Pour ce qui est des bandeaux, on les mets eux aussi en Background dans les class afférentes du fichiers CSS, en jouant surtout ensuite sur leur positionnement pour être pile à la bonne place. On joue donc d'abord avec les "background-repeat:no repeat;" et ensuite avec les "padding: x valeurs;" (en pixels - px) pour les caler au sein les DIV dans lesquelles elles doivent se positionner.
-> Enfin, puisque le formulaire de renseignements supérieur d'avant post est transformé en pochette de disque, il fallait que les champs textes soient translucides, pour laisser apparaître les motifs du fond, MAIS, qu'ils soient opaques en blanc 100% dès lors qu'on clique dedans pour y écrire. Là encore, le fichier CSS a permis de mettre les champs translucides dans les" class id_comment" en "transparent;" et en opaques dans les class "id_comment_focus" ":#FFFFFF;". Ainsi on garde les effets visuels voulus et en même temps l'utilisation pragmatique et lisible du livre d'Or. Du reste l'effet pochette vinyle avec la pin up et les froissement est quasi nul sur la partie gauche du livre, et en applat - parce que les textes du formulaires sont placés à cet endroit - alors que l'effet prend son volume en relief avec un aspect bien plus réaliste et présent à droite de la page, là où il n'y a pas de mention particulière à lire. On maîtrise donc la clarté de l'ensemble.
-> Reste ensuite de menus arrangements personnels sur des détails : ouverture du fichier "français.php" dans le dossier "Langages", pour reformuler certaines phrases. Chaque bloc du livre y étant clairement indiqué, il suffit de se reporter à la partie du livre que l'on veut corriger et de modifier la phrase cherchée. Par exemple : non pas pour nous donc "veuillez copier le code de 4 lettres dans la case ci-dessous" mais "recopiez le code dans la case ci-dessous". Dans le même ordre d'idée, dans le fichier CSS, au niveau de la class "body_text", une affectation d'un "font-weight:bold;" couleur noir "#000000;" pour que les textes du formulaire supérieur du livre soit en gras. C'est bien plus lisible dès lors que comme nous ici, on dispose d'une mage en background.

Voilà, c'est en résumé rapide, le principe de ce travail de skin. J'ai réalisé 4 captures-écrans avec les différents visages du livre lors de son utilisation, pour que vous puissiez visualiser concrètement les choses. J'espère que cela vous plaira mais plus sûrement encore que cela pourra peut-être aider quelques personnes dans l'élaboration de leurs propres skins. Mes salutations à l'administrateur Malabar.

Au plaisir de vous lire si le coeur vous en dit. Bien cordialement,

Neum

Revenir vers « Personnalisation - tuning »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Google [Bot] et 6 invités