[forumactif]Encadrer notre forum avec des images

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ce genre de chose

C'est à dire, à "encadrer" notre forum avec des images.

Pré-requis :

Avoir accès aux templates du forum (forum en phpbb2)
Avoir quelques connaissances en HTML & CSS
Avoir vos 3 images de prêtes (le haut, le centre et le bas)

Pour cette exemple, je vais prendre ces images

Spoiler:
	-> Haut : http://www.zupmage.eu/up/1322073972.png -> Centre : http://www.zupmage.eu/up/1322073995.png -> Bas : http://www.zupmage.eu/up/1322074020.png

Préparation de la structure

Dans cette partie, on va mettre des blocs qui accueilleront nos images. Pour cela, on va devoir modifier 2 templates :

Overall_header

Dans le template "overall_header", repérez ceci

Code:

<a name="top"></a>
{JAVASCRIPT}

et placez juste après :

Code:

Validez et publiez.

Overall_footer

Dans le template "overall_footer", repérez ceci

Code:

<div id="fb-root"></div>
<script type="text/javascript">

et placez juste avant :

Code:

</div>
<div id="fd_bas"></div>

Validez et publiez.

On passe au visuel

C'est fait pour la structure ^^ On va donc maintenant régler notre mise en page Smile

Pour cela, allez dans le CSS du forum (PA >> affichage >> couleurs >> feuille de style css)

On va devoir indiquer 3 styles :
-> celui pour le haut du forum
-> celui pour le milieu
-> celui pour le bas

Pour chaque style, il va falloir donner une image de fond (background-image), une largeur (width), une hauteur (height) et une position.

On règle le haut du cadre

Ici, on va donc afficher notre image du haut. Pour cela, on va devoir dire au bloc :

-> l'image de fond

Code:

background: url('http://www.zupmage.eu/up/1322073972.png');

-> la largeur de l'image (dans mon exemple, mon image fait 1000px de large)

Code:

width:1000px;

-> la hauteur de l'image (dans mon exemple, mon image fait 192px de haut)

Code:

height: 192px;

-> que l'image de fond ne doit pas se répéter

Code:

background-repeat:no-repeat;

-> que l'image de fond doit se placer en haut du bloc et au centre

Code:

background-position:center top;

-> que le bloc est centré horizontalement dans la page

Code:

margin:auto;

Ce qui donne pour cette partie du css

Code:

#fd_haut{
width:1000px;
height: 192px;
background: url('http://www.zupmage.eu/up/1322073972.png');
background-repeat:no-repeat;
background-position:center top;
margin:auto;
}

On règle le bloc du milieu

Même principe que précédement, sauf que cette fois, on ne donne pas de hauteur fixe et on dit à l'image qu'elle doit se répéter verticalement.

Code:

#fd_milieu{
width:1000px;
background: url('http://www.zupmage.eu/up/1322073995.png');
background-repeat:repeat-y;
background-position:center;
margin:auto;
}

On règle le bas du cadre

Même principe que pour le bloc du haut

Code:

#fd_bas{
width:1000px;
height: 120px;
background: url('http://www.zupmage.eu/up/1322074020.png');
background-repeat:no-repeat;
background-position:center top;
margin: auto;
}

On règle la page pour éviter les espaces

Pour finir, on va faire en sorte que le haut et le bas de notre forum soit collé au bord de la page. On va donc régler les propriétés du "body" (= contenu de la page)

Code:

body{
margin:0;
padding:0;
width:100%;
}

Ensuite, si comme moi, le logo/la bann est intégré dans votre image, commencer par supprimer l'image de la bann dans les images (PA >> affichage >> images). Puis, dans le CSS, ajoutez

Code:

table.bodylinewidth td.bodyline{
margin-top:-100px; /* à modifier si ça ne vous convient pas */
display:inline-block;
width:100%;
margin-left: auto;
margin-right: auto;
}

Il nous vous reste plus ensuite qu'à régler la largeur du forum pour qu'il entre parfaitement dans votre image Smile

Et voilà ! C'est terminé ^^

Des questions ? Un soucis ? C'est par [ici]