Auteur : cabot
Description : » Fichier PSD de Prosilver
Voici une approche du psd de prosilver, qui peut être un point de départ ou un complément à la doc pour changer les couleurs de l'index et au décorticage de la feuille de style colours.css.
Ce tuto est destiné à celles et ceux qui seraient tentés de travailler à partir de photoshop pour modifier les couleurs du style, afin d'avoir un aperçu global avant de modifier le fichier colours.css.
Vous verrez en ouvrant le psd que les calques sont disposés dans deux groupes principaux: le groupe contenu et le groupe background et bordures.
» 1/ Le groupe contenu contient, comme son nom l'indique, tout ce qui rempli le forum.
Sa principale utilité est de meubler le psd pour avoir un aperçu plus réaliste lorsque vous ferez vos essais de couleurs sur les différents éléments du groupe background et bordures.
Il n'en demeure pas moins que vous pouvez aussi l'utiliser pour tester les couleurs des liens et des polices, à vous de voir.
» 2/ Le groupe background et bordures contient les calques de certains éléments déclarés dans la feuille de style colours.css.
Dans ce groupe background et bordures se trouve également un sous-groupe appelé corners avec les arrondis des éléments principaux. Il est là pour la déco.
Les calques des éléments qui nous intéressent sont remarqués en vert et nommés par le sélecteur CSS et la propriété correspondants à la modification.
Ex: .headerbar et .forumbg { background-image
Ce qui correspond à ceci dans le fichier colours.css:
Code : Tout sélectionner
.headerbar {
background-color: #12A3EB;
==>background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;
}Code : Tout sélectionner
.forumbg {
background-color: #12A3EB;
==>background-image: url("{T_THEME_PATH}/images/bg_header.gif");
}Ça ne veut peut-être rien dire pour certains mais c'est en fait un moyen très simple de coloriser nos calques sans utiliser l'outil pot de peinture ou l'outil dégradé.
Voici un exemple d'utilisation de ces masques pour le background des catégories et forum (.forabg):
Double-clic sur le calque
Clic dans la fenêtre Dégradé
Agir en 1/ pour voir immédiatement les modifications en 2/
Si vous regardez le calque input.button2 { background-image, vous verrez qu'il comporte une vignette supplémentaire.
C'est un masque de fusion car le dégradé complet du bouton est plus grand que celui affiché sur le forum, ceci afin d'avoir un effet au survol.
Pour avoir un aperçu complet de ce dégradé lorsque vous le modifiez, il faut désactiver le masque de fusion puis agir comme précédemment.
Clic droit sur la vignette du masque, puis sélectionner "Désactiver le masque de fusion"
Et voilà, amusez-vous avec les calques pour personnaliser votre style , puis appliquez les couleurs au fichier colours.css
Bonus.
Les tranches des trois images du psd sont déjà sélectionnées (bg_button.gif, bg_header.gif, bg_list.gif), nous allons récupérer les images:
- Cachez le groupe contenu en cliquant sur l'oeil juste à gauche du calque
- Cachez le sous-groupe corners de la même façon
- Désactivez le masque de fusion du claque input.button2 { background-image
- Fichier / Enregistrez pour le Web et les périphériques
- Dans la fenêtre suivante, cliquez sur Enregistrer
- Dans la dernière fenêtre, vérifiez que le format de sortie soit 1/ Images GIF et que soit sélectionné 2/ Toutes les tranches utilisateurs
Vous avez désormais les trois images déjà nommées et aux dimensions souhaitées, il ne reste plus qu'à écraser celles existantes dans le dossier /theme/images/
Version : 1.0.0
Testé sur la version de phpBB : 3.0.12
Télécharger le fichier : prosilver_psd_1.0.0.zip
Taille du fichier : 127.22 Kio
Page de présentation du style : consulter
L’équipe de phpBB-fr.com n’est ni responsable, ni tenue de fournir du support pour ce style. En installant ce style, vous reconnaissez que l’équipe de support ou l’équipe des styles de phpBB-fr.com pourraient ne pas être en mesure de fournir du support.
-->Support du style<--
