Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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

    Partagez
    FémininAge : 24Message(s) : 92
    Eraendil
    le Ven 17 Aoû 2012 - 23:21
    TAGS
    Langage : #css #html #jquery
    Éléments : #navigation
    Auteur : #auteur_Eraendil
    Version : #phpBB2 #toutes_les_versions


    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.



    Un petit merci vous permettra d'accéder au tutoriel Wink .

    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/
    Calendrier : url de votre forum/calendar
    Galerie : url de votre forum/gallery/index.htm
    FAQ : url de votre forum/faq
    Rechercher : url de votre forum/search
    Membres : url de votre forum/memberlist
    Groupes : url de votre forum/groups
    Profil : url de votre forum/profile?mode=editprofile
    Messagerie : url de votre forum/privmsg?folder=inbox
    Inscription : url de votre forum/register
    Connexion : url de votre forum/login
    Déconnexion : url de votre forum/login?logout


    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="URL/?tt=1" alt="Accueil"><img src="URL" /></a>
     <a href="URL/faq?tt=1" alt="F.A.Q."><img src="URL" /></a>
     <a href="URL/search?tt=1" alt="Rechercher"><img src="URL" /></a>
     <a href="URL/memberlist?tt=1" alt="Membres"><img src="URL" /></a>
     <a href="URL/groups?tt=1" alt="Groupes"><img src="URL" /></a>
     <a href="URL/profile?mode=editprofile&tt=1" alt="Profil"><img src="URL" /></a>
     </div>
     <div id="bar_nav_modul">
     <!-- BEGIN switch_user_logged_in -->
     <a href="URL/login?logout" alt="Déconnexion"><img src="URL" /></a><br />
     <a href="URL/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>
     <!-- END switch_user_logged_in -->
     <!-- BEGIN switch_user_logged_out -->
     <a href="URL/login" alt="Connexion"><img src="URL" /></a><br />
     <a href="URL/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 !


    FémininAge : 28Message(s) : 101
    Lutine
    le Mar 11 Sep 2012 - 12:27
    Merci, ça a l'air super!
    MasculinAge : 69Message(s) : 34
    mprevel
    le Mar 11 Sep 2012 - 12:52
    merci pour le tuto!!
    FémininAge : 19Message(s) : 35
    Toya
    le Dim 16 Sep 2012 - 17:09
    Merci, c'est très beau :3
    FémininAge : 17Message(s) : 5
    Cleeya
    le Ven 21 Sep 2012 - 22:22
    Merci :DD
    FémininAge : 22Message(s) : 43
    Haileen
    le Ven 28 Sep 2012 - 11:01
    Oh, je suis curieuse de voir le code! Merci! :toto:
    MasculinAge : 17Message(s) : 24
    machichi
    le Dim 30 Sep 2012 - 11:17
    Merci du code !
    MasculinAge : 20Message(s) : 43
    Silver Star
    le Dim 30 Sep 2012 - 23:12
    thanks. :)
    FémininAge : 24Message(s) : 476

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Skyleen
    le Jeu 4 Oct 2012 - 21:24
    Merci :)


    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    FémininAge : 27Message(s) : 101
    Lady Doll
    le Lun 8 Oct 2012 - 9:45
    merci =)
    MasculinAge : 24Message(s) : 90

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    blade li britannia
    le Ven 12 Oct 2012 - 16:45
    merci
    MasculinAge : 21Message(s) : 55
    Merino
    le Sam 13 Oct 2012 - 10:55
    Merci :)
    FémininAge : 27Message(s) : 4
    Lilyjolie
    le Mer 17 Oct 2012 - 16:00
    merci pour le tuto!!
    MasculinAge : 19Message(s) : 22
    guarana
    le Sam 20 Oct 2012 - 11:36
    Merci merci, encore un bon tuto.
    FémininAge : 28Message(s) : 103
    TUC
    le Dim 28 Oct 2012 - 19:53
    c'est superbe *-* Merci :)


    FémininAge : 25Message(s) : 472

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Dydy
    le Mer 7 Nov 2012 - 21:00
    merci pour le code!


    FémininAge : 23Message(s) : 190
    Reira-Sama
    le Jeu 8 Nov 2012 - 11:49
    petite curieuse,
    merci du partage
    FémininAge : 27Message(s) : 45
    Loolaa
    le Lun 12 Nov 2012 - 18:49
    thanks


    FémininAge : 23Message(s) : 48
    Tweety
    le Sam 17 Nov 2012 - 18:43
    Merci :)
    FémininAge : 21Message(s) : 34
    Tiffa
    le Jeu 22 Nov 2012 - 7:04
    merci ^^
    FémininAge : 23Message(s) : 39
    alexee29
    le Mer 28 Nov 2012 - 8:10
    Merci ^^!
    FémininAge : 30Message(s) : 43
    destanee
    le Ven 30 Nov 2012 - 14:49
    merci pour ce tuto
    FémininAge : 27Message(s) : 30
    mainy
    le Sam 1 Déc 2012 - 11:48
    Merci pour le tutoriel ! Very Happy
    FémininAge : 24Message(s) : 35
    Alinoé
    le Sam 8 Déc 2012 - 14:44
    Merci ! Very Happy
    MasculinAge : 34Message(s) : 11
    Lemmy1916
    le Dim 9 Déc 2012 - 12:05
    Merci pour le tuto !
    Contenu sponsorisé
    Aujourd'hui à 10:20

      La date/heure actuelle est Ven 30 Sep 2016 - 10:20