Header
Partagez | 

[Xooit] Comment mettre un lien à votre bannière ?

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Chou'

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

Message Sujet: [Xooit] Comment mettre un lien à votre bannière ?   Dim 13 Avr - 14:37

Comment mettre un lien à votre bannière sur Xooit ?



Explications


La démarche est simple et rapide cependant, je vous recommande d'avoir quelques petites notions de langage Html afin de vous y retrouver, nous verrons pourquoi plus loin.

La plupart des utilisateurs Xooit ajoute l'image d'en-tête (bannière peu importe) via "modifier les images" que vous avez ci-contre sur la gauche du panneau d'administration dans l'onglet "Thème" :

Je n'ai rien contre cette démarche même si avec de l'expérience sur Xooit, je me suis rendue compte que parfois il y avait des bugs quand on ajoutait une bannière par ce biais.

Sachez que lorsque vous ajoutez votre bannière via "Modifier les images", un code html s'ajoute sur un template ! Nous allons donc nous y rendre de ce pas !

Passons à l'action !


Comme j'ai pu le dire précédemment, nous allons nous aventurer dans le milieu obscure des templates. Les templates sont tout simplement les pages du forum, le code, les spécifications etc.

Attention : si votre thème test est vide, cliquez sur "Installer un thème" puis sur "Copier le thème normal dans le thème test".
Rejoignez la page "Modifier les templates" sur le Thème de Test. Evitez de travailler directement sur le Thème normal pour des raisons de sécurité.

Vous obtenez ceci :
Note : ne vous fiez pas au nom du .css. Le fichier Css est spécifique à chaque thème, il est donc tout à fait normal si vous ne le voyez pas dans votre liste. Ici, mon thème est le Saphic.

C'est la partie haute de votre forum, correspondant au "header", qui va nous intéresser. Vous aller donc chercher dans la liste des templates "overall_header.tpl". Tout est classé par ordre alphabétique.

Cliquez dessus pour arriver ici :

Dans le code, cherchez :
Code:
<td class="bodyline">

En-dessous de ceci, vous aurez :
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
            <tr>
               <td align="center"><img src="http://img.xooimage.com/files57/f/7/d/nomdetonimage.png" alt="nomimage"></td>            
</tr>

Evidemment, le code qui est ici est un exemple de la forme sous laquelle vous la trouverez.

Ce qui va nous intéresser ici, c'est l'image que l'on retrouve ici :

Code:
<img src="http://img.xooimage.com/files57/f/7/d/nomdetonimage.png" alt="nomimage">

Puis un lien comme ceci :

Code:
<a href="http://www.school-of-pub.net/"></a>

Le reste du code correspond à des balises de tableau en HTML, vous pouvez vous référer à ce cours-ci pour obtenir plus d'informations.

Le tuto est bientôt fini, courage !

Nous allons ajouter le lien autour des balises "img". 
Repérez bien où s'ouvrent et se ferment l'image et le lien puis obtenez un code comme ci-dessous :
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
            <tr>
               <td align="center"><a href="http://www.school-of-pub.net/"><img src="http://img.xooimage.com/files57/f/7/d/nomdetonimage.png" alt="nomimage"></a></td>
            </tr>
Pensez à changer les liens sinon vous allez atterrir sur SoP et n'aurez pas d'image, ça serait malin !

Une fois la modification faites, vous pouvez enregistrer car c'est terminé !




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


Merci Askip, M-Animals, Soihra, Elu', Bunny, Agn', Cheshire, .Søma, Mewyn :$:
 
Ex-pseudo : Couette - Choubidou
[Xooit] Comment mettre un lien à votre bannière ?
Page 1 sur 1
 Sujets similaires
-
» Comment faire un lien vers une autre page du site ?
» comment mettre un numero exacte
» Comment mettre une signature qui apparaîtra à chaque fois qu'on poste
» Comment mettre des photos dans les GPS 62/78
» Comment mettre une carte dans Basecamp
Réponse rapide

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