Structure du style prosilver Intermédiaire

Structure du style prosilver

...pour comprendre comment ça marche


- Structure du style prosilver

Vous avez installé phpBB3 et vous avez ouvert le répertoire Prosilver. Là, horreur, les fichiers pullulent, les .css se multiplient et quoi que vous fassiez, vous ne comprenez pas comment un truc si différent de ce que vous connaissez peut marcher. Pas d'affolement, il suffit de prendre les choses dans l'ordre et de garder à l'esprit l'utilité de chaque dossier.

Pour commencer, ouvrons le dossier prosilver. Nous y trouvons 3 dossiers et 1 fichier.

  • imageset
  • template
  • theme
  • style (ce n'est qu'un fichier d'informations générales, pas d'incidence sur le style)
Laissons de coté le fichier style.cfg et revenons aux trois dossiers. Ils sont les trois parties majeures du style.

- Imageset

Imageset contient toutes les images majeures du style. J'entends par là les images de toutes les icones de type (lu/non lu), du logo du forum mais aussi les boutons français/anglais selon la langue du forum. Il contient aussi le fichier imageset.cfg qui permet de redimensionner chaque élément mais nous verrons son utilité à l'usage.
  • Liste des images
    • Les icones annonce/note/lu/non-lu/lock etc
    • Les icônes contact/post_info et toutes les petites icônes de ce genre servant pour le profil.
    • le logo (ou bannière)
    • le dossier contenant les boutons selon la langue du forum (connecté/éditer/citer/nouveau/verrouillé...)
  • Comment changer la bannière? (cette méthode est applicable à chaque image de ce dossier)
    • La bannière est de même format et de même taille
      il suffit de créer son image que vous nommerez logo_site.gif comme l'ancienne bannière et de l'uploader sur son ftp. Lorsque vous la mettez sur votre ftp, elle écrasera l'ancienne. Allez dans le panneau d'administration, dans "styles" -> "packs d'images", faites "rafraichir" et le tour est joué :D
    • La bannière est de même format et pas de même taille
      • Solution 1, la plus simple; par le panneau d'administration
        il suffit de créer son image que vous nommerez logo_site.gif comme l'ancienne bannière et de l'uploader sur son ftp. Lorsque vous la mettez sur votre ftp, elle écrasera l'ancienne. Allez dans le panneau d'administration, dans "styles" -> "packs d'images", faites "éditer"
        Dans cette nouvelle page, sélectionnez "logo principal" dans le menu déroulant du haut et "site_logo.gif" dans le menu déroulant du bas. Et là, cochez "non" en face de "Définir les dimensions:". Ainsi vos dimensions seront prises en compte.

        ATTENTION, AU PROCHAIN RAFRAICHISSEMENT DE STYLE VOUS PERDREZ VOS MODIFICATIONS
      • Solution 2, la plus propre; par le fichier imageset.cfg
        il suffit de créer son image que vous nommerez logo_site.gif comme l'ancienne bannière et de l'uploader sur son ftp. Lorsque vous la mettez sur votre ftp, elle écrasera l'ancienne. Ouvrez désormais le fichier imageset.cfg et changez les dimensions prédéfinies de l'image site_logo.gif. Allez dans le panneau d'administration, dans "styles" -> "packs d'images", faites "rafraichir" et le tour est joué
    • La bannière est de format différent
      Le problème reste identique, le format de l'image (.jpg ou .png) ne complique guère la tâche. Il y a là encore deux solutions;
      • Solution 1, la plus simple; par le panneau d'administration
        il suffit de créer son image que vous nommerez logo_site.jpg par exemple et de l'uploader sur son ftp. Allez dans le panneau d'administration, dans "styles" -> "packs d'images", faites "éditer"
        Dans cette nouvelle page, sélectionnez "logo principal" dans le menu déroulant du haut et "site_logo.jpg" dans le menu déroulant du bas. Et là, cochez "non" en face de "Définir les dimensions:" si votre logo a des dimensions différentes de l'original ou laissez "oui" si la taille est identique.


        ATTENTION, AU PROCHAIN RAFRAICHISSEMENT DE STYLE VOUS PERDREZ VOS MODIFICATIONS
      • Solution 2, la plus propre; par le fichier imageset.cfg
        il suffit de créer son image que vous nommerez logo_site.jpg et de l'uploader sur son ftp. Ouvrez désormais le fichier imageset.cfg et changez le format de l'image en remplaçant "site_logo.gif" par le nom de l'image que vous avez uploadée. Si les dimensions sont différentes de l'image originale, profitez en pour les mettre à jour ;). Allez dans le panneau d'administration, dans "styles" -> "packs d'images", faites "rafraichir" et le tour est joué normalement. Toutefois, si cela ne réagit pas dans l'immédiat, il sera peut-être nécessaire de passer par une édition du pack d'images, mais maintenant vous savez comment faire :)
Nous en avons fait le tour? oui, l'essentiel est dit, imageset est un dossier très simple d'utilisation et de modifications. Passons désormais au second dossier.

- Template
Template contient tous les fichiers non graphiques de votre style. Vous n'aurez certainement pas à y toucher pour de petites modifications mais il pourra vous arriver de devoir modifier overall_header.html pour changer le haut de votre forum ou overall_footer.html pour ajouter des pubs tout en bas. Il n'y a pas grand chose à en dire, sinon que overall_header aura probablement son propre tutoriel de modifications par la suite.

- Thème
Mon préféré! La mine à .css! Vous trouviez la .css subSilver complexe? Vous allez la vénérer ;)
Ce dossier contient donc les .css et les images "secondaires" commençons par expliquer le rôle de celles-ci.
  • Liste des css et influences
    Il y en a beaucoup et ça fait un peu peur... mais toutes ne vous seront pas utiles, rassurez-vous! Je n'aborderai donc que les plus utiles à tous, ce qui réduit considérablement la liste. Vous pouvez toujours aller farfouiner dans les autres si vous être curieux ;)
    • colours
      La css par excellence, elle possède tous les codes couleurs que vous pouvez modifier pour personnaliser votre style. Parfaitement hiérarchisée, vous devriez trouver ce dont vous avez besoin sans fouiller des heures ;) (à noter; certaines images "secondaires" sont présentes dans cette .css car elles font partie de la "mise en couleur" du style)
    • common
      la css "technico-coloriste" elle complète la css colours en définissant les hauteurs d'écriture/ bordures, mais permets aussi de déplacer la search-box et de fixer les dimensions du style
    • content
      servira nettement moins que les deux précédentes mais permettra de déplacer l'avatar et de faire de menues transformations du genre.
    et voila, pour les .css, si vous maitriser déjà colours, vous ferez des thèmes super, si en plus vous maitrisez common, ça sera génial et si vous maitrisez content et les autres, n'hésitez pas à postuler auprès de la team graphique, style à l'appui

Ce tuto est terminé :D en espérant que vous y voyiez un peu plus clair; finalement, c'est pas si effrayant que ça prosilver, non? ;)

Avatar de l’utilisateur
Kewee
Graphiste
Graphiste
 
Rédigé le: 10 Fév 2014 à 11:26
Articles: 15
Noter cet article: 123456 Votants: 1
Mots-clés: [Prosilver], Structure, du, style, ProSilver

Retourner vers Styles


cron