La date/heure actuelle est Sam 21 Oct 2017 - 08:43 - créer un forum

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

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: 1, 2, 316, 17, 18  >

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


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 01:35    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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)





Dernière édition par An0nyme le Sam 28 Fév 2009 - 21:03; édité 10 fois
Auteur Message
ozmagoray
Membre


Hors ligne
Membre

Inscrit le: 05 Jan 2008
Messages: 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

MessagePosté le: Ven 9 Jan 2009 - 01:46    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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


Nous recherchons des animateurs....


Forum
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 02:27    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

ozmagoray a écrit:
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é.


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Ven 9 Jan 2009 - 10:44    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

bonjour

pas mal


bien expliqué

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


Forum
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 18:31    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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.


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Ven 9 Jan 2009 - 19:04    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

ok oui en effet ça donne mieux 
_______________________


Forum
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 19:10    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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


Auteur Message
themalin
Membre


Hors ligne
Membre

Inscrit le: 19 Avr 2006
Messages: 8 897
Point(s): 9 101
Moyenne: 1,02
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

MessagePosté le: Ven 9 Jan 2009 - 19:13    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

-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
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 19:24    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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

Auteur Message
Arlem2


Hors ligne
Invité




MessagePosté le: Ven 9 Jan 2009 - 20:13    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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


Auteur Message
Sploutch
Membre


Hors ligne
Membre

Inscrit le: 02 Jan 2006
Messages: 585
Niveau:
Point(s): 633
Moyenne: 1,08
Masculin

MessagePosté le: Ven 9 Jan 2009 - 20:48    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

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 a écrit:

(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
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Sam 10 Jan 2009 - 04:31    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

Arlem2 a écrit:
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


Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Sam 10 Jan 2009 - 15:51    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

Ah oui, bien vu. Okay

Auteur Message
bz3alex
Membre


Hors ligne
Membre

Inscrit le: 06 Sep 2008
Messages: 96
Niveau:
Point(s): 97
Moyenne: 1,01
Windows Vista ou 7 Internet Explorer Masculin Verseau (20jan-19fev)

MessagePosté le: Lun 12 Jan 2009 - 00:15    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

Bonjours,

Impossible de mettre une barre de navigation, en mettant des images pour le texte à chaque fois, voici mon Overall Hedear.tpl

Code: Sélectionner - Agrandir
<?xml version="1.0" encoding="{S_CONTENT_ENCODING}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img6.xooimage.com/files/d/g/dgfrevolution-32508.css" type="text/css" />
<!-- BEGIN switch_enable_pm_popup -->
<script type="text/javascript">
<!--
 if ( {PRIVATE_MESSAGE_NEW_FLAG} )
 {
  window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
 }
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body>
<a name="top"></a>
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"></p>
<div align="center"><a href="{U_INDEX}"><img src="http://img9.xooimage.com/files/7/2/e/header-32509-9f092a.gif" border="0" alt="{L_INDEX}" vspace="1" /></a>
</div>
</table>
<table class="bodyline" width="959" cellspacing="0" cellpadding="0" border="0" align="center">
</td></tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td><img src="http://img5.xooimage.com/files/t/n/tnav_tl-3250a.gif" width="46" height="43" alt="" /></td>
  <td width="100%" class="tbltop">&nbsp;</td>
  <td><img src="http://img4.xooimage.com/files/t/n/tnav_tr-3250b.gif" width="46" height="43" alt="" /></td>
 </tr>
 <tr>
  <td class="tblleft">&nbsp;</td>
  <td valign="top">
  <table width="100%" border="0" cellspacing="0" cellpadding="10">
<td class="bodyline">
<tr>
<td colspan="2">
<table width="100%" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
 <td align="center" width="75%" class="cat" colspan="2" height="28"><span class="cattitle">News</span></td>
  </tr>
 
  <tr>
 <td class="row1" align="right" valign="right"><span class="mainmenu">
 
<p><marquee><b>
::: votre texte defilent ici ou statique en supriment la balise "marquee" :::
</b></marquee></p>

</td>
  </tr>
</table><br>
<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="3" cellpadding="1">
 
  <td valign="top">
  <table width="100%" border="0" cellspacing="3" cellpadding="10">

<tr>
<td align="center" width="135" valign="top">
 
<!-- Left Column-->
<!-- Menu -->
    <table width="135" cellspacing="1" cellpadding="3" border="0" colspan="3" class="forumline">
     <tr>
      <td align="center" nowrap="nowrap"  colspan="3" class="cat"><span class="cattitle">Menu</span>
      </td>
     </tr>
     <tr>
      <td align="left" valign="bottom" nowrap="nowrap" class="row1"><span class="mainmenu"><a href="{U_INDEX}" class="mainmenu">•&nbsp; Index</a><br /><a href="{U_FAQ}" class="mainmenu">•&nbsp; {L_FAQ}</a><br /><a href="{U_MEMBERLIST}" class="mainmenu">•&nbsp; {L_MEMBERLIST}</a><br /><a href="{U_GROUP_CP}" class="mainmenu">•&nbsp; {L_USERGROUPS}</a><br />
      <!-- BEGIN switch_user_logged_out -->
      <a href="{U_REGISTER}" class="mainmenu">•&nbsp; {L_REGISTER}</a><br />
      <!-- END switch_user_logged_out -->
      <a href="{U_PROFILE}" class="mainmenu">•&nbsp; {L_PROFILE}</a><br /><a href="{U_PRIVATEMSGS}" class="mainmenu">•&nbsp; Messages</a><br /><a href="{U_LOGIN_LOGOUT}" class="mainmenu">•&nbsp; Connect&eacute;/Deconnect&eacute;</a><br /></span>
      </td>
     </tr>
    </table>
<br />
<!-- Menu -->
<!-- Who's Online -->    
    <table width="149" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
 <td align="center" width="100%" class="cat" colspan="3" height="28"><span class="cattitle"><a href="{U_VIEWONLINE}" class="cattitle">Qui est en ligne</a></span></td>
  </tr>
 
  <tr>
 <td class="row1" align="left"><center><span class="gensmall">[ {L_WHOSONLINE_ADMIN} ]<br />[ {L_WHOSONLINE_MOD} ]</span></center><hr><span class="genmed">{LOGGED_IN_USER_LIST}</span></td>
  </tr>
</table>
<br />
<!-- Who's Online -->
<!-- Links -->    
<table width="149" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
 <td align="center" width="100%" class="cat" height="28"><span class="cattitle">Liens</span></td>
  </tr>
 
  <tr>
 <td class="row1" align="left" valign="top"><span class="mainmenu">
 <!-- Banners -->
<a href="http://www.dagonfield.be.cx"><img src="http://www.dgf.tonsite.biz/bt.png" border="0" alt="Dagonfield.be.cx"></a><br />
<!-- Banners -->
<a href="{U_INDEX}" target=_blank  class="mainmenu">Votre lien ici</a></td>
  </tr>
</table>
<br />
<!-- Links -->
<!-- Quick Search -->
<table width="149" cellpadding="3" cellspacing="1" border="0" class="forumline">
  <tr>
    <td class="cat" align="center" height="28"><span class="cattitle">Recherche rapide</span></td>
  </tr>
  <tr>
    <td class="row1" align="center" width="100%">
<form action="{U_SEARCH}?mode=results" method="post" target="_top">
<input type="text" class="post" name="search_keywords" size="14" />
<input type="submit" class="mainoption" name="login" value="Ok" /><br />
<span class="gensmall"><a href="{U_SEARCH}" class="gensmall">Recherche avanc&eacute;e</a></span>
    </td></form>
  </tr>
</table> 
<br />
<!-- Quick Search -->
<!-- Search Google -->
<table width="149" cellpadding="3" cellspacing="1" border="0" colspan="3" class="forumline">
  <tr>
    <td class="cat" colspan="2" align="center" height="28"><span class="cattitle">Recherche Google</span></td>
  </tr>
  <tr>
    <td class="row1" align="center" width="100%">
<FORM method=GET action="http://www.google.com/search">
<A HREF="http://www.google.com/" target=_blank>
<IMG SRC="http://img7.xooimage.com/files/g/o/google-3250c.jpg" border="0"
ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text class="post" name=q size=14 maxlength=255 value="">
<INPUT type=submit class="mainoption" name=btnG VALUE="Recherche">
    </td></form>
  </tr>
</table> 
<br />
<!-- Search Google -->
</td>
<!--Left Column-->
<td valign="top">
<!--Forum-->
<br/>


_______________________
Dans la vie, yé n'ai confiance qu'en deux choses, ma parole et mon manche, l'une est de fer l'autre est d'acier.


Forum
Auteur Message
An0nyme


Hors ligne
Invité




MessagePosté le: Lun 12 Jan 2009 - 01:41    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha) Répondre en citant

Bonsoir, quel type de barre souhaitez-vous installer et souhaitez-vous garder votre menu de navigation à gauche?
Ou souhaitez-vous modifier votre menu de gauche pour un menu en images?


Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 08:43    Sujet du message: [Tuto] Installer une barre de navigation complète (v alpha)

Montrer les messages depuis:   
Répondre au sujet Page 1 sur 18 Aller à la page: 1, 2, 316, 17, 18  >




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401