Header

Partagez | 

[ForumActif] Mettre une "bannière fond"

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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
 Sujets similaires
-
» Comment mettre une bannière sur mon forum
» Mettre une bannière à chaque catégorie
» Mettre image de fond dans les posts
» Mettre une bannière-fond un fond
» Problème d'affichage bannière fond transparent
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens