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

Téléchargez l'archive .zip suivante
Décompressez le contenu de l'archive dans le répertoire styles/

style_perso_3.3.12.zip

(6.15 Ko) Téléchargé 43 fois

style_perso_3.2.11.zip

(6.69 Ko) Téléchargé 147 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.
Renommez le répertoire
Un simple bouton droit suffit à renommer le répertoire.

placement.jpg (5.94 Ko) Vu 659 fois
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
Renommez la css
Un simple bouton droit suffit à renommer la css aussi.
Par exemple, pour mon style, je modifie ainsi :

nom-css.jpg (21.78 Ko) Vu 661 fois
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.
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

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 (2.87 Ko) Vu 651 fois
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

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 (11.27 Ko) Vu 645 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.

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 !