Créer un style phpBB 3.1. ou phpBB 3.2 Facile

Partager sur FacebookPartager sur TwitterPartager sur Google+

Créer un style phpBB 3.1. ou phpBB 3.2

Les bonnes pratiques de départ


Après moultes réflexions diverses et avariées, l'équipe graph a l'immense plaisir et le privilège de vous proposer une solution simple et efficace pour créer votre propre style personnalisé sans modifier prosilver et vous faciliter ainsi les mises à jour à venir.

Prérequis :
  • Avoir installé un forum phpBB 3.1.x ou phpBB 3.2.x (idéalement, sur wamp, pour pouvoir bidouiller tranquille)
  • Avoir un éditeur de texte fonctionnel avec lequel vous vous sentez en confiance
  • (en option)Avoir votre dose de caféine à portée de main mais pas trop près du clavier
  • Avoir un peu de temps devant vous pour tout faire d'un coup, sans avoir à revenir sans cesse au tuto


Votre mug de café est prêt ? Alors commençons...
Pour plus de facilité, je crée un style en même temps, afin d'avoir un exemple concret souvent plus explicite que de la théorie. Vous n'êtes donc bien sûr pas obligés de renommer votre style "pirate" ;)

I. Préparation

  1. Téléchargez l'archive .zip correspondante à votre version phpBB
    Décompressez le contenu de l'archive dans le répertoire styles/

    style_perso.zip
    Base en 3.1.10
    (8.55 Ko) Téléchargé 87 fois

    style_perso_3.2.0.zip
    Base en 3.2.0
    (7.47 Ko) Téléchargé 175 fois


    installer.jpg

    NB : Le pack proposé apporte les modifications dans le overall_header.html (de la ligne 47 à 62 pour les curieux) pour vous faciliter la vie. Il appelle la nouvelle feuille de style sur laquelle vous allez créer. Tout le superflu a été ôté, ne laissant que l'indispensable. Lorsque vous serez à l'aise, vous pourrez complexifier votre style en ajoutant les fichiers supplémentaires dont vous aurez besoin mais nous verrons ça en temps et en heure.

  2. Renommez le répertoire
    Un simple bouton droit suffit à renommer le répertoire.
    overall.jpg

  3. Renommez le style
    Ouvrir le fichier style.cfg de votre style et le modifier avec vos informations

    fichier style.cfg a écrit:# General Information about this style
    name = style perso
    copyright = © votre nom ici
    style_version = 1.0.0
    phpbb_version = 3.X.Y


    Vous pouvez donc modifier ainsi :

    name = le nom de votre merveille... C'est là que vous précisez le nom du style tel qu'il apparaîtra dans l'administration du forum.
    copyright = © votre copy avec la date ça fait classe
    style_version = la version de votre style Commencez à 1.0.0 et incrémentez le comptage des modifications majeures au fur et à mesure.
    phpbb_version = la version de phpBB sous laquelle votre style fonctionne


    par exemple, moi, j'aurai ça :
    name = Pirate
    copyright = © Cri|Studio, 2016
    style_version = 1.0.0
    phpbb_version = 3.1.10

  4. Renommez la css
    Un simple bouton droit suffit à renommer la css aussi.
    fond-logo.jpg

  5. Appelez la css dans overall_header.html
    Ouvrez overall-header.html qui se trouve dans le répertoire template de votre nouveau style.
    Cherchez
    Code: Tout sélectionner
    <link href="{T_THEME_PATH}/style_perso.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

    et remplacez
    Code: Tout sélectionner
    style_perso.css
    par le nom de votre css.

    Par exemple, pour mon style, je modifie ainsi :
    par_defaut.jpg

  6. Appelez la css dans simple_header.html
    Ouvrez simple-header.html qui se trouve dans le répertoire template de votre nouveau style.
    Cherchez
    Code: Tout sélectionner
    <link href="{T_THEME_PATH}/style_perso.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

    et remplacez
    Code: Tout sélectionner
    style_perso.css
    par le nom de votre css. C'est la css qui servira pour toutes les pop-ups ;)

    II. Installer et définir par défaut

    1. Installez le style
      Dans votre panneau d'administration, allez dans l'onglet "personnaliser" et choisissez "installer les styles" dans la colonne de gauche.
      Votre style apparaît, il n'y a plus qu'à cliquer sur installer.
      Le fichier joint installer.jpg n’est plus disponible.

    2. Mettez le style par défaut
      Dans votre panneau d'administration toujours, cliquez sur styles puis détails. Les informations du style.cfg que vous avez renseignées précédemment apparaissent. Pour plus de confort dans la création, n'hésitez pas à mettre le style part défaut, cela vous permettra de voir le style aussi connecté(e) que déconnecté(e).
      nom-css.jpg
      nom-css.jpg (21.78 Ko) Vu 1678 fois

    III. Personnaliser le style

    1. La feuille de style (ou .css)
      Il vous suffit maintenant de recopier les classes qui vous intéressent dans la feuille de style toute belle, toute propre de votre style. Ouvrez votre .css avec votre éditeur de texte et incluez tout ce que vous désirez changer. Le plus simple étant de recopier la classe de prosilver sur laquelle vous voulez agir.

      Par exemple, j'ai voulu changer le fond et le logo pour commencer :
      placement.jpg
      placement.jpg (5.94 Ko) Vu 1673 fois

      J'ai donc mis les deux images (site_logo.png et background.jpg ) dans le répertoire de mon style dans theme/images/ et noté ceci dans mon fichier .css
      Version 3.1 :
      Code: Tout sélectionner
      html, body {
      	color: #053754;
      	background: url("./images/background.jpg"); 
      }
      .imageset.site_logo {
      	background-image: url("./images/site_logo.png");
      	padding-left: 260px;
      	padding-top: 100px;
      }

      Version 3.2 :
      Code: Tout sélectionner
      html, body {
      	color: #053754;
      	background: url("./images/background.jpg"); 
      }
      .site_logo {
      	background-image: url("./images/site_logo.png");
      	width: 260px;
      	left: 100px;
      }

      Ma css prend donc le pas sur les css de prosilver et s'affiche directement à l'écran.

    2. Les copyrights
      Si vous désirez mettre votre copyright et/ou, comme moi, mettre les crédits des images utilisées, il va vous falloir copier le overall_footer.html de prosilver (dans styles/prosilver/template) et le recopier dans votre style au même emplacement.

      Trouvez
      Code: Tout sélectionner
      	<div class="copyright">
      		<!-- EVENT overall_footer_copyright_prepend -->
      		{CREDIT_LINE}
      		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      		<!-- EVENT overall_footer_copyright_append -->
      		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      	</div>

      et remplacez par
      Code: Tout sélectionner
      	<div class="copyright">
      		<!-- EVENT overall_footer_copyright_prepend -->
      		{CREDIT_LINE}
      		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      		<!-- EVENT overall_footer_copyright_append -->
      		| Style par <a href="http://lien vers votre site, blog etc/">votre nom</a>
      		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      	</div>


      par exemple, sur mon style, il y a ce copyright :
      Code: Tout sélectionner
      	<div class="copyright">
      		<!-- EVENT overall_footer_copyright_prepend -->
      		{CREDIT_LINE}
      		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
      		<!-- EVENT overall_footer_copyright_append -->
      		| Style par <a href="http://www.cri-studio.com/">Cri|Studio</a>
      		| Images par <a href="http://www.freepik.com/free-vector/cute-baby-pirates_791771.htm/">freepik</a>
      		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
      		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
      	</div>
      

      nom-repertoire.jpg
      nom-repertoire.jpg (13.04 Ko) Vu 1676 fois
Voila voila... de quoi commencer à personnaliser votre style sans avoir besoin de modifier prosilver et vous faciliter la vie pour toutes les mises à jour futures !

Amusez-vous bien ! :)
09/01/2017 - modifié par cabot pour mettre l’article à jour
09/01/2017 - modifié par cabot pour mettre l’article à jour
04/11/2016 - modifié par Kewee pour mettre l’article à jour
22/09/2016 - modifié par Kewee pour mettre l’article à jour
09/03/2016 - modifié par Kewee pour mettre l’article à jour pour 3.1.8 (même fichier mais fallait le dire ;))
25/01/2016 - modifié par Kewee pour mettre l’article à jour
25/01/2016 - modifié par Kewee pour mettre l’article à jour
25/01/2016 - modifié par Kewee pour mettre l’article à jour
19/01/2016 - modifié par Kewee pour modifier les fichiers joints (pack mis en 3.1.7)
Avatar de l’utilisateur
Kewee
Graphiste
Graphiste
 
Rédigé le: 09 Jan 2016 à 12:38
Articles: 17
Contributeurs:
Noter cet article: 123456 Votants: 13
Mots-clés: style, héritage, 3.1.x, 3.2.x, personnaliser, template, css, prosilver, aide, image

Retourner vers Styles