[3.0] Créer un menu avec des boutons Intermédiaire

[3.0] Créer un menu avec des boutons

[Prosilver]


- 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
  4. Tutoriel complémentaire : ajouter un effet au survol des boutons du menu


Image - Créer un menu avec des boutons

Avant :
Image

Après :
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/...
:arrow: 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 :arrow: 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.


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


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

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

~~ É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é

micka76
Graphiste
Graphiste
 
Rédigé le: 10 Juin 2009 à 17:17
Articles: 8
Noter cet article: 123456 Votants: 2
Mots-clés: menu, boutons

Retourner vers Styles


cron