En effet, l'image de bannière se trouve directement dans une cellule du header, ce qui implique l'affichage de l'image entière. Si elle est trop grande, même avec un forum en pourcentage, proportionnel à la résolution d'écran du visiteur, ou à l'utilisation du mode fenêtré de son navigateur, elle sera entièrement affichée, et il y aura un dépassement très peu esthétique à droite, ainsi qu'un ascenseur en bas d'écran.
Pour éviter cela, il faut mettre l'image en fond de cellule (en background) à l'aide d'une css supplémentaire.
Dans les options du style, il y a en bas deux cases de définitions css supplémentaires. Ne jamais toucher à la première, au risque d'avoir de gros problèmes de mises en page lors de la mise à jour éventuelle de vBulletin. Dans la seconde case, on peut rajouter autant de classes css que l'on souhaite, selon ses besoins.
Pour l'image de bannière, le logo en fait, nous allons créer une classe appelée logo :
.logo { background: #000000 url(style/misc/logo.jpg) no-repeat; width: 100%; height: 150px; }
où :
background: #000000 est la couleur de fond de votre forum
url(style/misc/logo.jpg) est l'url de votre bannière
height: 150px est la hauteur de votre bannière.
Voilà pour la définition de la classe. Il ne reste plus qu'à l'appeler dans le header.
Voici le code de base (non modifié) du header, dans le style par défaut de vBulletin :
Code HTML:
<!-- logo --> <a name="top"></a> <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> <tr> <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td> <td align="$stylevar[right]" id="header_right_cell"> <if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /> </if> </td> </tr> </table> <!-- /logo --> <!-- content table --> $spacer_open $_phpinclude_output $ad_location[ad_header_end]
Pour le premier <td...>, il suffit de le remplacer par :
Code HTML:
<td class="logo"></td>
Code HTML:
<!-- logo --> <a name="top"></a> <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="logo"></td> </tr> </table> <!-- /logo --> <!-- content table --> $spacer_open $_phpinclude_output $ad_location[ad_header_end]
Désormais, votre bannière, quelle que soit sa largeur, ne dépassera plus à droite de votre forum. Ne s'affichera que la partie nécessaire pour l'écran du visiteur.