Sujets similaires

Profiter d’une bannière de fond ET d’un fond

Niveau: Facile | Par: Orange | Validé par: Iko' | En date du: 13 déc. 09

Le choix est parfois difficile. Est-ce que je crée une bannière de fond pour ainsi être contraint d’utiliser une couleur unie pour le reste de mon forum, ou je sacrifie l’aspect qu’apporte une bannière de fond pour remplacer mon fond unicolore par une image de mon choix ? Le choix n’est plus à faire, suivez attentivement la démarche simple proposée ci-dessous et profitez de l’aspect d’une bannière de fond et d’un fond image.

(Jusqu’à maintenant ça ressemble à une info pub)

Commençons par déplacer le code de bannière pour le positionner avant le cadre des forums et ainsi éviter que votre bannière ne déforme le cadre et rende votre forum très large.

Pour ce faire, direction Panneau d’administration > onglet : Affichage > menu : Template > option : Général. Modifiez le Template overall_header en cliquant sur l’icône et coupez (Ctrl+X) toute cette portion de code :

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               <td align="center" width="100%" valign="middle">
                  <div class="maintitle">{MAIN_SITENAME}</div>


                  <span class="gen">{SITE_DEscriptION}
</span>
               </td>
               

               
               <td align="center" width="100%" valign="middle">
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

                  <div class="maintitle">{MAIN_SITENAME}</div>


                  <span class="gen">{SITE_DEscriptION}</span>
               </td>
               

               
               <td align="center" width="100%" valign="middle">
                  <div class="maintitle">{MAIN_SITENAME}</div>


                  <span class="gen">{SITE_DEscriptION}
</span>
               </td>
               <td>
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
               </td>
               
            </tr>
         </table>

Ce code correspond à la bannière peu importe sa position, gauche, droite ou au centre, ainsi que la description du forum et le titre. Il aurait été plus compliqué de diviser le tableau qui contient la bannière, le titre et la description. J’ai sélectionné cette portion de code pour plus de facilité. Attention, le tutoriel a été testé uniquement selon le réglage Forumactif pour centrer la bannière sur la page, je vous recommande de centrer le logo via Panneau d’administration > onglet : Affichage > menu : Page d’accueil > option :En-tête & Navigation, position du logo : centré.
Collez le code que vous avez coupé à l’étape précédente strictement par-dessus la ligne :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Toute le code HTML est maintenant en place.
Une fois cela fait, il nous faudra modifier un peu le CSS pour éviter de voir une marge entre la fenêtre du navigateur et votre bannière. Rendez-vous dans Panneau d’administration > onglet : Affichage > menu : Images et Couleurs > option : Couleurs > Feuille de style CSS.

Collez-y le code suivant :

Code:

body {
margin : 0px;
}

Attention: Si vous avez déjà le code body { dans votre CSS, ajoutez la ligne de code margin : 0px; avant }.

L’espace entre la bannière et la fenêtre n’est plus. Votre bannière est parfaitement intégrée au fond image que vous avez choisi !
Il ne vous reste plus qu’à mettre la bannière et le fond comme à l’habitude, dans la gestion des images de votre Panneau d’administration.

Le tour est joué !

FAQ

Q

Pourquoi ai-je deux fois ma bannière superposée ?

R

C'est peut-être parce qu'au lieu de "couper" (CTRL + X) tu as copié le code ci-dessous sans le supprimer :

Code:: <table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>



<td align="center" width="100%" valign="middle">
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}</span>
</td>



<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>
<td>
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
</td>

</tr>
</table>

Ensuite, il est probable que tu as collé le code ci-dessus au-dessus de ce code :

Code:: <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Si c'est le cas, il faut Couper et non Copier/Collé.

Q

Comment faire pour ravoir ma bannière comme avant le tutoriel ?

R

Il faut couper (CTRL + X) le code suivant :

Code:: <table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>



<td align="center" width="100%" valign="middle">
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}</span>
</td>



<td align="center" width="100%" valign="middle">
<div class="maintitle">{MAIN_SITENAME}</div>

<span class="gen">{SITE_DEscriptION}
</span>
</td>
<td>
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
</td>

</tr>
</table>

Qui se trouve au-dessus de celui-ci :

Code:: <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Puis copie le code que tu as coupé en dessous du code ci-dessus et enregistre. Si aucune modification n'a été subie mise à part celle-ci, tu peux aussi cliquer sur " Profiter d’une bannière de fond ET d’un fond Supprimer

Profiter d’une bannière de fond ET d’un fond Supprimer

" en face du Template pour qu'il se remette par défaut. Ce qui t'évitera de faire tout ce qu'il y a au-dessus.

Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml

Bonjour, je sais pas si c'est moi, mais je crois que les codes ont changé... J'arrive pas à trouver.

Profiter d’une bannière de fond ET d’un fond

Profiter d’une bannière de fond ET d’un fond

Sujets similaires

Sujets similaires

Partenaires Or