Mettre une image de fond sur son forum Facile

Mettre une image de fond sur son forum

[Prosilver]


- 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;
Image

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;
Image

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
Image

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é! :D si vous avez bien suivi ce tutoriel point par point, vous devez obtenir ceci;
Image

Avatar de l’utilisateur
Kewee
Graphiste
Graphiste
 
Rédigé le: 10 Fév 2014 à 11:25
Articles: 15
Noter cet article: 123456 Votants: Aucun
Mots-clés: [Prosilver], Mettre, une, image, de, fond, sur, son, forum

Retourner vers Styles


cron