phpBB-fr.com

par **Jester** » 01 Jan 2008 à 20:31

Ce tuto va vous permettre de rajouter des bordures, extensibles ou non, sur votre forum utilisant le style prosilver (ou dérivés).

- Ajouter des bordures à Prosilver (fixe à 950px la largeur de votre forum)
- Ajouter des bordures extensibles à Prosilver (pour les forums à largeur variable)

/!\ N'oubliez pas de faire une sauvegarde de vos anciens fichiers avant toutes modifications

- Modification et MAJ du sujet par Sheronz le 02 Mai 2009 -

par **Jester** » 24 Avr 2009 à 23:07

- Ajouter des bordures à votre forum prosilver
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.

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: <br /><strong><a href="{U_ACP}">{L_ACP}</a></strong>

et juste après rajoutez :

Code: Tout sélectionner: </div>

Trouvez :

Code: Tout sélectionner: {RUN_CRON_TASK}

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 et changer 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 */ )

par **Sheronz** » 24 Avr 2009 à 23:07

» Ajouter des bordures extensibles à votre forum Prosilver

Ce tuto fait suite à celui de MissGeek, vous montrant de quelle manière créer ses propres bordures pour son forum. Vous devez donc l'avoir lu au préalable : http://forums.phpbb-fr.com/tutoriaux-phpbb/sujet150089.html

Installation : moins de 5 minutes

Avant :

Après :

» Téléchargement des feuilles de styles complémentaires

Tout d'abord, téléchargez ce fichier : forum_borders.zip (clic droit » enregistrer la cible sous)

» Mise en place des bordures sur le forum

Décompressez le fichier zip sur votre ordinateur.

Allez sur votre FTP dans le dossier suivant : styles/prosilver/theme/images/
et ajouter les 8 images obtenues avec le tuto de MissGeek.
Ces images doivent respectivement porter ces noms :
- Le coin en haut à gauche : border_top_left.png
- Le coin en haut à droite : border_top_right.png
- Le coin en bas à gauche : border_bottom_left.png
- Le coin en bas à droite : border_bottom_right.png
- La bordure du haut : bg_top.png
- La bordure de droite : bg_right.png
- La bordure du bas : bg_bottom.png
- La bordure de gauche : bg_left.png

PS: Si vous utilisez une autre extension ou si tous simplement vos images ont une autre dénomination, pensez à modifier le fichier forum_borders.css en conséquence.

Allez ensuite dans le dossier : styles/prosilver/theme/ et ajoutez le fichier forum_borders.css contenu dans l'archive forum_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 forum_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("forum_borders.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 ajoutez :

Code: Tout sélectionner: <table class="outside" cellpadding="0" cellspacing="0" border="0"> <tr> <td class="top-left"></td><td class="top-center"></td><td class="top-right"></td> </tr> <tr> <td class="bord-left"></td> <td class="bg-inside">

Maintenant ouvrez votre fichier overall_footer.html toujours dans le dossier template :

Trouvez :

Code: Tout sélectionner: </div> </div> </div>

et juste après ajoutez :

Code: Tout sélectionner: </td> <td class="bord-right"></td> </tr> <tr> <td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-right"></td> </tr> </table>

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 des couleurs de fond et de la largeur du forum

- Pour modifier la couleur du fond de l'extérieur de votre forum modifiez la valeur #A0A7AD; dans le fichier forum_borders.css :

Code: Tout sélectionner: html, body { color:#A0A7AD; background-color:#FFFFFF; }

- Pour modifier la couleur du fond de l'intérieur de votre forum modifiez la valeur #FFFFFF; dans le fichier forum_borders.css :

Code: Tout sélectionner: .bg-inside { background:#FFFFFF; }

- Pour modifier la largeur de votre forum (celle-ci sera de 950px par défaut) modifiez la valeur de l'attribut width dans les class #wrap et .outside du fichier forum_borders.css (la différence de 50px entre les deux est a conserver).

» Modification des couleurs des bordures

- Reportez vous au tuto de MissGeek : http://forums.phpbb-fr.com/tutoriaux-phpbb/sujet150089.html

phpBB-fr.com

[Prosilver] Ajouter des bordures à votre forum prosilver

[Prosilver] Ajouter des bordures à votre forum prosilver

Re: [Prosilver] Ajouter des bordures à Prosilver (ou dérivés)

Re: [Prosilver] Ajouter des bordures à Prosilver (ou dérivés)

Qui est en ligne