Ishimaru-Design

Si vous voulez avoir une bannière dans le même genre qu'ici, avec le texte caché, je vous donne l'astuce pour l'appliquer sur votre forum Connectix Boards.

Préparer la bannière

Avant tout, il faut que votre bannière se prête à un rallongement, comme celle de ce site, puisqu'on aura besoin de prélever un pixel de large à partir de l'extrême-droite de votre bannière.

Sous votre logiciel de graphisme, vous pouvez le prélever, soit en utilisant une sélection rectangulaire avec un gros zoom, soit en utilisant le redimensionnement (que je trouve plus simple à faire que la sélection)..

Placer la bannière

Maintenant que vous avez votre bannière (banner.png) et sa rallonge (banner-repeat.png), on est maintenant prêt à le placer

Ouvrez le fichier /skins/{votre_skin}/style.css (remplacer {votre_skin} par le nom de votre skin, que ce soit Zephyr ou un skin personnalisé).

Vous cherchez les lignes suivantes :

/* Elément d'en-tête (div) */
#header {
   height:100px; /*Modifier la hauteur selon la bannière*/
   text-indent:130px; /*Vu qu'on cache le texte, ceci n'est plus nécessaire*/
   margin:0 0 10px 0;
   background:url(header.gif) top left no-repeat; /*changer "header.gif" pour "banner.png" et "no-repeat" par "repeat-x"*/
}
/* Lien d'en-tête */
a#headerlink {
   display:block;
   line-height:60px;
   padding-left:20px; /*changer la valeur pour 0px*/
   font-weight:normal;
   font-family:"Trebuchet MS","Century Gothic",Arial,serif;
   background: url("banner.png") top left no-repeat;
   height: XXXpx; /*Hauteur selon la bannière*/
   width: XXXpx; /*Largeur selon la bannière*/
   margin: 0px; /*Pour enlever tout espace qui pourrait nuire à l'affichage*/
}

En rouge : Ces lignes sont à supprimer
En bleu-vert : Ces lignes sont à modifier
En mauve : Ces lignes sont à ajouter
Vous suivez les commentaires que j'ai ajoutés pour les modifications.

Cacher le texte

Si votre bannière a déjà un texte intégré, il faut pouvoir cacher le texte brut qui s'affiche.

Il existe plusieurs façons, mais en me documentant, il se trouve que l'utilisation de "display: none;" et "visibility: hidden;" n'est pas aussi appropriée qu'on ne le pense, car les textes se retrouvent cachés même pour la plupart des navigateurs textuels.  On peut aussi le cacher avec un text-indent, mais il faut utiliser une valeur négative très élevée pour éviter les bugs de certains navigateurs (dont IE :P).

Je vais donc vous montrer la méthode qu'utilise Connectix Boards pour cacher ses textes pour les boutons de son skin par défaut.

Pour le texte du header, vous ajoutez simplement ces lignes dans la même feuille de style (style.css) :
h1 #headerlink span
{
position: absolute;
top: -500px;
}

Cela positionne le texte selon le coin en haut à gauche de la page, puis on le fait sortir de l'écran avec une valeur négative pour la propriété "top".

Vous pouvez utiliser cette méthode pour votre site, bien que vous pouvez également mettre la bannière avec la balise <img /> avec l'attribut alt, mais l'avantage de la méthode que je vous ai montrée, c'est que vous n'aurez pas besoin d'intervenir sur le code xHTML lorsque vous changez le design, et c'est plus pratique si vous utilisez plusieurs feuilles de style ayant chacun une bannière différente.