Header

Partagez | 

[FA] Totalement personnaliser la barre de nav'

Message Sujet: [FA] Totalement personnaliser la barre de nav'   Ven 15 Juin - 10:50

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci :
Spoiler:
 
C'est-à-dire : oublier la barre de navigation de base de ForumActif et la faire uniquement selon nos envies. ^^

Idea Pré-requis :
  • ce tutoriel a été uniquement testé sur un forum en phpbb2,
  • vous devez avoir accès aux templates,
  • des connaissances de base en html, css et javascript sont un plus,
  • conservez toujours votre template de départ (pour le remettre en vitesse si vous rencontrez des difficultés).


Les liens à utiliser


Pour commencer, récupérons les liens que nous allons devoir utiliser. Oui, comme nous n'allons plus nous servir de la barre de nav' de base de FA, nous allons devoir entrer nous même les liens de navigation. Les voici donc :
Code:
Forum : /forum
Portail : /
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
Vous pouvez retrouver ces liens en allant dans : Panneau d'admin >> Affichage >> Page d'accueil >> En-tête & navigation

La préparation de la barre de nav'


Dans mon exemple, j'ai une partie qui est visible quelque soit le statut du membre (connecté ou non) et une partie qui diffère selon si on est connecté ou pas. De plus, comme mes 2 éléments ne sont pas placés au même endroit, je vais les mettre dans 2 blocs (div) différents.

*** Le petit plus
Cette partie va être invisible mais elle va nous servir pour récupérer l'info "nouveaux mp"
Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

*** La partie commune
Ici, c'est simple, dans mon premier bloc, je vais avoir les premiers liens avec les images (vous pouvez remplacer les images par du texte Wink )
Code:
<div id="nav_forum_1">
         <a href="/forum"><img src="http://img4.hostingpics.net/pics/585470navforum.png" alt="Le forum" /></a><a href="/"><img src="http://img4.hostingpics.net/pics/684166navportail.png" alt="Le portail" /></a><a href="/search"><img src="http://img4.hostingpics.net/pics/997155navchercher.png" alt="Chercher" /></a><br><a href="/faq"><img src="http://img4.hostingpics.net/pics/919544navfaq.png" alt="FAQ" /></a><a href="/memberlist"><img src="http://img4.hostingpics.net/pics/647165navmb.png" alt="Membres" /></a><a href="/groups"><img src="http://img4.hostingpics.net/pics/921241navgroupe.png" alt="Groupes" /></a>
      </div>

*** La partie pour les connectés
On va devoir utiliser le javascript prédéfini de FA qui signifie "si le membre est connecté"
Code:
<!-- BEGIN switch_user_logged_in -->
      ....
         <!-- END switch_user_logged_in -->
et à l'intérieur de celui-ci, on met nos liens pour les connectés
Code:
<!-- BEGIN switch_user_logged_in -->
            <a href="/profile?mode=editprofile"><img src="http://img4.hostingpics.net/pics/840424navprofil.png" alt="Profil" /></a><a href="/privmsg?folder=inbox"><img src="http://img4.hostingpics.net/pics/591006navmp.png" alt="MP" id="mp"/></a><a href="/login?logout"><img src="http://img4.hostingpics.net/pics/718406navoff.png" alt="Déconnexion" /></a>
         <!-- END switch_user_logged_in -->

*** La partie pour les invités
On va devoir utiliser le javascript prédéfini de FA qui signifie "si le membre n'est pas connecté"
Code:
<!-- BEGIN switch_user_logged_out -->
      ...
         <!-- END switch_user_logged_out -->
et à l'intérieur de celui-ci, on met nos liens pour les visiteurs
Code:
<!-- BEGIN switch_user_logged_out -->
            <a href="/register"><img src="http://img15.hostingpics.net/pics/701611navinsc.gif" alt="Rejoins-nous" /></a><a href="/login"><img src="http://img15.hostingpics.net/pics/752870navon.png" alt="Connexion" /></a>
         <!-- END switch_user_logged_out -->


Arrow Au final, le code de la barre de nav' ressemble à ça :
Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
      <div id="nav_forum_1">
         <a href="/forum"><img src="http://img4.hostingpics.net/pics/585470navforum.png" alt="Le forum" /></a><a href="/"><img src="http://img4.hostingpics.net/pics/684166navportail.png" alt="Le portail" /></a><a href="/search"><img src="http://img4.hostingpics.net/pics/997155navchercher.png" alt="Chercher" /></a><br><a href="/faq"><img src="http://img4.hostingpics.net/pics/919544navfaq.png" alt="FAQ" /></a><a href="/memberlist"><img src="http://img4.hostingpics.net/pics/647165navmb.png" alt="Membres" /></a><a href="/groups"><img src="http://img4.hostingpics.net/pics/921241navgroupe.png" alt="Groupes" /></a>
      </div>
      <div id="nav_forum_2">
         <!-- BEGIN switch_user_logged_in -->
            <a href="/profile?mode=editprofile"><img src="http://img4.hostingpics.net/pics/840424navprofil.png" alt="Profil" /></a><a href="/privmsg?folder=inbox"><img src="http://img4.hostingpics.net/pics/591006navmp.png" alt="MP" id="mp"/></a><a href="/login?logout"><img src="http://img4.hostingpics.net/pics/718406navoff.png" alt="Déconnexion" /></a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_user_logged_out -->
            <a href="/register"><img src="http://img15.hostingpics.net/pics/701611navinsc.gif" alt="Rejoins-nous" /></a><a href="/login"><img src="http://img15.hostingpics.net/pics/752870navon.png" alt="Connexion" /></a>
         <!-- END switch_user_logged_out -->
      </div>

Idea Si vous utilisez du texte à la place des images, votre code ressemble ça :
Code:
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
      <div id="nav_forum_1">
         <a href="/forum">Le forum</a><a href="/">Le portail</a><a href="/search">Chercher</a><br><a href="/faq">FAQ</a><a href="/memberlist">Membres</a><a href="/groups">Groupes</a>
      </div>
      <div id="nav_forum_2">
         <!-- BEGIN switch_user_logged_in -->
            <a href="/profile?mode=editprofile">Profil</a><a href="/privmsg?folder=inbox" id="mp">MP</a><a href="/login?logout">Déconnexion</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_user_logged_out -->
            <a href="/register">Rejoins-nous</a><a href="/login">Connexion</a>
         <!-- END switch_user_logged_out -->
      </div>

La modification du template


Pour cette partie, tout va se jouer dans le template overall_header. Il va y avoir 2 manip' à faire.

1/ Supprimer la barre de nav' de base
Pour cela, repérez ce passage
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
et supprimez le.

2/ Placer la nouvelle barre
Pour cette partie, commencez par repérer l'endroit où vous désirez mettre votre nouvelle barre de navigation. Dans mon exemple, je vais la placer sur l'image du header, donc dans cette partie de mon template (qui a été personnalisée).
Code:
<div id="header" onclick="document.location.href='/forum'">
      
  </div>
Je vais donc y copier coller le code que nous avons fait précédemment.
Code:
<div id="header" onclick="document.location.href='/forum'">
      <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
      <div id="nav_forum_1">
         <a href="/forum"><img src="http://img4.hostingpics.net/pics/585470navforum.png" alt="Le forum" /></a><a href="/"><img src="http://img4.hostingpics.net/pics/684166navportail.png" alt="Le portail" /></a><a href="/search"><img src="http://img4.hostingpics.net/pics/997155navchercher.png" alt="Chercher" /></a><br><a href="/faq"><img src="http://img4.hostingpics.net/pics/919544navfaq.png" alt="FAQ" /></a><a href="/memberlist"><img src="http://img4.hostingpics.net/pics/647165navmb.png" alt="Membres" /></a><a href="/groups"><img src="http://img4.hostingpics.net/pics/921241navgroupe.png" alt="Groupes" /></a>
      </div>
      <div id="nav_forum_2">
         <!-- BEGIN switch_user_logged_in -->
            <a href="/profile?mode=editprofile"><img src="http://img4.hostingpics.net/pics/840424navprofil.png" alt="Profil" /></a><a href="/privmsg?folder=inbox"><img src="http://img4.hostingpics.net/pics/591006navmp.png" alt="MP" id="mp"/></a><a href="/login?logout"><img src="http://img4.hostingpics.net/pics/718406navoff.png" alt="Déconnexion" /></a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_user_logged_out -->
            <a href="/register"><img src="http://img15.hostingpics.net/pics/701611navinsc.gif" alt="Rejoins-nous" /></a><a href="/login"><img src="http://img15.hostingpics.net/pics/752870navon.png" alt="Connexion" /></a>
         <!-- END switch_user_logged_out -->
      </div>
  </div>

Et pour le nouveau message ?


Ah ! N'oublions pas ce détail ! Actuellement, notre barre de nav' ne nous indique pas si nous avons ou non reçu un nouveau mp. Nous allons donc nous occuper de ça dans cette partie. Pour cela, nous allons créer une nouvelle feuille javascript Panneau d'admin >> Modules >> HTML & Javascript >> Gestion des codes javascript que nous allons nommer "Nouveaux MP" et que nous allons afficher sur toutes les pages.
Spoiler:
 

Pour cela, nous allons lui dire :
-> quand la page est chargée
Code:
jQuery().ready(function(){
-> grâce au "petit plus" que nous avons réglé plus haut, tu vérifies s'il y a ou non un nouveau MP et s'il y en a un tu mets l'info dans une "case mémoire" (= variable) qu'on appelle "e"
Code:
 var e= $("#i_icon_mini_new_message");
-> S'il n'y a pas de nouveau MP, "e" n'existe pas, on laisse tomber
Code:
if(!e.length) return;
-> Sinon, s'il y a un nouveau MP, "e" existe et dans ce cas, on va remplacer l'image
Code:
$("#mp").attr('src','http://img15.hostingpics.net/pics/286123navnvmp.gif');
Idea ici, remplacez ça
Code:
http://img15.hostingpics.net/pics/286123navnvmp.gif
par votre propre image Smile

Arrow On a donc ce js au final :
Code:
jQuery().ready(function(){
       
        /* on prend l'élément du menu de base de nouveau message */
        var e= $("#i_icon_mini_new_message");
       
        /* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
        if(!e.length) return;
       
        /* sinon */
        $("#mp").attr('src','http://img15.hostingpics.net/pics/286123navnvmp.gif');
     
     
        });

Idea Si vous utilisez du texte à la place des images, votre code ressemble ça : (j'ai ajouté une fonction pour faire clignotter le texte Wink )
Code:
    function blinker()
{
        setTimeout(function() {setInterval(function () {$("#new_message").css('color', 'couleur1');},1000);},500);
        setInterval(function () {$("#new_message").css('color', 'couleur2');},1000);
}

jQuery().ready(function(){
       
        /* on prend l'élément du menu de base de nouveau message */
        var e= $("#i_icon_mini_new_message");
       
        /* si il y en a pas, c'est qu'il y a pas de nouveau message donc on termine là */
        if(!e.length){
        return;
      }else{
       
        /* sinon */
        /* on prend le nombre de nouveau message */
        var n= +e.attr("title").replace(/^([1-9][0-9]*) .*$/,"$1");
       
        /* on change l'identifiant en new_message et on remplace le texte */
        $("#mp").attr("id","new_message").text(n+" message"+(n>1?"s":""));
       
        blinker();
      }
     
     
        });
N'oubliez pas de changer les couleurs dans le blinker :
Couleur 1 = quand on voit le message
Couleur 2 = quand il est "invisible" (donc la même couleur que le fond de la barre de nav')


Pour finir



Il ne vous reste plus qu'à passer par le CSS pour correctement placer votre code Smile Par exemple, dans mon cas
Code:
div#nav_forum_1{
  margin:auto;
  width:439px;
  height:213px;
  position:absolute;
  margin-left:700px;
  margin-top:88px;
  }
 
div#nav_forum_2{
  margin:auto;
  width:439px;
  height:80px;
  position:absolute;
  margin-left:700px;
  margin-top:266px;
  }




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
[FA] Totalement personnaliser la barre de nav'
Page 1 sur 1
 Sujets similaires
-
» Personnaliser la barre de navigation
» Personnaliser la barre de navigation
» Créer une barre d'avertissement
» Scrollbar appliquée à toutes les barres.
» Personnaliser la barre de connexion rapide
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens