Tutorial basé et modifié à partir du tutorial de phpBB.it
Ce tuto va vous permettre de rajouter des bordures stylisées à la façon de phpBB.com sur votre forum avec le style prosilver (ou dérivés).
Ce tutorial s'adresse à des forums centrés. Vous pouvez vous servir directement des images fournies, ou bien en faire des personnalisées. Tout est expliqué dans le tuto.
N'oubliez pas de faire une sauvegarde de vos anciens fichiers avant toutes modifications
Installation : moins de 5 minutes
Avant :
Après :
» Téléchargement des fichiers images et des feuilles de styles complémentaires
Tout d'abord, téléchargez ces 2 fichiers : borders_forum.zip et css_borders.zip (clic droit et enregistrer la cible sous)
» Mise en place des bordures sur le forum
Décompressez les fichiers zip sur votre ordinateur.
Allez sur votre FTP dans le dossier suivant : styles/prosilver/theme/images/
et ajouter le contenu du dossier contenant les bordures (borders_forum)
Allez ensuite dans le dossier : styles/prosilver/theme/ et ajoutez le fichier shoots_boarders.css contenu dans l'archive css_borders.zip
- Si vous n'avez jamais modifié la feuille de style stylesheet.css :
Allez dans le dossier : styles/prosilver/theme/
et ajoutez la feuille de style stylesheet.css contenue dans l'archive css_borders.zip en écrasant l'ancienne. - Si vous avez déjà modifié votre stylesheet.css antérieurement :
Ouvrez le fichier stylesheet.css dans styles/prosilver/theme/ et en fin de code, rajoutez :- Code: Tout sélectionner
@import url("shoots_boarders.css");
Ouvrez ensuite le fichier overall_header.html dans le dossier template :
Trouvez :
- Code: Tout sélectionner
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
et juste après rajoutez :
- Code: Tout sélectionner
<div class="outside">
<div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
Maintenant ouvrez votre fichier overall_footer.html toujours dans le dossier template :
Trouvez :
- Code: Tout sélectionner
<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
et juste après rajoutez :
- Code: Tout sélectionner
</div>
Trouvez :
- Code: Tout sélectionner
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
et juste après ajoutez :
- Code: Tout sélectionner
</div>
<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
N'oubliez pas de rafraîchir le style via le panneau d'administration, theme et template.
Et voilà, votre forum est entouré d'une bordure !
» Modification de la couleur de fond et des bordures
Vous pouvez bien entendu modifier ces bordures en changeant l'image donnée au départ, et bien entendu en changer les couleurs. Pour modifier les couleurs des bords et les mettre à votre convenance il vous faudra modifier la couleur des images de bordure (pour se faire vous avez un Tuto sous The Gimp ici : tutoriaux-phpbb/sujet150089.html) et changez la couleur de fond dans le shot_boarders.css.
Pour cette dernière, trouvez :
- Code: Tout sélectionner
html, body {
color: #68696D;
background-color: #A0A8AE;
et changez la couleur A0A8AE par la couleur souhaitée.
Comme vous pouvez le voir, toutes les couleurs peuvent être changées en copiant tout simplement les couleurs que vous avez dans le fichier colours.css et en les adaptant à votre shot_boarders.css (tout est indiqué dans le fichier en commentaire */ )
Enjoy
