Header
Partagez | 

[ForumActif] Mettre une "bannière fond"

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: [ForumActif] Mettre une "bannière fond"   Mar 17 Avr - 21:41

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci

Spoiler:
 

Les images utilisées sont réalisées par Meirera qui les a créées pour sa formation gimp

Vous allez voir, c'est très simple.

IdeaPré-requis :
  • ce tutoriel est destiné à des forums en phpbb2,
  • vous devez avoir accès aux templates,
  • vous devez avoir en votre possession un header qui se répète correctement horizontalement et une image de fond,
  • aucune connaissance en html et css n'est nécessaire ici.


On y va.

1/ Dans le template "overall_header", nous allons faire 2 manip :
-> supprimer la partie qui affiche la bann. Pour cela, repèrez ceci
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <!--<div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>-->
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>
et supprimez le (attention, cela supprimera aussi la description du site)

-> Ajouter un bloc qui va afficher le header. Pour cela, on va placer ça
Code:
<div id="banniere" onclick="document.location.href='/forum'"> </div>
juste avant
Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

2/ Dans le CSS, on va ajouter :
Code:
body{
   margin:auto;
   }

div#banniere{
   background-image:url('lien_de_votre_bann');
   background-repeat:repeat-x;
   width:100%;
   height:hauteur_de_votre_banniere px;
   background-position: top center;
   }

Spoiler:
 

3/ Dans les images, on va mettre l'image de fond que nous avons également dans la partie "image de fond de page"
Spoiler:
 

Et c'est terminé Smile




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[ForumActif] Mettre une "bannière fond"
Page 1 sur 1
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+