phpBB-fr.com

[Lilux]

» Comment mettre une image en fond de forum ?
But du tutorial :

» Ce tuto va vous expliquer comment mettre une image en "background" (arrière-plan) et comment rendre plus ou moins transparent votre forum.
Ce tutoriel nécéssite que votre feuille de style soit active.



Info: Cette documentation est faite à partir d'un thème de base subSilver version 2.0.22


»Activer la feuille de style.


» Pour activer la feuille de style CSS, vous devez modifier ce qui suit dans overall_header.tpl :

» CHERCHER :



Code: Tout sélectionner

<!-- link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css" -->



» REMPLACER PAR :



Code: Tout sélectionner

<link rel="stylesheet" href="templates/subSilver/{T_HEAD_STYLESHEET}" type="text/css">



» CHERCHER :



Code: Tout sélectionner

<style type="text/css">



» REMPLACER PAR :



Code: Tout sélectionner

<!-- style type="text/css">



Cette opération doit être répétée dans simple_header.tpl et admin/page_header.tpl


» Modifier subSilver.css pour insérer une image.

» Maintenant que la feuille de style est active, les modifications du thème se font dans subSilver.css .

I) Image dans le bodyline.

Pour mettre une image de fond dans le bodyline ( Qu'est ce que le bodyline? ) du forum vous devez :


» CHERCHER :



Code: Tout sélectionner

/* This is the border line & background colour round the entire page */
.bodyline   { background-color: #FFFFFF; border: 1px #98AAB1 solid; }


» REMPLACER PAR :



Code: Tout sélectionner

/* This is the border line & background colour round the entire page */
.bodyline   { background-image: url(images/fond.gif); border: 1px #98AAB1 solid;}


L'image doit etre dans le dossier /images/ du thème.



Résultat :

Avant : Image utilisée : Après :

II) Image dans le général body.


Pour mettre une image de fond dans le général body ( Qu'est ce que le général body? ) du forum vous devez :


» CHERCHER :



Code: Tout sélectionner

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-color: #E5E5E5;
   scrollbar-face-color: #DEE3E7;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-shadow-color: #DEE3E7;
   scrollbar-3dlight-color: #D1D7DC;
   scrollbar-arrow-color:  #006699;
   scrollbar-track-color: #EFEFEF;
   scrollbar-darkshadow-color: #98AAB1;
}


» REMPLACER PAR :



Code: Tout sélectionner

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-image : url(images/fond.gif);
   background-color: #E5E5E5;
   scrollbar-face-color: #DEE3E7;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-shadow-color: #DEE3E7;
   scrollbar-3dlight-color: #D1D7DC;
   scrollbar-arrow-color:  #006699;
   scrollbar-track-color: #EFEFEF;
   scrollbar-darkshadow-color: #98AAB1;
}


L'image doit etre dans le dossier /images/ du thème.

Résultat :

Avant : Image utilisée : Après :

III) Attributs de "background-image".


Maintenant que vous avez votre image dans la partie du thème que vous vouliez, vous vous apercevez qu'elle est soit, au mauvais endroit, soit qu'elle se répète et que vous ne voulez pas, soit que vous la voulez qu'en haut et pas en bas etc...

Voici quelques astuces pour vous aider à "maitriser" votre image de fond:

» background-repeat :


repeat (par défaut) :
L'image se répète à la fois horizontalement et verticalement ;
repeat-x :
L'image ne se répète qu'horizontalement ;
repeat-y :
L'image ne se répète que verticalement ;
no-repeat :
L'image ne se répète pas : un seul exemplaire de celle-ci est dessiné.
» background-attachment :


scroll (par défaut) :
L'image suit votre zone de visualisation quand vous faites défilez votre page.
fixed :
L'image reste fixe quand vous faites défilez votre page.


» background-position :


% % (0% 0% par défaut) :
Pour la paire de valeurs '0% 0%', le coin en haut et à gauche de l'image est aligné sur le coin en haut et à gauche de la "table" qui contient celle ci.
Pour la paire de valeurs '100% 100%', c'est le coin en bas et à droite de l'image sur le coin en bas et à droite de la "table".
Pour la paire de valeurs '14% 84%' par exemple, le point dans l'image, situé 14 % vers la droite et 84 % vers le bas, se place sur celui contenu dans la "table", dans les mêmes proportions.

centimétre centimétre :
Pour la paire de valeur '2cm 2cm', le coin en haut et à gauche de l'image se place sur le point, situé à 2 cm vers la droite et 2 cm vers le bas en partant du coin en haut et à gauche de la table.

top left et left top :
Identique à '0% 0%'.

top, top center et center top :
Identique à '50% 0%'.

right top et top right :
Identique à '100% 0%'.

left, left center et center left :
Identique à '0% 50%'.

center et center center :
Identique à '50% 50%'.

right, right center et center right :
Identique à '100% 50%'.

bottom left et left bottom :
Identique à '0% 100%'.

bottom, bottom center et center bottom :
Identique à '50% 100%'.

bottom right et right bottom :
Identique à '100% 100%'.

Exemple de code pour l'image de fond de bodyline :



Code: Tout sélectionner

/* This is the border line & background colour round the entire page */
.bodyline {
   background-image : url(images/fond.gif);
   background-attachment: fixed;
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-color: #FFFFFF;
   border: 1px #98AAB1 solid;
}


Ce qui donne :


Exemple de code pour l'image de fond de bodyline :



Code: Tout sélectionner

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-image: url(images/fond.gif);
   background-position: top;
   background-repeat: repeat-x;
   background-color: #E5E5E5;
   scrollbar-face-color: #DEE3E7;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-shadow-color: #DEE3E7;
   scrollbar-3dlight-color: #D1D7DC;
   scrollbar-arrow-color:  #006699;
   scrollbar-track-color: #EFEFEF;
   scrollbar-darkshadow-color: #98AAB1;
}


Ce qui donne :

N'hésitez pas à essayer tous ces attributs afin de vous familiariser avec.

» Comment jouer avec la transparence ?

» Suivant l'image de fond que vous mettez et l'effet que vous voulez produire, il est nécéssaire d'appliquer plus ou moins de "transparence" à votre forum.

Eléments concernés :


dans la css :



Code: Tout sélectionner

.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

Cette class est concernée en cas de fond dans le général body.
Pour la transparence , mettez transparent à la place de FFFFFF .




Code: Tout sélectionner

.forumline   { background-color: #FFFFFF; border: 2px #006699 solid; }

Cette class est concernée en cas de fond dans général body et bodyline.
Pour la transparence , mettez transparent à la place de FFFFFF .




Code: Tout sélectionner

td.row1   { background-color: #EFEFEF; }
td.row2   { background-color: #DEE3E7; }
td.row3   { background-color: #D1D7DC; }

Cette class est concernée en cas de fond dans général body et bodyline.
Pour la transparence , mettez transparent à la place de EFEFEF, DEE3E7, D1D7DC .




Code: Tout sélectionner

td.rowpic {
      background-color: #FFFFFF;
      background-image: url(images/cellpic2.jpg);
      background-repeat: repeat-y;
}

Cette class est concernée en cas de fond dans général body et bodyline mais uniquement si vous touchez au cellpic (voir plus bas)
Pour la transparence , mettez transparent à la place de FFFFFF .




Code: Tout sélectionner

th   {
   color: #FFA34F; font-size: 11px; font-weight : bold;
   background-color: #006699; height: 25px;
   background-image: url(images/cellpic3.gif);
}

Cette class est concernée en cas de fond dans général body et bodyline mais uniquement si vous touchez au cellpic (voir plus bas)
Pour la transparence , mettez transparent à la place de 006699 .




Code: Tout sélectionner

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
         background-image: url(images/cellpic1.gif);
         background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}

Cette class est concernée en cas de fond dans général body et bodyline mais uniquement si vous touchez au cellpic (voir plus bas)
Pour la transparence , mettez transparent à la place de D1D7DC .




Code: Tout sélectionner

td.row3Right,td.spaceRow {
   background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

Cette class est concernée en cas de fond dans général body et bodyline.
Pour la transparence , mettez transparent à la place de D1D7DC .

Certaines de ces classes vont de paire et sont indissociables pour avoir un bon rendu, pensez à bien regarder toutes les pages des forums pour voir si le résultat est satisfaisant.

transparence des cellpics :

Bien sur vous pouvez à l'aide d'un outil tel que photoshop, la possibilité de réduire l'opacité d'une image, mais souvent le résultat n'est pas très net.
Voici comment jouer sur la transparence tout simplement, en passant par la css, reprenons la class suivante que nous avons déjà modifié plus haut :

CHERCHER :


Code: Tout sélectionner

td.rowpic {
      background-color: #transparent;
      background-image: url(images/cellpic2.jpg);
      background-repeat: repeat-y;
}



REMPLACER PAR :


Code: Tout sélectionner

td.rowpic {
      background-color: #FFFFFF;
      background-image: url(images/cellpic2.jpg);
      background-repeat: repeat-y;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5; opacity: 0.5;
      
}



Faites de même pour les autres class concernant les cellpics en ajoutant :


Code: Tout sélectionner

      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5; opacity: 0.5;


au même endroit.
Vous pouvez jouer sur les valeurs d'opacité.

Cette modification rend le même résultat sur tous les navigateurs

----------------------------------------------------
Voilà ce tutorial est terminé.
Maintenant place à votre créativité et à votre imagination.
La réussite d'une belle transparence est que le confort de navigation ainsi que la lisibilité soient optimums, pour cela évitez les images trop barriolées.
Suivant l'image choisie, il vous faudra modifier la couleur des polices.