Avec ce tutoriel nous allons donc créer un menu avec des boutons pour votre style prosilver ou dérivé.
Avant:
Voir l'image
Après:
Voir l'image
» Partie .css
En premier nous allons créer les nouvelles classes dans les .css
Ouvrez donc la common.css de votre style et ajoutez ces codes à la fin de ce 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
--------------------- */
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;
}
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;
}
On va maintenant appeler nos images
Ouvrez donc la colours.css de votre style
Ajoutez ces appels à la fin du fichier :
- 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
--------------------- */
» Partie .html
Passons maintenant à la 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="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>
<!-- 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="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> •
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- 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 --><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="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
</div>
qui 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="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 -->
» Partie images
Dernière partie,
Téléchargez le pack d'images joint à ce tuto et placez le dossier dans styles/votre style/imageset/fr/...
Téléchargement du pack iciBoutons au format PSD : boutons_psd.zip
Vous pouvez donc mettre les images que vous voulez ou faire une demande ici
Création graphiqueen 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.
- MAJ le 10/09/09, Sheronz - (ajout des boutons au format PSD)
Flux RSS
