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
- 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; }
Allez dans overall_header.html
Cherchez
- Code: Tout sélectionner
<div id="wrap">
Juste avant, ajoutez
- Code: Tout sélectionner
<div id="wrap-bg">
et enfin...
Allez dans overall_footer.html
Cherchez
- Code: Tout sélectionner
<div> <a id="bottom" name="bottom" accesskey="z"></a>
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;