Templates : Double fond de page
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Templates : Double fond de page le 2/1/2010, 13:04

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Ce tutoriel a été publié par ze_chaofan sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello hello...

Voici un tutoriel assez pratique, vous permettant de combiner deux images pour le fond de votre forum. Normalement, cela marche pour toutes les version où les templates sont modifiables, SF-BB ou non, bien que je n'aie pas encore essayé avec punBB.


Dans le template overall_header_new :
Cherchez ceci :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Et ajoutez à la suite :
Code:
<div id="bodybottom" style="padding: 0px; margin: 0px">
Validez et confirmez.

Dans le template overall_footer :
Cherchez ceci :
Code:
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
Et ajoutez juste avant :
Code:
</div>
Validez et confirmez.

Dans le CSS :
Ajoutez ceci :
/*Body_Fix-------------------------------------------------*/
body, #bodybottom { padding: 0px; margin: 0px; }
/*Double_Fond-------------------------------------------------*/
#bodybottom {
background-attachment: scroll;
background-image: url("adresse_url_de_l'image");
background-repeat: repeat;
background-position: top left;
}

Complétez avec les propriétés du deuxième fond :

En bleu : Mettez l'adresse de l'image du deuxième fond.

En noir :
- Pour que l'image ne défile pas lorsque vous descendez, inscrivez fixed
- Pour que l'image défile lorsque vous descendez, inscrivez scroll

En vert :

- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y

En orange :
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez middle

En rouge :
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center

Concernant le double fond :
Le deuxième fond sera devant le fond de page "normal".
Le deuxième fond ne peut pas toucher totalement le pied page, si vous avez une image qui doit toucher le pied page, utiliser le fond normal.
Pour pouvoir faire vos réglages sur le fond normal : voir le Tutoriel de Rém's



Dernière édition par ze_chaofan le 11/1/2010, 21:57, édité 2 fois

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit