AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Template, CSS, Javascript] Créer sa propre barre de navigation

    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Ven 17 Aoû 2012 - 23:21

    Rappel du premier message :



    Bonjour !

    Me voici avec un tutoriel vous permettant de complètement modifier votre barre de navigation.

    IMPORTANT :

    Tout d'abord, remercions l'auteur original du tutoriel : Miettes de School of Progress.
    Lien vers son tutoriel : ici


    Par respect pour son travail, j'utiliserai mes propres codes pour ce tutoriel, afin d'obtenir ce résultat.

    Le principe de ce tutoriel est de recréer la barre de navigation dans votre template, utiliser le css pour la mettre en forme, et la bibliothèque JQuery de Javascript pour le bouton MP.
    1- Création de la barre dans le template

    Commençons par le début : ouvrez votre template overall_header et repérez la partie suivante (ligne 265) :
    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
     <tr>
     <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
     </tr>
    </table>

    Ce tableau est celui entourant la barre de navigation prédéfinie par forumactif. Supprimez-le, seul {GENERATED_NAV_BAR} nous intéresse.

    L'étape suivante est de choisir l'emplacement de votre barre de navigation. Pour ma part, il s'agit d'une barre fixe située en haut de la page. Je vais donc mettre mon code après la ligne 201 :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Maintenant, commençons le code de la barre de navigation. Tout d'abord, il est nécessaire de poser une
    cachée contenant la barre de base afin d'en récupérer les informations. Comme cela :
    Code:
    <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

    Ensuite, il suffit de recréer les liens de la manière suivante :
    Code:
    <a href="URL DE VOTRE FORUM" alt="NOM DU LIEN"><img src="VOTRE IMAGE" /></a>

    Plutôt que de vous embêter à aller partout sur votre forum pour récupérer les liens de la barre, les voici :

    Portail : url de votre forum/
    Accueil (Index) : /forum
    Calendrier : /calendar
    Galerie : /gallery/index.htm
    FAQ : /faq
    Rechercher : /search
    Membres : /memberlist
    Groupes : /groups
    Profil : /profile?mode=editprofile
    Messagerie : /privmsg?folder=inbox
    Inscription : /register
    Connexion : /login
    Déconnexion : /login?logout pour déconnecter directement et /login.forum?logout=true pour accéder à la page de déconnexion


    Vous avez tous vos liens ? Parfait ! Quelques subtilités désormais. En effet, si vous mettez la barre telle quelle, vous verrez tous les liens, et non ceux vous concernant entant qu'utilisateur (normalement, si vous n'êtes pas connectés, vous voyez les liens Inscription et Connexion, et au contraire, vous voyez les liens MP et Déconnexion alors que là vous voyez tout). Pour ces boutons interchangeables, il faut utiliser un peu de Javascript. Pas de soucis, cela se passe directement dans le template et est prédéfini par forumactif. Voilà comment cela se passe :
    Utilisateur connecté :
    Code:
    <!-- BEGIN switch_user_logged_in -->
    Vos liens (MP et Déconnexion normalement, mais plus si vous voulez)
     <!-- END switch_user_logged_in -->

    Utilisateur déconnecté :
    Code:
    <!-- BEGIN switch_user_logged_out -->
    Vos liens (Inscription et Connexion)
     <!-- END switch_user_logged_out -->

    Enfin, une recommandation importante : ajoutez un attribut id dans votre balise img du bouton MP ! Cela va permettre de l'identifier pour la partie JQuery.
    Code:
    <a href="URL/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>

    Si vous vous y connaissez en html et n'avez pas peur d'utiliser les templates, vous avez maintenant tous les éléments pour construire votre propre barre de navigation. Pour les autres, je vous donne mon code :
    Code:
    <!-- BARRE NAVIGATION -->
    <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
    <div id="bar_nav">
     <div id="bar_nav_standard">
     <a href="/forum" alt="Accueil"><img src="URL" /></a>
     <a href="/faq" alt="F.A.Q."><img src="URL" /></a>
     <a href="/search" alt="Rechercher"><img src="URL" /></a>
     <a href="/memberlist" alt="Membres"><img src="URL" /></a>
     <a href="/groups" alt="Groupes"><img src="URL" /></a>
     <a href="/profile?mode=editprofile" alt="Profil"><img src="URL" /></a>
     </div>
     <div id="bar_nav_modul">
     <!-- BEGIN switch_user_logged_in -->
     <a href="/login?logout" alt="Déconnexion"><img src="URL" /></a><br />
     <a href="/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>
     <!-- END switch_user_logged_in -->
     <!-- BEGIN switch_user_logged_out -->
     <a href="/login" alt="Connexion"><img src="URL" /></a><br />
     <a href="/register" alt="S'inscrire"><img src="URL" /></a>
     <!-- END switch_user_logged_out -->
     </div>
    </div>
    <!-- BARRE NAVIGATION -->


    2- Partie CSS

    Pour ceux qui ont pris mon code, vous pouvez constater que la barre, non contente d'être fixe en haut de la page, prend toute celle-ci. Il s'agit du même fonctionnement que celle donnée par Sparrow-Style dans ce tutoriel. La seule différence est l'utilisation d'un width à 100% qui me permet de lui faire prendre toute la page. Attention cependant : en utilisant ceci, vos boutons vont finir par laisser un vide. Si vous ne voulez pas que cela arrive, pensez au background.
    Code:
    /* BARRE NAVIGATION */

    #bar_nav {
       position: fixed;
       z-index: 999;
       width: 100%;
      top: 0px;
       left: 0px;
       right: 0px;
       background:url('URL DE L'IMAGE') repeat-x;
    }

    #bar_nav_standard {
       float: left;
    }

    #bar_nav_modul {
       float: right;
    }

    Note : L'ombre portée de ma barre vient d'un "bidouillage". Vu la forme de ma barre, utiliser un box-shadow ne marcherait pas (il suivrait les bords de la div et non des images). Cependant si votre barre le permet, n'hésitez pas. Sinon, utilisez Photoshop et des images en .png pour la transparence.



    3- Nouveau MP : JQuery


    Vous avez désormais une belle barre de navigation, fonctionnelle et totalement personnalisée. Seul hic ? Le bouton MP qui ne se transforme pas en Nouveau MP ! L'utilisation du javascript va permettre d'arranger cela. Ouvrez le panneau d'administration et allez dans : Modules -> Gestion des codes javascript -> Créer un nouveau javascript. Là, cochez Sur toutes les pages et collez le code suivant :
    Code:
    jQuery().ready(function(){
            var newmp = $("#i_icon_mini_new_message");
            if(!newmp.length) return;
            $("#mp").attr('src','URL DE L'IMAGE');
    });

    Faites bien attention à la dernière ligne : $("#mp") correspond à l'id que vous avez mis dans votre balise img du bouton MP et attr('src', 'URL DE L'IMAGE') va vous permettre de remplacer l'image par celle correspondant au Nouveau MP.

    Validez, et votre barre de navigation marche sans problème !

    Merci de penser à un petit remerciement à Never Utopia ET School of Pub si vous utilisez ce tutoriel pour votre forum !

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Sign_n10
    Iriel
    Iriel
    MasculinAge : 27Messages : 26

    le Lun 10 Déc 2012 - 17:26

    Merci !
    shala
    shala
    FémininAge : 27Messages : 213

    le Mar 11 Déc 2012 - 16:48

    merci



    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 29Messages : 144

    le Mer 12 Déc 2012 - 12:17

    merci !!



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Signa10
    Battosai
    Battosai
    MasculinAge : 19Messages : 29

    le Mer 12 Déc 2012 - 23:49

    Merci
    ♕ William
    ♕ William
    MasculinAge : 22Messages : 72

    le Mar 18 Déc 2012 - 17:19

    Merci ! =)



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Right_10
    William
    Choubakawa
    Choubakawa
    MasculinAge : 26Messages : 87

    le Ven 28 Déc 2012 - 1:54

    Merci !



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Witche13
    LickingBoot
    LickingBoot
    FémininAge : 20Messages : 503

    le Sam 5 Jan 2013 - 12:26

    merci



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 557826ilovedoudousign
    Rodeuse
    Rodeuse
    FémininAge : 26Messages : 142

    le Sam 5 Jan 2013 - 18:48

    merci pour ce tuto
    Samluna
    Samluna
    FémininAge : 20Messages : 96

    le Sam 5 Jan 2013 - 21:35

    Rooooooooooooooh *O* C'est trooooop beau !!!!!!!! *O* On peux changer les couleurs ou pas... ? *O*
    J'ai mis Never-Utopia en Top-Site et je crois que je vais aussi mettre School of Pub pour les remercier *O*




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Tumblr_n4vso3dRJP1qf9mevo1_500
    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Dim 6 Jan 2013 - 14:23

    Samluna : Tu peux changer les couleurs comme tu le veux, par contre il te faudra modifier les images utilisées, ou créer les tiennes :)



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Sign_n10
    Lycoris
    Lycoris
    FémininAge : 27Messages : 23

    le Jeu 10 Jan 2013 - 20:51

    Merci beaucoup pour le partage ! ham1
    Chiisu57
    Chiisu57
    FémininAge : 31Messages : 14

    le Ven 11 Jan 2013 - 17:49

    Merci !
    Mondo Gecko
    Mondo Gecko
    MasculinAge : 35Messages : 51

    le Lun 14 Jan 2013 - 12:58

    merci





    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 607046geek
    Rauperodinde
    Rauperodinde
    MasculinAge : 26Messages : 18

    le Lun 14 Jan 2013 - 18:55

    merci



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 654926SIGN
    Sonoshee
    Sonoshee
    FémininAge : 27Messages : 30

    le Ven 18 Jan 2013 - 23:23

    Merci , merci, ce tuto va beaucoup m'aider Wink
    Databar
    Databar
    MasculinAge : 25Messages : 142

    le Sam 19 Jan 2013 - 14:20

    merci
    Sayuri
    Sayuri
    FémininAge : 27Messages : 18

    le Jeu 24 Jan 2013 - 21:33

    merci
    luzoil
    luzoil
    FémininAge : 33Messages : 30

    le Ven 25 Jan 2013 - 23:18

    Merci ! Tu vas peut etre m'offrir la solution à mon "doublement" de barre de navigation ^^
    Rosedesvents
    Rosedesvents
    FémininAge : 33Messages : 97

    le Sam 26 Jan 2013 - 12:36

    Merci ^^!
    Siprano
    Siprano
    FémininAge : 21Messages : 293

    le Sam 26 Jan 2013 - 18:30

    merci
    Léoshadow
    Léoshadow
    MasculinAge : 20Messages : 47

    le Jeu 31 Jan 2013 - 6:55

    Enorme :)



    Mon texte Very Happy
    QueenDancing13
    QueenDancing13
    FémininAge : 23Messages : 106

    le Jeu 31 Jan 2013 - 18:00

    Merci beaucoup :)



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 Christina_Aguilera_Signature_by_Sitic
    Cissy
    Cissy
    FémininAge : 27Messages : 63

    le Dim 3 Fév 2013 - 5:54

    Merci !
    Ilmryn
    Ilmryn
    FémininAge : 22Messages : 36

    le Dim 3 Fév 2013 - 9:22

    Merci pour le partage ^^



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 2 566836signaill
    W.
    W.
    FémininAge : 21Messages : 127

    le Dim 3 Fév 2013 - 19:50

    Owa marki bien!



    Je suis Charlie.
    Contenu sponsorisé


      La date/heure actuelle est Ven 6 Déc 2019 - 9:33