phpBB-fr.com

[Skyforums]

» Mettre une image de fond sur son forum

Préparez votre image et mettez-la dans /phpBB3/styles/prosilver/theme/images/ à l'aide de votre ftp
pour l'exemple, nous la nommerons "fond.gif"

Allez dans common.css

Cherchez

Code: Tout sélectionner

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   background-color: #FFFFFF;


Remplacez par

Code: Tout sélectionner

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   background-image: url("{T_THEME_PATH}/images/fond.gif");


on peut, bien sûr, compléter les données avec

Code: Tout sélectionner

background-attachment:
    background-position:
    background-repeat:

Le résultat;


ce qui donne par exemple (avec un fond créé de la largeur du forum);

Code: Tout sélectionner

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, sans-serif;
   background-image: url("{T_THEME_PATH}/images/fond.gif");
        background-attachment: fixed;
        background-position: 50% 0%;
        background-repeat: repeat-y; 


Le résultat;


Pour obtenir une couleur au fond, derrière l'image (par défaut, c'est blanc)
Allez dans colours.css

Trouvez

Code: Tout sélectionner

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
   color: #536482;   
   background-color: #FFFFFF;
}

et changez simplement la couleur du background-color

[Skyforums]

» Mettre deux images de fond sur son forum

Pour obtenir une image au fond, derrière l'image (à la place du bleu) la méthode est différente de la précédente et un peu plus complexe


Préparez vos deux images et mettez-les dans /phpBB3/styles/prosilver/theme/images/ à l'aide de votre ftp
pour l'exemple, nous nommerons l'image de fond de forum "fond.gif" et l'image de fond de page "fond2.gif" (c'est à dire, respectivement, l'image bordée de vagues roses et l'image qui remplacera le fond bleu)

Allez dans common.css

Cherchez

Code: Tout sélectionner

/* Main blocks
---------------------------------------- */
#wrap {
   width: 750px;
   margin: 0 auto;
}

Après, ajoutez

Code: Tout sélectionner

#wrap-bg {
   background: url("{T_THEME_PATH}/images/fond.gif") repeat-y;
   min-height: 100%;
   width: 800px;
   margin: 0 auto;
   margin-top: 0px;
}

puis allez dans colours.css

Cherchez

Code: Tout sélectionner

html, body {
   color: #536482;   
   background-color: #FFFFFF;
}

Remplacez par

Code: Tout sélectionner

html, body {
   color: #536482;
   background-color: #FFFFFF;
   background-image: url("{T_THEME_PATH}/images/fond2.gif");
   background-repeat: repeat;
   background-position: top;
}

ensuite, toujours dans colours.css

Cherchez

Code: Tout sélectionner

/* Round cornered boxes and backgrounds
---------------------------------------- */

Ajoutez après

Code: Tout sélectionner

#wrap {
   background: url("{T_THEME_PATH}/images/fond.gif") top repeat-y;
}

et enfin...

Allez dans overall_header.html
Cherchez

Code: Tout sélectionner

<div id="wrap">

Juste avant, ajoutez

Code: Tout sélectionner

<div id="wrap-bg">

Cherchez le dernier

Code: Tout sélectionner

   </div>
      <!-- ENDIF -->

Juste avant, ajoutez

Code: Tout sélectionner

</div>

Vous avez terminé! si vous avez bien suivi ce tutoriel point par point, vous devez obtenir ceci;