Header
Partagez | 

[Xooit] Faire une barre de nav' avec images

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

Message Sujet: [Xooit] Faire une barre de nav' avec images   Lun 14 Mar - 10:41

Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment transformer le texte de notre barre de navigation en image.

Pour cela, vous allez devoir travailler dans le template overall_header.tpl.

On y va ?

Je repère le code à modifier et je le comprends



1/ Repérez cette partie du code (ou quelque chose qui y ressemble):

Code:
<tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <a href="{U_FAQ}" class="mainmenu"><img src="http://img1.xooimage.com/files/i/n/interrogation-1--2e754.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">   <a href="{U_SEARCH}" class="mainmenu"><img src="http://img9.xooimage.com/files/i/c/icon_mini_search-30d7d.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>   <a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-30d7e.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>   <a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img3.xooimage.com/files/i/c/icon_mini_groups-30d7f.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a> 
                  <!-- BEGIN switch_user_logged_out -->
                   <a href="{U_REGISTER}" class="mainmenu"><img src="http://img5.xooimage.com/files/i/c/icon_mini_register-30d80.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span> 
                  <!-- END switch_user_logged_out -->
                  </td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-30d81.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>   <a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_message-30d82.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>   <a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img4.xooimage.com/files/i/c/icon_mini_login-30d83.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a> </span></td>
               </tr>

2/ C'est ce morceau de code que nous allons modifier. Essayons de le comprendre un peu :

Code:
 <a href="{U_FAQ}" class="mainmenu"><img src="http://img1.xooimage.com/files/i/n/interrogation-1--2e754.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a> => bouton FAQ

<a href="{U_SEARCH}" class="mainmenu"><img src="http://img9.xooimage.com/files/i/c/icon_mini_search-30d7d.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a> => Bouton chercher

<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-30d7e.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a> => Bouton liste des membres

<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img3.xooimage.com/files/i/c/icon_mini_groups-30d7f.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a> => Bouton liste des groupes
 
<a href="{U_REGISTER}" class="mainmenu"><img src="http://img5.xooimage.com/files/i/c/icon_mini_register-30d80.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a> => Bouton s'inscrire

<a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-30d81.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>

<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_message-30d82.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>

<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img4.xooimage.com/files/i/c/icon_mini_login-30d83.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a> => Bouton déconnexion

<!-- BEGIN switch_user_logged_out --> code <!-- END switch_user_logged_out --> => Affiché uniquement si le membre n'est pas connecté

et dans la même idée

<!-- BEGIN switch_user_logged_in -->  code <!-- END switch_user_logged_in -->  => Affiché uniquement si le membre est connecté

Et ajoutons aussi ce bouton :

<a href="{U_INDEX}" class="mainmenu">{L_INDEX}</a> => Bouton index

Jusque là facile non ?

Je prépare mon code en remplaçant les liens par des images



3/ On va maintenant remplacer chaque élément par son image (ici, je vais me servir des images d'un thème réalisé par Art'Ke pour le forum Hugo Lloris).

*** Les boutons visibles qu'on soit inscrit ou non

-> Pour le bouton index :
Code:
<a href="{U_INDEX}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t10.gif" border="0" alt="Index" hspace="3" /></a>

-> Pour le bouton FAQ
Code:
<a href="{U_FAQ}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t12.gif" border="0" alt="Faq" hspace="3" /></a>

-> Pour le bouton rechercher
Code:
<a href="{U_SEARCH}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t13.gif" border="0" alt="chercher" hspace="3" /></a>

-> Pour le bouton groupes
Code:
<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t15.gif" border="0" alt="Groupe" hspace="3" /></a>

-> Pour le bouton membres
Code:
<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t14.gif" border="0" alt="Membres" hspace="3" /></a>

*** Les boutons visibles uniquement si l'on n'est pas connecté

-> Pour le bouton s'inscrire
Code:
 <!-- BEGIN switch_user_logged_out -->
  <a href="{U_REGISTER}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/s_insc10.gif" border="0" alt="S'inscrire" hspace="3" /></a>
  <!-- END switch_user_logged_out -->

-> Pour le bouton connexion
Code:
<!-- BEGIN switch_user_logged_out -->
  <a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t18.gif" border="0" alt="Se connecter" hspace="3" /></a>
  <!-- END switch_user_logged_out -->

*** Les boutons visibles uniquement si l'on est connecté

-> Pour le bouton profil
Code:
<!-- BEGIN switch_user_logged_in -->
  <a href="{U_PROFILE}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t16.gif" border="0" alt="Profil" hspace="3" /></a>
  <!-- END switch_user_logged_in -->

-> Pour le bouton déconnexion
Code:
 <!-- BEGIN switch_user_logged_in -->
  <a href="/login.php?logout=true" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/off10.jpg" border="0" alt="se déconnecter" hspace="3" /></a>
  <!-- END switch_user_logged_in -->

-> Pour le bouton MP : ici ça se complique un peu, car il va falloir vérifier si on a des MP ou non. Voici le code (nous allons l'expliquer ensuite Smile )
Code:
<!-- BEGIN switch_user_logged_in --><a href="{U_PRIVATEMSGS}" class="mainmenu"><!-- IF PRIVATE_MESSAGE_INFO == "Vous n’avez pas de nouveaux messages" || PRIVATE_MESSAGE_INFO == "You have no new messages" --><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t17.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ELSE --><img src="http://i66.servimg.com/u/f66/12/46/69/40/new_mp11.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ENDIF --></a>
  <!-- END switch_user_logged_in -->

comprenons le un peu Smile

Code:
<!-- BEGIN switch_user_logged_in -->
-> ce code ne sera visible que si je suis connectée

Code:
<a href="{U_PRIVATEMSGS}" class="mainmenu">
-> si je clique sur ce bouton, je vais dans ma boite MP

Code:
<!-- IF PRIVATE_MESSAGE_INFO == "Vous n’avez pas de nouveaux messages" || PRIVATE_MESSAGE_INFO == "You have no new messages" -->
-> Si on m'indique que je n'ai pas de nouveau message

Code:
<img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t17.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" />
-> j'affiche le bouton MP "normal"

Code:
<!-- ELSE -->
-> Sinon (à comprendre "si j'ai un ou plusieurs nouveaux messages")

Code:
<img src="http://i66.servimg.com/u/f66/12/46/69/40/new_mp11.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" />
-> j'affiche le bouton "nouveau MP"

Code:
<!-- ENDIF -->
-> Mon test est terminé

Code:
</a>
  <!-- END switch_user_logged_in -->
-> Je referme le lien (a) et je ferme la partie du code uniquement visible si je suis connectée.

J'intègre tout ça dans mon template



Maintenant que nos codes sont préparés, il vous suffit de remplacer ça :

Code:
<tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <a href="{U_FAQ}" class="mainmenu"><img src="http://img1.xooimage.com/files/i/n/interrogation-1--2e754.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">   <a href="{U_SEARCH}" class="mainmenu"><img src="http://img9.xooimage.com/files/i/c/icon_mini_search-30d7d.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>   <a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-30d7e.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>   <a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img3.xooimage.com/files/i/c/icon_mini_groups-30d7f.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a> 
                  <!-- BEGIN switch_user_logged_out -->
                   <a href="{U_REGISTER}" class="mainmenu"><img src="http://img5.xooimage.com/files/i/c/icon_mini_register-30d80.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span> 
                  <!-- END switch_user_logged_out -->
                  </td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> <a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-30d81.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>   <a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_message-30d82.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>   <a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img4.xooimage.com/files/i/c/icon_mini_login-30d83.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a> </span></td>
               </tr>

par ça :

Code:
<tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t10.gif" border="0" alt="Index" hspace="3" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t12.gif" border="0" alt="Faq" hspace="3" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t13.gif" border="0" alt="chercher" hspace="3" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t14.gif" border="0" alt="Membres" hspace="3" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t15.gif" border="0" alt="Groupe" hspace="3" /></a>
  <!-- BEGIN switch_user_logged_out -->
  <a href="{U_REGISTER}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/s_insc10.gif" border="0" alt="S'inscrire" hspace="3" /></a>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <a href="{U_PROFILE}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t16.gif" border="0" alt="Profil" hspace="3" /></a>
  <!-- END switch_user_logged_in -->
  <!-- BEGIN switch_user_logged_in --><a href="{U_PRIVATEMSGS}" class="mainmenu"><!-- IF PRIVATE_MESSAGE_INFO == "Vous n’avez pas de nouveaux messages" || PRIVATE_MESSAGE_INFO == "You have no new messages" --><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t17.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ELSE --><img src="http://i66.servimg.com/u/f66/12/46/69/40/new_mp11.gif" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ENDIF --></a>
  <!-- END switch_user_logged_in -->
  <!-- BEGIN switch_user_logged_out -->
  <a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/sans-t18.gif" border="0" alt="Se connecter" hspace="3" /></a>
  <!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <a href="/login.php?logout=true" class="mainmenu"><img src="http://i66.servimg.com/u/f66/12/46/69/40/off10.jpg" border="0" alt="se déconnecter" hspace="3" /></a>
  <!-- END switch_user_logged_in --></span></td>
               </tr>

Evidemment, vous pouvez aisément changer de place les éléments de votre barre de nav', maintenant que vous avez compris à quoi correspond chaque élément Wink

Bon codage Very Happy




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].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[Xooit] Faire une barre de nav' avec images" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Faire une barre de nav' avec images
Page 1 sur 1
 Sujets similaires
-
» 00 "Faire un cube décoré, avec des images ou des photos"
» Impossible de faire une M.A.J avec Avira [Résolu]
» comment faire avec la carte sd
» Peut on faire des ticket a gratter?
» Faire reconnaitre son GPS Garmin avec la dernière version de firefox.
Réponse rapide

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