phpBB-fr.com

[micka76]

- Créer un menu avec des boutons

Avec ce tutoriel, nous allons donc créer un menu avec des boutons pour votre style prosilver ou dérivé.

1. Créer un menu avec des boutons
2. Mettre à jour votre menu pour les versions antérieures à 3.0.6
3. Autres fonctionnalités en option

[Morgyanne]

- Créer un menu avec des boutons

Avant :
Voir l'image

Après :
Voir l'image

- Partie .css

En premier, nous allons créer les nouvelles classes dans les .css
Ouvrez le fichier common.css de votre style

Cherchez

Code: Tout sélectionner

ul.linklist li {
   display: block;
   list-style-type: none;
   float: left;
   width: auto;
   margin-right: 5px;
   font-size: 1.1em;
   line-height: 2.2em;
}

Remplacez par

Code: Tout sélectionner

ul.linklist li {
   display: block;
   list-style-type: none;
   float: left;
   width: auto;
   margin-right: 5px;
   font-size: 1.1em;
   line-height: 1.6em;
}

Cherchez

Code: Tout sélectionner

ul.navlinks {
   padding-bottom: 1px;
   margin-bottom: 1px;
   border-bottom: 1px solid #FFFFFF;
   font-weight: bold;
}

Remplacez par

Code: Tout sélectionner

ul.navlinks {
   padding-bottom: 1px;
   margin-bottom: 1px;
   /*border-bottom: 1px solid #FFFFFF;*/
   font-weight: bold;
}

enfin ajoutez ces codes à la fin du fichier

Code: Tout sélectionner

/*Navigation
--------------------- */

#menu {
   width: 100%;
   margin: 0;
   text-align: center;
   padding-top: 5px;
}

#menu a {
   display: inline-block;
   width: 95px;
   height: 20px;
   margin: 0 1px;
}

#menu a span {
   display: none;
   text-indent: -5000px;
}

/*fin navigation
--------------------- */

On va maintenant appeler nos images.
Ouvrez le fichier colours.css de votre style.

Ajoutez à la fin du fichier :

Code: Tout sélectionner

/*Navigation
--------------------- */

.faqs { background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat; }
/*.forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }*/
/*.login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }*/
.logout { background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat; }
.members { background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat; }
.newpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat; }
.nonewpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat; }
/*.portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}*/
.register { background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat; }
.search_self { background: url("{T_IMAGESET_LANG_PATH}/bouton/messages.gif") 0 0 no-repeat; }
/*.site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }*/
.ucp { background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat; }

/*Fin navigation
--------------------- */

- Partie .html

Ouvrez le fichier overall_header.html de votre style
Cherchez

Code: Tout sélectionner

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">
            <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

            <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
         </ul>

         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="linklist leftside">
            <li class="icon-ucp">
               <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
                  <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
               <!-- IF S_DISPLAY_SEARCH --> &bull;
               <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
               <!-- ENDIF -->
               <!-- IF U_RESTORE_PERMISSIONS --> &bull;
               <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
               <!-- ENDIF -->
            </li>
         </ul>
         <!-- ENDIF -->

         <ul class="linklist rightside">
            <li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
            <!-- IF not S_IS_BOT -->
               <!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
               <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
            <!-- ENDIF -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>

   </div>

C'est votre navbar actuelle.

Remplacez par

Code: Tout sélectionner

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">
            <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

            <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <!-- navbar boutons -->
      <div id="menu">
         <!-- Debut : Boutons que vous souhaitez ajouter dans le menu -->
            <!-- <a class="site" href="url_de_votre_site" title="{L_HOME}"><span>{L_HOME}</span></a> -->
            <!-- <a class="portail" href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a> -->
            <!-- <a class="forum" href="{U_INDEX}" accesskey="h" title="{L_INDEX}"><span>{L_INDEX}</span></a> -->
         <!-- Fin : Boutons que vous souhaitez ajouter dans le menu -->
         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <a class="ucp" href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><span>{L_PROFILE}</span></a>
            <!-- IF S_USER_UNREAD_PRIVMSG -->
            <a class="newpms" href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
            <!-- ENDIF -->
            <!-- IF not S_USER_UNREAD_PRIVMSG -->
            <a class="nonewpms" href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
            <!-- ENDIF -->
            <!-- IF S_DISPLAY_SEARCH -->
            <a class="search_self" href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}"><span>{L_SEARCH_SELF}</span></a>
            <!-- ENDIF -->
         <!-- ENDIF -->
         <a class="faqs" href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a>
         <!-- IF not S_IS_BOT -->
            <!-- IF S_DISPLAY_MEMBERLIST --><a class="members" href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a><!-- ENDIF -->
            <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><a class="register" href="{U_REGISTER}" title="{L_REGISTER}"><span>{L_REGISTER}</span></a><!-- ENDIF -->
            <a class="logout" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
         <!-- ENDIF -->
      </div>
      <!-- fin navbar bouton -->

         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="linklist leftside">
            <li>
            <!-- IF U_RESTORE_PERMISSIONS -->
            [ <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a> ]
            <!-- ENDIF -->
            </li>
         </ul>
         <!-- ENDIF -->

   </div>

- Partie images

Téléchargez le pack d'images joint à ce tuto et placez le dossier bouton/ dans styles/votre style/imageset/fr/...
Téléchargement du nouveau pack barmenu.zip : ==> ICI
Boutons au format PSD : boutons_psd.zip

Vous pouvez donc mettre les images que vous voulez ou faire une demande ici Création graphique
en n'oubliant pas de renseigner les nouvelles tailles dans la partie .css citée plus haut.

Un grand merci à sub60 qui nous a mis sur la voie,et surtout a Sheronz, qui a fait un joli pack d'images et qui a trouvé la solution pour avoir un bon centrage des éléments.

[Morgyanne]

- Mettre à jour votre menu pour les versions antérieures à 3.0.6

A partir de la version 3.0.6, la barre de navigation de prosilver a été modifiée et par conséquent, cela a entraîné des modifications dans le menu de boutons.

Cette mise à jour s'adresse, donc, à celles et ceux qui avaient installé le menu avec l'ancien tutoriel.

- Partie .css

Seul, le fichier colours.css nécessite une mise à jour.

Cherchez

Code: Tout sélectionner

/*Navigation
--------------------- */

.forum {background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat;}
.faqs {background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat;}
.ucp {background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat;}
.members {background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat;}
.nonewpms {background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat;}
.newpms {background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat;}
.register {background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat;}
.logout {background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat;}

/*Fin navigation
--------------------- */

Remplacez par

Code: Tout sélectionner

/*Navigation
--------------------- */

.faqs { background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat; }
/*.forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }*/
/*.login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }*/
.logout { background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat; }
.members { background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat; }
.newpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat; }
.nonewpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat; }
/*.portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}*/
.register { background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat; }
.search_self { background: url("{T_IMAGESET_LANG_PATH}/bouton/messages.gif") 0 0 no-repeat; }
/*.site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }*/
.ucp { background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat; }

/*Fin navigation
--------------------- */

- Partie .html

Modifiez le fichier overall_header.html ainsi :

cherchez

Code: Tout sélectionner

         <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="linklist navlinks">
         <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
         <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

         <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
         <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
         <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
         <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
      </ul>
         <span class="corners-bottom"><span></span></span></div>
   </div>
     
<!-- navbar  boutons -->
<div id="menu">
         <a class="forum" href="{U_INDEX}" accesskey="h"><span>{L_INDEX}</span></a>
       <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       <a class="ucp" href="{U_PROFILE}" title="{L_PROFILE}"><span>{L_PROFILE}</span></a>
       <!-- ENDIF -->
       <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       <!-- IF not S_USER_UNREAD_PRIVMSG -->
       <a class="nonewpms" href="{U_PRIVATEMSGS}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
       <!-- ENDIF -->
       <!-- IF S_USER_UNREAD_PRIVMSG -->
       <a class="newpms" href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
       <!-- ENDIF -->
       <!-- ENDIF -->
       <a class="faqs" href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a>
       <!-- IF not S_IS_BOT -->
       <a class="members" href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a>
       <!-- ENDIF -->
       <a class="logout" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l"><span>{L_LOGIN_LOGOUT}</span></a>
       <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED -->
       <a class="register" href="{U_REGISTER}" title="{L_REGISTER}"><span>{L_REGISTER}</span></a>
       <!-- ENDIF -->
      </div>
<!-- fin navbar bouton -->   

            </div>
<!-- IF not S_IS_BOT -->
<ul>           
<!-- IF U_RESTORE_PERMISSIONS -->
<li><a href="{U_RESTORE_PERMISSIONS}"><span>{L_RESTORE_PERMISSIONS}</a></li>
<!-- ENDIF -->
</ul>
<!-- ENDIF -->

Remplacez par

Code: Tout sélectionner

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks">
            <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

            <li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

            <!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
            <!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
         </ul>

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <!-- navbar boutons -->
      <div id="menu">
         <!-- Début : Boutons que vous souhaitez ajouter dans le menu -->
            <!-- <a class="site" href="url_de_votre_site" title="{L_HOME}"><span>{L_HOME}</span></a> -->
            <!-- <a class="portail" href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a> -->
            <!-- <a class="forum" href="{U_INDEX}" accesskey="h" title="{L_INDEX}"><span>{L_INDEX}</span></a> -->
         <!-- Fin : Boutons que vous souhaitez ajouter dans le menu -->
         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <a class="ucp" href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><span>{L_PROFILE}</span></a>
            <!-- IF S_USER_UNREAD_PRIVMSG -->
            <a class="newpms" href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
            <!-- ENDIF -->
            <!-- IF not S_USER_UNREAD_PRIVMSG -->
            <a class="nonewpms" href="{U_PRIVATEMSGS}" title="{PRIVATE_MESSAGE_INFO}"><span>{PRIVATE_MESSAGE_INFO}</span></a>
            <!-- ENDIF -->
            <!-- IF S_DISPLAY_SEARCH -->
            <a class="search_self" href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}"><span>{L_SEARCH_SELF}</span></a>
            <!-- ENDIF -->
         <!-- ENDIF -->
         <a class="faqs" href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a>
         <!-- IF not S_IS_BOT -->
            <!-- IF S_DISPLAY_MEMBERLIST --><a class="members" href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a><!-- ENDIF -->
            <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><a class="register" href="{U_REGISTER}" title="{L_REGISTER}"><span>{L_REGISTER}</span></a><!-- ENDIF -->
            <a class="logout" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
         <!-- ENDIF -->
      </div>
      <!-- fin navbar bouton -->

         <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
         <ul class="linklist leftside">
            <li>
            <!-- IF U_RESTORE_PERMISSIONS -->
            [ <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a> ]
            <!-- ENDIF -->
            </li>
         </ul>
         <!-- ENDIF -->

   </div>

- Partie images

Remplacez le contenu du dossier bouton/ que vous trouvez dans styles/votre style/imageset/bouton/ par celui de l'archive en lien à la fin du premier message.

[Morgyanne]

- Autres fonctionnalités en option

Quelques fonctionnalités que vous pouvez facilement ajoutées à votre menu de boutons.

- Boutons de connexion et de déconnexion distincts

Si vous souhaitez avoir un bouton pour la connexion et un autre pour la déconnexion, voici les modifications à effectuer.

1. Partie .css
   Seul, le fichier colours.css est à éditer.
   
   Cherchez
   

   Code: Tout sélectionner

   /*Navigation
--------------------- */

.faqs { background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat; }
/*.forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }*/
/*.login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }*/
.logout { background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat; }
.members { background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat; }
.newpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat; }
.nonewpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat; }
/*.portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}*/
.register { background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat; }
.search_self { background: url("{T_IMAGESET_LANG_PATH}/bouton/messages.gif") 0 0 no-repeat; }
/*.site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }*/
.ucp { background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat; }

/*Fin navigation
--------------------- */

   
   Dans ces lignes, cherchez
   

   Code: Tout sélectionner

   /*.login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }*/

   
   Retirez la mise en commentaire
   

   Code: Tout sélectionner

   .login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }

   
   
   
2. Partie .html
   Ouvrez le fichier overall_header.html.
   
   Cherchez
   

   Code: Tout sélectionner

               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><a class="register" href="{U_REGISTER}" title="{L_REGISTER}"><span>{L_REGISTER}</span></a><!-- ENDIF -->
            <a class="logout" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>

   
   Remplacez par
   

   Code: Tout sélectionner

               <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
            <a class="register" href="{U_REGISTER}" title="{L_REGISTER}"><span>{L_REGISTER}</span></a>
            <!-- ENDIF -->
            <!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED -->
            <a class="login" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
            <!-- ENDIF -->
            <!-- IF not S_USER_LOGGED_IN and not S_REGISTER_ENABLED -->
            <a class="login" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
            <!-- ENDIF -->
            <!-- IF S_USER_LOGGED_IN -->
            <a class="logout" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
            <!-- ENDIF -->

   
   
3. Partie images
   Vous trouverez les nouveaux boutons de connexion et de déconnexion dans le dossier options/ de l'archive en lien dans le premier message.
   Il vous suffit de les transférer dans le répertoire styles/votre style/imageset/fr/bouton/.

- Boutons portail, site, forum

En fonction du contenu de votre site web, il se peut que vous ayez besoin de boutons de retour menant à l'index du forum, à votre portail ou à l'accueil de votre site.

Ces possibilités ont été prévues - et devraient fonctionner dans la majorité des cas, notamment en ce qui concerne le portail, sinon une demande de support devrait y remédier - il ne vous reste plus qu'à les activer .

1. Partie .css
   Seul, le fichier colours.css est à éditer.
   
   Cherchez
   

   Code: Tout sélectionner

   /*Navigation
--------------------- */

.faqs { background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat; }
/*.forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }*/
/*.login { background : url("{T_IMAGESET_LANG_PATH}/bouton/connexion.gif") 0 0 no-repeat; }*/
.logout { background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat; }
.members { background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat; }
.newpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat; }
.nonewpms { background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat; }
/*.portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}*/
.register { background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat; }
.search_self { background: url("{T_IMAGESET_LANG_PATH}/bouton/messages.gif") 0 0 no-repeat; }
/*.site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }*/
.ucp { background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat; }

/*Fin navigation
--------------------- */

   
   Dans ces lignes, cherchez
   
   • Concerne le bouton de retour à l'index du forum
     

     Code: Tout sélectionner

     /*.forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }*/

   • Concerne le bouton de retour vers le portail
     

     Code: Tout sélectionner

     /*.portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}*/

   • Concerne le bouton de retour à l'accueil de votre site
     

     Code: Tout sélectionner

     /*.site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }*/

   Retirez la mise en commentaire pour afficher le bouton
   
   • Concerne le bouton de retour à l'index du forum
     

     Code: Tout sélectionner

     .forum { background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat; }

   • Concerne le bouton de retour vers le portail
     

     Code: Tout sélectionner

     .portail {background: url("{T_IMAGESET_LANG_PATH}/bouton/portail.gif") 0 0 no-repeat;}

   • Concerne le bouton de retour à l'accueil de votre site
     

     Code: Tout sélectionner

     .site { background: url("{T_IMAGESET_LANG_PATH}/bouton/site.gif") 0 0 no-repeat; }

2. Partie .html
   Ouvrez le fichier overall_header.html
   
   Cherchez
   

   Code: Tout sélectionner

            <!-- Debut : Boutons que vous souhaitez ajouter dans le menu -->
            <!-- <a class="site" href="url_de_votre_site" title="{L_HOME}"><span>{L_HOME}</span></a> -->
            <!-- <a class="portail" href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a> -->
            <!-- <a class="forum" href="{U_INDEX}" accesskey="h" title="{L_INDEX}"><span>{L_INDEX}</span></a> -->
         <!-- Fin : Boutons que vous souhaitez ajouter dans le menu -->

   
   Retirez la mise en commentaire du ou des boutons que vous souhaitez afficher
   
   • Retour à l'accueil de votre site, n'oubliez pas d'indiquer l'adresse
     

     Code: Tout sélectionner

                 <a class="site" href="url_de_votre_site" title="{L_HOME}"><span>{L_HOME}</span></a>

   • Retour vers votre portail
     

     Code: Tout sélectionner

                 <a class="portail" href="{U_PORTAL}" title="{L_PORTAL}"><span>{L_PORTAL}</span></a>

   • Retour à l'index du forum
     

     Code: Tout sélectionner

                 <a class="forum" href="{U_INDEX}" accesskey="h" title="{L_INDEX}"><span>{L_INDEX}</span></a>

   
   
3. Partie images
   Vous trouverez les nouveaux boutons concernant le forum, le site et le portail dans le dossier options/ de l'archive en lien dans le premier message.
   Il vous suffit de les transférer dans le répertoire styles/votre style/imageset/fr/bouton/.

[micka76]

Mise à jour du tuto, merci à Morgyanne pour le travail effectué