Avec ce tutoriel, nous allons donc créer un menu avec des boutons pour votre style prosilver ou dérivé.
- Créer un menu avec des boutons
- Mettre à jour votre menu pour les versions antérieures à 3.0.6
- Autres fonctionnalités en option
- Tutoriel complémentaire : ajouter un effet au survol des boutons du menu
- Créer un menu avec des boutons
Avant :
Après :
- 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>‹</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 --> • <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> <!-- ENDIF --> <!-- IF U_RESTORE_PERMISSIONS --> • <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>‹</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.
- 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>‹</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>‹</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.
- 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.
- 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; }
- 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 --> <a class="<!-- IF not S_USER_LOGGED_IN -->login<!-- ELSE -->logout<!-- ENDIF -->" href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><span>{L_LOGIN_LOGOUT}</span></a>
- 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 .
- 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; }*/
- 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; }
- 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>
- 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/.
~~ Édité par Steph le 22-02-2013 ~~
Motif : Correction de S_USER_LOGGED en S_USER_LOGGED_IN
Mise à jour du tuto, merci à Morgyanne pour le travail effectué