Header

Partagez | 

[ForumActif] Encadrer notre forum avec des images

Message Sujet: [ForumActif] Encadrer notre forum avec des images   Mer 23 Nov - 20:09

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Bonjour à tous ! Smile

Dans ce tutoriel, nous allons apprendre à faire ce genre de choses :


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

Idea Pré-requis :
  • Avoir accès aux templates du forum (forum en phpbb2),
  • Avoir quelques connaissances en HTML & CSS,
  • Avoir vos 3 images prêtes (le haut, le centre et le bas),


Pour cette exemple, je vais prendre ces images :

Spoiler:
 

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:
<div id="fd_haut"> </div>
<div id="fd_milieu">

Validez et publiez.

Overall_footer



Dans le template "overall_footer", repérez ceci :

Code:
<!-- BEGIN switch_facebook_login -->
<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édemment, 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, commencez 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é. ^^

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[ForumActif] Encadrer notre forum avec des images
Page 1 sur 1
 Sujets similaires
-
» Modifier les icônes des forum avec différentes images
» Problème de flou sur le forum avec Mozilla.
» Problème avec notre forum
» Souci avec un inscris sur notre forum, besoin d'aide, merci !!!
» Peut on cibler un seul forum avec un code CSS , à l'intérieur de notre forum ?
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens