Créer un style phpBB 3.2 ou 3.3 Facile

Créer un style phpBB 3.2 ou 3.3

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.2.x ou 3.3.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 suivante
    Décompressez le contenu de l'archive dans le répertoire styles/
    style_perso_3.2.11.zip
    (6.69 Ko) Téléchargé 112 fois

    style_perso_3.3.9.zip
    (6.74 Ko) Téléchargé 196 fois

    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.
    placement.jpg
    placement.jpg (5.94 Ko) Vu 499 fois


  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 2015-2020
    style_version = 2.0.11
    phpbb_version = 3.2.11

  4. Renommez la css
    Un simple bouton droit suffit à renommer la css aussi.
    Par exemple, pour mon style, je modifie ainsi :
    nom-css.jpg
    nom-css.jpg (21.78 Ko) Vu 497 fois

  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.
  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.
    installer.jpg
    installer.jpg (2.87 Ko) Vu 491 fois

  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 bien connecté(e) que déconnecté(e).


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 :
    fond-logo.jpg
    fond-logo.jpg (11.27 Ko) Vu 489 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

    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 -->
    		<p class="footer-row">
    			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
    		</p>
    		<!-- IF TRANSLATION_INFO -->
    		<p class="footer-row">
    			<span class="footer-copyright">{{ TRANSLATION_INFO }}</span>
    		</p>
    		<!-- ENDIF -->
    		<!-- EVENT overall_footer_copyright_append -->
    

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


    par exemple, sur mon style, il y a ce copyright :
    Code: Tout sélectionner
    	<div class="copyright">
    		<!-- EVENT overall_footer_copyright_prepend -->
    		<p class="footer-row">
    			<span class="footer-copyright">{{ CREDIT_LINE }}</span>
    		</p>
    		<!-- IF TRANSLATION_INFO -->
    		<p class="footer-row">
    			<span class="footer-copyright">{{ TRANSLATION_INFO }}</span>
    		</p>
    		<!-- ENDIF -->
    		<p class="footer-row">
    			<span class="footer-copyright">Style {{ lang('POST_BY_AUTHOR') }} <a href="http://www.cri-studio.com/">Cri|Studio</a>
    			|
    			<a href="http://www.freepik.com/free-photos-vectors/kids">vectors {{ lang('POST_BY_AUTHOR') }} Freepik</a></span>
    		</p>
    		<!-- EVENT overall_footer_copyright_append -->
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 ! :)
Avatar de l’utilisateur
Kewee
Graphiste
Graphiste
 
Rédigé le: 09 Jan 2016 à 11:38
Articles: 15
Contributeurs:
Noter cet article: 123456 Votants: 24
Mots-clés: style, héritage, 3.1.x, 3.2.x, personnaliser, template, css, prosilver, aide, image

Retourner vers Styles


cron