It is currently Sun 25 Sep 2016 - 02:16 - créer un forum

[Tuto] Installer une barre de navigation complète (v alpha)

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 316, 17, 18  >

[Tuto] Installer une barre de navigation complète (v alpha)
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 01:35    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

PublicitéSupprimer les publicités ?
Informations sur le tutoriel
NomBarre de navigation classique (toutes les options)
AuteurAn0nyme : Contactez-moi
VersionAlpha (en construction)
DescriptionPermet d'installer une barre de navigation très complète (toutes variables peuvent être utilisées) dans 3 choix différents (images, textes et icônes, images recouvertes du texte)
Exemplebarre de navigations en images / barre de navigation textes et icônes / Pas d'exemple pour la barre de navigation en images + textes
Défaut(s)
  • Les modifications simples ne fonctionnent qu'avec les thèmes dérivant du thème Subsilver, mais cela peut être appliqué à tous les thèmes avec une démarche plus personnalisée.

Difficulté
  • Installation: novice/initié/adepte
  • Compréhension: novice/initié/adepte

Templates à modifier
  • overall_header.tpl

Testé sur
  • Navigateurs
    • Firefox 3.0.5
    • Internet Explorer 7

  • Thèmes Xooit
    • Subsilver
    • Tolède


A utiliser avec
  • N/A

A ne pas utiliser avec
  • N/A

Notes
  • Les barres de navigation sont complètes et il n'y a donc plus besoin de dissocier des images.

SOMMAIRE
  1. I- Préambule
  2. II- Remplacer votre barre de navigation par la barre de navigation en images (full version)
  3. III- Remplacer votre barre de navigation par la barre de navigation en textes

  4. IV- Remplacer votre barre de navigation par la barre de navigation en textes et images

  5. IV- Annexe


*********************************************




I- Préambule



Ce tutoriel étant très long d'apparence (en réalité c'est juste qu'il propose plusieurs choix) je vous propose un préambule pour éviter de vous perdre.
En premier lieu vous n'aurez que 3 chapitres à lire :
-Le préambule
-L'une des possibilités de modification proposée ("II-" ou "III-a)" ou "III-b)" ou "IV-a)" ou "IV-b)")
-L'annexe


Pour vous faciliter la navigation il vous suffit de cliquer sur les titres dans le sommaire afin de vous y rendre, à chaque fin de chapitre vous trouverez un lien "retourner au sommaire" qui comme son nom l'indique vous ramène au sommaire.

Mais qu'est-ce donc la barre de navigation?
Je ne vais pas vous donner une définition car ce n'est pas ce qui importe, en fait la vraie question est : où se situe t-elle?
La barre de navigation se trouve en général en haut de votre forum et se compose en partie des liens (ou images cliquables) suivant(es) : Faq, Rechercher, Membres, Groupes, ...etc.

Ces modifications (sans interprétation) ne s'appliquent qu'aux thèmes dérivant du thème d'origine des forums phpBB : le thème Subsilver.
Quand vous installez un forum, le thème par défaut est justement un thème dérivant du thème original Subsilver, ce tuto y est donc applicable.
Néanmoins il n'y a pas de règle définissant un thème dérivant du thème Subsilver, ceci sert juste à désigner un thème dont les lignes de code (définissant la structure) à rechercher sont équivalentes, seuls les lignes de code définissant l'aspect (police d'écriture, écriture, images) peuvent différer.
Ces lignes sont essentiellement des lignes de codes appartenant au langage HTML, seuls les tags (ou balises) structuraux de référence (tableau : <table>, division : <­div>, etc...) sont invariants alors que leurs attributs (cellspacing=, width=, src=, ...etc.), valeurs d'attribut ("0", "100%", "lien hypertexte", ...etc.) et contenu (texte, image, ...etc.) sont variables.

Ce tuto étant ouvert à tous (novices comme experts) je vais vous proposer un moyen de repérer si votre forum a un thème dérivant du fameux Subsilver.
-Si votre barre de navigation est essentiellement en images, assurez-vous que toutes les images sont à la suite (sur une seule ligne à moins que les images soient trop grandes et donc elles se retrouvent sur deux lignes).
-Si votre barre de navigation est textuelle, assurez-vous que les liens sont dans un même bloque se trouvant en dessous de votre nom de forum / description / bannière. Le bloc ne doit pas présenter de discontinuité, c'est à dire de changement de couleur, d'images ou une organisation des liens trop complexe (ceci se caractérise souvent par la présence des textes de connexion/déconnexion dans un bloc mettant à l'écart ces derniers).

Ce tuto vous donne plusieurs possibilités de barre de navigation, voici une petite présentation de ces types:

II : Une ligne d'images faites par vos soins (ou par quelqu'un d'autre) sur lesquelles sont écris les textes (incorporés aux images). Pour que la barre gère plusieurs langues veuillez vous reportez aux barres de type IV. Je vais proposer une variante prenant en charge l'Anglais bientôt.
III-a : Deux lignes sur lesquelles se trouvent des petites icônes du thème Subsilver suivies de leurs textes.
III-b : Deux lignes sur lesquelles se trouvent des petites icônes (les liens sont à ajouter par vos soins) suivies de leurs textes.
IV-a : Une ligne d'images faites par vos soins (ou par quelqu'un d'autre) sur lesquelles sont écris les textes (viennent se superposer sur les images) se trouvant dans les lignes de code. Grâce à un découpage des images, les images se redimmensionnent à la bonne taille par rapport à la longueur du texte. L'intérêt de cette barre est de gagner en fléxibilité, en effet on peut récupérer le texte qui indique le nombre de messages non lus pour le superposer à l'image, ou permettre d'avoir une barre de navigation qui gère les différentes langues proposées.
IV-b : Une ligne comportant tous les textes qui viennent s'afficher sur une image de fond qui se redimmensionne à la bonne longueur et bonne hauteur. L'intérêt de cette barre est de gagner en fléxibilité, en effet on peut récupérer le texte qui indique le nombre de messages non lus pour le superposer à l'image, ou permettre d'avoir une barre de navigation qui gère les différentes langues proposées.


*************************
Revenir au sommaire.




II- Remplacer votre barre de navigation par la barre de navigation en images (full version)




*Installation*

Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl



Cherchez quelque chose qui ressemble à ça : (évidemment vos liens seront différents puisque vous n'avez pas les mêmes icônes)
Code: Sélectionner - Agrandir
<table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_faq-35de8.gif" width="13" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_search-35de9.gif" width="13" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-35dea.gif" width="13" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_groups-35deb.gif" width="13" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp;
                  <!-- BEGIN switch_user_logged_out -->
                  &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_register-35dec.gif" width="13" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&nbsp;
                  <!-- END switch_user_logged_out -->
                  </td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-35ded.gif" width="13" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_message-35dee.gif" width="13" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_login-35def.gif" width="13" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               </tr>
            </table>


Le tout étant d'avoir un code de cette forme :
Code: Sélectionner - Agrandir
<table [...]>
    <tr>
        <td [...]>[...]{U_FAQ}[...]{L_LOGIN_LOGOUT}[...]
        </td>
    </tr>
</table>

Le code doit donc contenir au début la variable {U_FAQ} et à la fin la variable {L_LOGIN_LOGOUT} et donc toutes autres se trouvant entre.

Attention! bien souvent la fin du code "</table>" se présentera comme ça "</table></td>" et il faut bien s'arrêter à "</table>".

Remplacez par :
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="middle" nowrap="nowrap"><a href="{U_INDEX}" class="mainmenu"><img src="LIEN IMAGE INDEX" border="0" alt="{L_INDEX}" /></a><a href="{U_FAQ}" class="mainmenu"><img src="LIEN IMAGE FAQ" border="0" alt="{L_FAQ}" /></a><!-- BEGIN switch_user_logged_in --><a href="{U_PROFILE}" class="mainmenu"><img src="LIEN IMAGE PROFIL" border="0" alt="{L_PROFILE}" /></a><!-- END switch_user_logged_in --><a href="{U_MEMBERLIST}" class="mainmenu"><img src="LIEN IMAGE MEMBRES" border="0" alt="{L_MEMBERLIST}" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="LIEN IMAGE GROUPES" border="0" alt="{L_USERGROUPS}" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="LIEN IMAGE RECHERCHE" border="0" alt="{L_SEARCH}" /></a><!-- BEGIN switch_user_logged_out --><a href="{U_REGISTER}" class="mainmenu"><img src="LIEN IMAGE S'ENREGISTRER" border="0" alt="{L_REGISTER}" /></a><!-- END switch_user_logged_out --><a href="{U_PRIVATEMSGS}" class="mainmenu"><!-- BEGIN switch_user_logged_in --><!-- IF PRIVATE_MESSAGE_INFO == "Vous n’avez pas de nouveaux messages" || PRIVATE_MESSAGE_INFO == "You have no new messages" --><img src="LIEN IMAGE PAS DE NOUVEAU MESSAGE" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ELSE --><img src="LIEN IMAGE NOUVEAU MESSAGE" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- ENDIF --><!-- END switch_user_logged_in --><!-- BEGIN switch_user_logged_out --><img src="LIEN IMAGE CONNECTEZ-VOUS POUR VÉRIFIER VOS MPS" alt="{PRIVATE_MESSAGE_INFO}" border="0" /><!-- END switch_user_logged_out --></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><!-- BEGIN switch_user_logged_out --><img src="LIEN IMAGE CONNEXION" border="0" alt="{L_LOGIN_LOGOUT}" /><!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in --><img src="LIEN IMAGE DECONNEXION" border="0" alt="{L_LOGIN_LOGOUT}" /><!-- END switch_user_logged_in --></a></td>
               </tr>
            </table>

Attention! N'oubliez pas de remplacer les liens d'images.


Sauvegardez


*************************
Revenir au sommaire.




III- Remplacer votre barre de navigation par la barre de navigation en textes


1) avec les icônes (full version)


*Installation*

Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl



Cherchez quelque chose qui ressemble à ça : (évidemment vos liens seront différents puisque vous n'avez pas les mêmes images)
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr><!-- BEGIN switch_user_logged_in -->
                     
                     <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img2.xooimage.com/files/m/e/members-3c084.jpg" width="80" height="66" border="0" alt="{L_MEMBERLIST}" hspace="0" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img5.xooimage.com/files/g/r/groups-3c085.jpg" width="79" height="66" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="http://img6.xooimage.com/files/p/r/profile-3c086.jpg" width="64" height="66" border="0" alt="{L_PROFILE}" hspace="0" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" width="97" height="66" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img9.xooimage.com/files/l/o/logout-3c087.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_in -->
                  <!-- BEGIN switch_user_logged_out -->
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_REGISTER}" class="mainmenu"><img src="http://img2.xooimage.com/files/r/e/register-3c088.jpg" width="116" height="66" border="0" alt="{L_REGISTER}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img5.xooimage.com/files/l/o/login-3c089.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_out -->
                  </span></td>
               </tr>
            </table>


Le tout étant d'avoir un code de cette forme :
Code: Sélectionner - Agrandir
<table [...]>
    <tr>
        <td [...]>[...]{U_FAQ}[...]{L_LOGIN_LOGOUT}[...]
        </td>
    </tr>
</table>

Le code doit donc contenir au début la variable {U_FAQ} et à la fin la variable {L_LOGIN_LOGOUT} et donc toutes autres se trouvant entre.

Attention! bien souvent la fin du code "</table>" se présentera comme ça "</table></td>" et il faut bien s'arrêter à "</table>".

Remplacez par (icônes subsilver):

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


Ou remplacez par (liens icônes à insérer):

Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_INDEX}" class="mainmenu"><img src="LIEN ICONE INDEX" border="0" alt="{L_INDEX}" hspace="3" />Index</a>&nbsp; &nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="LIEN ICONE FAQ" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="LIEN ICONE RECHERCHE" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="LIEN ICONE MEMBRES" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="LIEN ICONE GROUPES" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp; </span></td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><!-- BEGIN switch_user_logged_out -->&nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="LIEN ICONE S'ENREGISTRER" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a>&nbsp;<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in -->&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="LIEN ICONE PROFIL" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp;<!-- END switch_user_logged_in --> &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="LIEN ICONE MESSAGERIE" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="LIEN ICONE CONNEXION" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               </tr>
            </table>

Attention! N'oubliez pas de remplacer les liens d'images des icônes.



Sauvegardez


*************************
Revenir au sommaire.






2) sans les icônes (light version)


*Installation*

Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl



Cherchez quelque chose qui ressemble à ça : (évidemment vos liens seront différents puisque vous n'avez pas les mêmes images)
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr><!-- BEGIN switch_user_logged_in -->
                     
                     <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img2.xooimage.com/files/m/e/members-3c084.jpg" width="80" height="66" border="0" alt="{L_MEMBERLIST}" hspace="0" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img5.xooimage.com/files/g/r/groups-3c085.jpg" width="79" height="66" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="http://img6.xooimage.com/files/p/r/profile-3c086.jpg" width="64" height="66" border="0" alt="{L_PROFILE}" hspace="0" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" width="97" height="66" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img9.xooimage.com/files/l/o/logout-3c087.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_in -->
                  <!-- BEGIN switch_user_logged_out -->
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_REGISTER}" class="mainmenu"><img src="http://img2.xooimage.com/files/r/e/register-3c088.jpg" width="116" height="66" border="0" alt="{L_REGISTER}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img5.xooimage.com/files/l/o/login-3c089.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_out -->
                  </span></td>
               </tr>
            </table>


Le tout étant d'avoir un code de cette forme :
Code: Sélectionner - Agrandir
<table [...]>
    <tr>
        <td [...]>[...]{U_FAQ}[...]{L_LOGIN_LOGOUT}[...]
        </td>
    </tr>
</table>

Le code doit donc contenir au début la variable {U_FAQ} et à la fin la variable {L_LOGIN_LOGOUT} et donc toutes autres se trouvant entre.

Attention! bien souvent la fin du code "</table>" se présentera comme ça "</table></td>" et il faut bien s'arrêter à "</table>".

Remplacez par :
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_INDEX}" class="mainmenu">Index</a>&nbsp; &nbsp;<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu">{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp; </span></td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><!-- BEGIN switch_user_logged_out -->&nbsp;<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a>&nbsp;<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in -->&nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp;<!-- END switch_user_logged_in --> &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu">{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               </tr>
            </table>



Sauvegardez


*************************
Revenir au sommaire.




IV- Remplacer votre barre de navigation par la barre de navigation en textes et images


1) Une image par texte (full version)


*Installation*

Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl



Cherchez quelque chose qui ressemble à ça : (évidemment vos liens seront différents puisque vous n'avez pas les mêmes images ou icônes)

Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr><!-- BEGIN switch_user_logged_in -->
                     
                     <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img2.xooimage.com/files/m/e/members-3c084.jpg" width="80" height="66" border="0" alt="{L_MEMBERLIST}" hspace="0" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img5.xooimage.com/files/g/r/groups-3c085.jpg" width="79" height="66" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="http://img6.xooimage.com/files/p/r/profile-3c086.jpg" width="64" height="66" border="0" alt="{L_PROFILE}" hspace="0" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" width="97" height="66" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img9.xooimage.com/files/l/o/logout-3c087.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_in -->
                  <!-- BEGIN switch_user_logged_out -->
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_REGISTER}" class="mainmenu"><img src="http://img2.xooimage.com/files/r/e/register-3c088.jpg" width="116" height="66" border="0" alt="{L_REGISTER}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img5.xooimage.com/files/l/o/login-3c089.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_out -->
                  </span></td>
               </tr>
            </table>


Code: Sélectionner - Agrandir
<table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_faq-35de8.gif" width="13" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_search-35de9.gif" width="13" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-35dea.gif" width="13" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_groups-35deb.gif" width="13" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp;
                  <!-- BEGIN switch_user_logged_out -->
                  &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_register-35dec.gif" width="13" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&nbsp;
                  <!-- END switch_user_logged_out -->
                  </td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-35ded.gif" width="13" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_message-35dee.gif" width="13" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_login-35def.gif" width="13" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               </tr>
            </table>

Le tout étant d'avoir un code de cette forme :
Code: Sélectionner - Agrandir
<table [...]>
    <tr>
        <td [...]>[...]{U_FAQ}[...]{L_LOGIN_LOGOUT}[...]
        </td>
    </tr>
</table>

Le code doit donc contenir au début la variable {U_FAQ} et à la fin la variable {L_LOGIN_LOGOUT} et donc toutes autres se trouvant entre.

Attention! bien souvent la fin du code "</table>" se présentera comme ça "</table></td>" et il faut bien s'arrêter à "</table>".

Remplacez par :
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr>
               <td align="center" valign="middle" nowrap="nowrap">
                  <table cellspacing="0" cellpadding="0" border="0">
                     <tr>
                        <td align="center" valign="middle" class="imgLeft1">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_INDEX}" class="mainmenu">Index</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_SEARCH}" class="mainmenu">{L_SEARCH}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <!-- BEGIN switch_user_logged_in --><td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td><!-- END switch_user_logged_in -->
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td>
                        <!-- BEGIN switch_user_logged_out --><td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a>&nbsp;</span></td><td align="center" valign="middle" class="imgRight2">&nbsp;</td><!-- END switch_user_logged_out -->
                        <td align="center" valign="middle" class="imgLeft2">&nbsp;</td><td align="center" valign="middle" class="imgCenter"><span class="mainmenu">&nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu">{L_LOGIN_LOGOUT}</a>&nbsp;</span></span></td><td align="center" valign="middle" class="imgRight1">&nbsp;</td>
                     </tr>
                  </table>
               </td>
               </tr>
            </table>

Ajoutant avant "</head>" :
Code: Sélectionner - Agrandir
<style type="text/css">
td.imgLeft1 {
background-image: url('LIEN IMAGE BORD EXTREME GAUCHE');
background-repeat: no-repeat;
background-position: center right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.imgLeft2 {
background-image: url('LIEN IMAGE BORD GAUCHE');
background-repeat: no-repeat;
background-position: center right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.imgCenter {
background-image: url('LIEN IMAGE MILIEU');
background-repeat: no-repeat;
background-position: center center;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.imdRight1 {
background-image: url('LIEN IMAGE BORD EXTREME DROITE');
background-repeat: no-repeat;
background-position: center right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.imgRight2 {
background-image: url('LIEN IMAGE BORD DROIT');
background-repeat: no-repeat;
background-position: center right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
</style>



Sauvegardez


*************************
Revenir au sommaire.




2) Une image (barre) pour tous les textes (light version)


*Installation*

Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel. Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.




Ouvrez le template overall_header.tpl



Cherchez quelque chose qui ressemble à ça : (évidemment vos liens seront différents puisque vous n'avez pas les mêmes images ou icônes)

Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
               <tr><!-- BEGIN switch_user_logged_in -->
                     
                     <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img2.xooimage.com/files/m/e/members-3c084.jpg" width="80" height="66" border="0" alt="{L_MEMBERLIST}" hspace="0" /></a><a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img5.xooimage.com/files/g/r/groups-3c085.jpg" width="79" height="66" border="0" alt="{L_USERGROUPS}" hspace="0" /></a><a href="{U_PROFILE}" class="mainmenu"><img src="http://img6.xooimage.com/files/p/r/profile-3c086.jpg" width="64" height="66" border="0" alt="{L_PROFILE}" hspace="0" /></a><a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="{PRIVMSG_IMG}" width="97" height="66" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img9.xooimage.com/files/l/o/logout-3c087.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_in -->
                  <!-- BEGIN switch_user_logged_out -->
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu"><img src="http://img5.xooimage.com/files/h/o/home-3c081.jpg" width="85" height="66" border="0" alt="{L_INDEX}" hspace="0" /></a><a href="{U_FAQ}" class="mainmenu"><img src="http://img6.xooimage.com/files/f/a/faq-3c082.jpg" width="44" height="66" border="0" alt="{L_FAQ}" hspace="0" /></a><a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/s/e/search-3c083.jpg" width="109" height="66" border="0" alt="{L_SEARCH}" hspace="0" /></a><a href="{U_REGISTER}" class="mainmenu"><img src="http://img2.xooimage.com/files/r/e/register-3c088.jpg" width="116" height="66" border="0" alt="{L_REGISTER}" hspace="0" /></a><a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img5.xooimage.com/files/l/o/login-3c089.jpg" width="123" height="66" border="0" alt="{L_LOGIN_LOGOUT}" hspace="0" /></a></span></td>
                   <!-- END switch_user_logged_out -->
                  </span></td>
               </tr>
            </table>


Code: Sélectionner - Agrandir
<table cellspacing="0" cellpadding="2" border="0">
               <tr>
                  <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_faq-35de8.gif" width="13" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_search-35de9.gif" width="13" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-35dea.gif" width="13" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_groups-35deb.gif" width="13" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp;
                  <!-- BEGIN switch_user_logged_out -->
                  &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="http://img7.xooimage.com/files/i/c/icon_mini_register-35dec.gif" width="13" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&nbsp;
                  <!-- END switch_user_logged_out -->
                  </td>
               </tr>
               <tr>
                  <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-35ded.gif" width="13" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_message-35dee.gif" width="13" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img10.xooimage.com/files/i/c/icon_mini_login-35def.gif" width="13" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               </tr>
            </table>

Le tout étant d'avoir un code de cette forme :
Code: Sélectionner - Agrandir
<table [...]>
    <tr>
        <td [...]>[...]{U_FAQ}[...]{L_LOGIN_LOGOUT}[...]
        </td>
    </tr>
</table>

Le code doit donc contenir au début la variable {U_FAQ} et à la fin la variable {L_LOGIN_LOGOUT} et donc toutes autres se trouvant entre.

Attention! bien souvent la fin du code "</table>" se présentera comme ça "</table></td>" et il faut bien s'arrêter à "</table>".

Remplacez par :
Code: Sélectionner - Agrandir
            <table cellspacing="0" cellpadding="2" border="0">
            <tr>
               <td class="cornerTL">&nbsp;</td>
               <td class="top1">&nbsp;</td>
               <td class="cornerTR">&nbsp;</td>
            </tr>
            <tr>
               <td class="left1">&nbsp;</td>
               <td class="middle1" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_INDEX}" class="mainmenu">Index</a>&nbsp; &nbsp;<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a>&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu">{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp; <!-- BEGIN switch_user_logged_out -->&nbsp;<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a>&nbsp;<!-- END switch_user_logged_out --><!-- BEGIN switch_user_logged_in -->&nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp;<!-- END switch_user_logged_in --> &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu">{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
               <td class="right1">&nbsp;</td>
            </tr>
            <tr>
               <td class="cornerBL">&nbsp;</td>
               <td class="bottom1">&nbsp;</td>
               <td class="cornerBR">&nbsp;</td>
            </tr>
            </table>

Ajoutant avant "</head>" :
Code: Sélectionner - Agrandir
<style type="text/css">
td.cornerTL {
background-image: url('LIEN IMAGE COIN HAUT GAUCHE');
background-repeat: no-repeat;
background-position: bottom right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.top1 {
background-image: url('LIEN IMAGE COTÉ HAUT');
background-position: bottom;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.cornerTR {
background-image: url('LIEN IMAGE COIN HAUT DROIT');
background-repeat: no-repeat;
background-position: bottom left;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.left1 {
background-image: url('LIEN IMAGE COTÉ GAUCHE');
background-position: right;
width: LARGEUR DE L'IMAGE EN PX;
}
td.middle1 {
background-image: url('LIEN IMAGE MILIEU');
}
td.right1 {
background-image: url('LIEN IMAGE COTÉ DROIT');
background-position: left;
width: LARGEUR DE L'IMAGE EN PX;
}
td.cornerBL {
background-image: url('LIEN IMAGE COIN BAS GAUCHE');
background-repeat: no-repeat;
background-position: top right;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.bottom1 {
background-image: url('LIEN IMAGE COTÉ BAS');
background-position: top;
height: HAUTEUR DE L'IMAGE EN PX;
}
td.cornerBR {
background-image: url('LIEN IMAGE COIN BAS DROIT');
background-repeat: no-repeat;
background-position: top left;
width: LARGEUR DE L'IMAGE EN PX;
height: HAUTEUR DE L'IMAGE EN PX;
}
</style>



Sauvegardez


*************************
Revenir au sommaire.




V- Annexe




(À venir)





Last edited by An0nyme on Sat 28 Feb 2009 - 21:03; edited 10 times in total
Author Message
ozmagoray
Membre


Offline
Membre

Joined: 05 Jan 2008
Posts: 59
Point(s): 59
Moyenne: 1.00
Windows XP (ou plus ancien) Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Féminin Sagittaire (22nov-21déc) 猪 Cochon

PostPosted: Fri 9 Jan 2009 - 01:46    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Tu n'aurais pas de screens des différentes barres?
_______________________


Nous recherchons des animateurs....


Forum
Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Fri 9 Jan 2009 - 01:50    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Ma foi il y a d'autres tutos pour les barres de navigations mais celui la a le mérite d'être complet et de proposer 3 types de barres dans le même tuto.
Bien pratique tout çà Smile
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 02:27    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

ozmagoray wrote:
Tu n'aurais pas de screens des différentes barres?



Non je ne me suis pas vraiment pris la tête à trouver des images pour tester toutes les version, j'ai plutôt tenté de bien présenter le tuto pour qu'il soit plus accessible (vu sa longueur, il me reste encore un type à voir qui contient deux sous-types et une annexe d'explications pour ces sous-types).

Bref c'est les 3 barres de navigation de base :
-icônes suivies de leurs textes (à la subsilver)
-images à la place des icônes et textes
-texte sur fond extensible en image (pas encore fait)

J'ai vu qu'il y avait déjà plusieurs tutos à propos de tout ça mais je me suis dit que ça serait peut-être bien de réunir tout dans un et en proposant un maximum directement le maximum de choses (des images déjà dissociées) puisqu'il suffit de mettre deux fois la même image pour restreindre les images dissociées.

Bon je vais soit le finir ce soir soit demain après-midi, il me reste à faire :
-un préambule (pour expliquer comment fonctionne le tutu, c'est à dire quoi lire parce qu'il est long donc je sais très bien que tout le monde ne va pas le lire en entier)
-le dernier type de barre (avec deux choix)
-une annexe explicative


Pour information j'ai déjà 209 lignes (en comptant les sauts de ligne) dans le tuto donc faut vraiment que je travail sur la clarté.


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Fri 9 Jan 2009 - 10:44    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

bonjour

pas mal


bien expliqué

sinon la barre image + texte c'est un peu la même chose que icones + texte non?
_______________________


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 18:31    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Non c'est juste des background-image: url(''); ce qui permet d'avoir un résultat comme celui des images mais avec une plus grande flexibilité (affichage du nombre de MPs non lus par exemple).

EDIT : bon plus qu'une variante et l'annexe mais là je dois faire des images explicatives + quelques directives et je crois que je commence à en avoir marre des BBCodes qui se baladent tout le long de mon tuto donc je ne sais pas si je finis ça aujourd'hui.


Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Fri 9 Jan 2009 - 19:04    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

ok oui en effet ça donne mieux 
_______________________


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 19:10    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Au passage si vous avez des idées de précisions dans l'annexe dites-le moi, pour l'instant j'ai prévu :

-Images explicatives (découpage des images de fond)
-Existence de barre de nav en flash
-Remplacer les textes en majuscules dans mes codes
-petite modif selon l'image de centre qu'on utilise pour le IV-2

J'avais surement d'autres idées mais j'ai dû les oublier...


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Fri 9 Jan 2009 - 19:11    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Je trouves que c'est déjà bien et puis les idées viendrons au fur et à mesure
Un bon tuto est aussi un tuto mis à jour de temps en temps Smile
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
themalin
Membre


Offline
Membre

Joined: 19 Apr 2006
Posts: 8,897
Point(s): 9,101
Moyenne: 1.02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Fri 9 Jan 2009 - 19:13    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

-Images explicatives (découpage des images de fond)
-Existence de barre de nav en flash
-Remplacer les textes en majuscules dans mes codes
-petite modif selon l'image de centre qu'on utilise pour le IV-2

tu veux faire comme pour l'autre tuto ou un truc différent?? une autre style de barre flash?
_______________________


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 19:24    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Non je voulais juste préciser qu'on peut aussi faire une barre de nav' en flash (afin de faire le tour de toutes les possibilités) mais là je m'en occupe pas.^^

Author Message
Arlem2


Offline
Guest




PostPosted: Fri 9 Jan 2009 - 20:13    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Fioou, pas tout lu mais il à l'air complet en tout cas Smile

Je le regarderais plus attentivement et si il correspond à ce qu'il me faut (que j'étais en train de faire de mon côté, mais j'suis vraiment trop lent tout le monde me pique mes idées), m'autorises tu à le poster sur le forum officiel de support graphique xooit.com en citant bien sur la source toussa toussa ? Smile


Author Message
Sploutch
Membre


Offline
Membre

Joined: 02 Jan 2006
Posts: 584
Niveau:
Point(s): 632
Moyenne: 1.08
Masculin

PostPosted: Fri 9 Jan 2009 - 20:48    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Salutations,

Sa c'est du tutoriel lool Razz

Je n'ai pas testé je dois l'avouer, mais tout ceci me semble assez bien !
Arlem2 wrote:

(que j'étais en train de faire de mon côté, mais j'suis vraiment trop lent tout le monde me pique mes idées)

Bah tu sais quoi, donne tes idées alors on gagnera du temps mdr Mr. Green
_______________________
1 tour pour la forme.1 tour pour l'esprit.

| Le site pour les Filles | Me Soutenir | Smileys Fun | Mes Tutoriels | Mon formulaire D'aide | No Support MP |


Forum
Author Message
An0nyme


Offline
Guest




PostPosted: Sat 10 Jan 2009 - 04:31    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Arlem2 wrote:
m'autorises tu à le poster sur le forum officiel de support graphique xooit.com en citant bien sur la source toussa toussa ? Smile



Par contre je ne peux pas te donner le tuto à recopier car il est trop long pour la balise code et donc du coup ça ne met pas en format "code" et ça ne le met pas en entier. Mad
Le tuto n'a rien de fantastique en soit, c'est juste qu'il regroupe ce que pourraient être plusieurs tutos et qu'il est détaillé. Wink


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Sat 10 Jan 2009 - 09:24    Post subject: [Tuto] Installer une barre de navigation complète (v alpha) Reply with quote

Quote:
Par contre je ne peux pas te donner le tuto à recopier car il est trop long pour la balise code et donc du coup ça ne met pas en format "code" et ça ne le met pas en entier. Mad


>> Pas besoin, en faisant "citer" il peut récupérer le tuto sans problème
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 02:16    Post subject: [Tuto] Installer une barre de navigation complète (v alpha)

Display posts from previous:   
Reply to topic Page 1 of 18 Goto page: 1, 2, 316, 17, 18  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401