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 3 Sign_n10
    Nobuko2
    Nobuko2
    MasculinAge : 44Messages : 43

    le Ven 8 Fév 2013 - 18:40

    Merci !
    Bleufi
    Bleufi
    FémininAge : 24Messages : 311

    le Ven 8 Fév 2013 - 18:53

    Merci Wink



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 875686Asuna
    ninouee
    ninouee
    FémininAge : 38Messages : 138

    le Sam 9 Fév 2013 - 20:13

    je suis curieuse de voir ce que ça donne. Very Happy



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 Robert12
    Hisha
    Hisha
    FémininAge : 20Messages : 44

    le Dim 10 Fév 2013 - 17:33

    Merci! (:
    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Dim 10 Fév 2013 - 22:37

    Merci pour le tuto
    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Dim 10 Fév 2013 - 22:44

    Je ne veux pas paraitre cruche, mais je ne suis pas certaine d'avoir comprit le tuto. Moi je voudrais avant tout avoir le texte «Nouveaux messages» à l'intérieur de ma PA en suivant le tutoriel disponible ici :


    http://www.never-utopia.com/t41240p75-templatescss-navigation-laterale#625182

    C'est à l'intérieur de ce tuto que j'ai vu le lien pour la mise en place du bouton «nouveaux messages». Je ne veux pas mettre d'image, juste avoir le texte. Du coup, je suis un peu perdu, car ici je vois un tuto complet pour faire une navigation. Étant donné mon talent en codage je suis perdu Sad

    Merci pour l'aide ^^
    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Dim 10 Fév 2013 - 23:31

    xodramm : Tu peux avoir le changement si tu le veux. Si ta barre de navigation est déjà générée, tu n'as pas à suivre les deux premières étapes du tutoriel. Il te suffit de mettre l'attribut id="mp" dans le lien correspondant aux MP de ta PA, puis de faire une variante du code jquery. Si tu veux uniquement modifier l'aspect du texte, par exemple la couleur, tu devras remplacer $("#mp").attr('src','URL DE L'IMAGE'); par $("#mp").css('color','red'); . Tu peux adapter ce code en fonction de ce que tu veux changer. Si tu veux que le texte change complètement, genre qu'il passe de MP à Nouveaux MP, tu devras remplacer la ligne par $("#mp").text("Nouveaux MP");



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 Sign_n10
    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Lun 11 Fév 2013 - 0:10

    Merci pour la réponse. J'ai essayer, mais visiblement ça ne fonctionne pas. Du coup, je présume que j'ai fait quelque chose qui ne fonctionne pas.

    Voici mon code java :



    Code:
    jQuery().ready(function(){
            var newmp = $("#i_icon_mini_new_message");
            if(!newmp.length) return;
            $("#mp").css('color','#e3dea4');
    });

    Voici la partie où se trouve les liens de ma navigation :

    Code:
     <a href="http://blakens.forum-canada.com/index.htm">Accueil</a><br />
              <a href="http://blakens.forum-canada.com/search">Recherche</a><br />
              <a href="http://blakens.forum-canada.com/memberlist">Membres</a><br />
              <a href="http://blakens.forum-canada.com/groups">Groupes</a><br />
              <a href="http://blakens.forum-canada.com/profile?mode=editprofile">Profil</a><br />
              <a href="http://blakens.forum-canada.com/privmsg?folder=inbox id="mp">Messages Privés</a><br />
              <a href="http://blakens.forum-canada.com/register">Nous Rejoindre</a><br />
              <a href="http://blakens.forum-canada.com/t15-listing-de-nos-partenaires">Nos partenaires</a><br />
                  <a href="http://blakens.forum-canada.com/login">Connexion</a><br />
              <a href="http://blakens.forum-canada.com/login?logout">Déconnexion</a><br /><br />

    Merci de m'indiquer où j'ai gaffé ^^
    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Lun 11 Fév 2013 - 9:27

    As-tu une barre de navigation générée par ce code ? {GENERATED_NAV_BAR}

    Si non, insère
    Code:
    <div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
    juste après la balise
    Code:
    <body>
    de ton template. Cela devrait marcher.



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 Sign_n10
    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Lun 11 Fév 2013 - 17:46

    J'ai pas de body nulle part .... Voici mon template au complet au cas où je suis aveugle.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>
      <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
      <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <!-- BEGIN switch_compat_meta -->
      <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
      <!-- END switch_compat_meta -->
      <!-- BEGIN switch_canonical_url -->
      <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
      <!-- END switch_canonical_url -->
      {META_FAVICO}
      {META}
      {META_FB_LIKE}
      <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
      {T_HEAD_STYLESHEET}
      {CSS}
      <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
      <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
      <script src="{JQUERY_PATH}" type="text/javascript"></script>
      <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

      <!-- BEGIN switch_fb_login -->
      <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
      <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
      <!-- END switch_fb_login -->

      <!-- BEGIN switch_ticker -->
      <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
      <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
      <!-- END switch_ticker -->

      <!-- BEGIN switch_ticker_new -->
      <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
      <script type="text/javascript">//<![CDATA[
          /* Definir le sens de direction en fonction du panneau admin */
          var tickerDirParam = "{switch_ticker.DIRECTION}";
          var slid_vert = false;
          var auto_dir = 'next';
          var h_perso = parseInt({switch_ticker.HEIGHT});

          switch( tickerDirParam )
          {
            case 'top' :
                slid_vert = true;
                break;

            case 'left':
                break;

            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

            case 'right':
                auto_dir = 'prev';
                break;

            default:
                slid_vert = true;
          }

          $(document).ready(function() {
            var w_cont = $('#fa_ticker_container').width();

            if (w_cont > 0)
            {
                $('#fa_ticker_container').width(w_cont);

                /* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

                /* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

                /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                      height_max = $(this).height();
                  }
                } );

                /* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
                  if ($(this).width() > width_item)
                  {
                  var ratio      = $(this).width() / width_item;
                  var new_height = Math.round($(this).height() / ratio);
                  $(this).height(new_height).width(width_item);
                  }
                });

                /* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert)
                {
                  $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

                /* Initialisation du caroussel */
                $('#fa_ticker_content').jcarousel({
                      vertical: slid_vert,
                  wrap: 'circular',
                  auto: {switch_ticker.STOP_TIME},
                  auto_direction: auto_dir,
                scroll: 1,
                size: {switch_ticker.SIZE},
                height_max: height_max,
                animation: {switch_ticker.SPEED}
                });
            }
            else
            {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
            }
          });
      //]]>
      </script>
      <!-- END switch_ticker_new -->

      <script type="text/javascript">//<![CDATA[
      $(document).ready(function(){
          <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            pm.focus();
          <!-- END switch_enable_pm_popup -->
          <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            report.focus();
          <!-- END switch_report_popup -->
          <!-- BEGIN switch_ticker -->
            ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
          <!-- END switch_ticker -->
      });

      <!-- BEGIN switch_login_popup -->
          var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
      <!-- END switch_login_popup -->

      <!-- BEGIN switch_login_popup -->
      $(document).ready( function() {
          $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
          });
      });
      <!-- END switch_login_popup -->
      //]]>
      </script>
      {GREETING_POPUP}
      <!-- BEGIN switch_ticker_new -->
      <style>
      .jcarousel-skin-tango .jcarousel-item {
          text-align:center;
          width: 10px;
      }

      .jcarousel-skin-tango .jcarousel-item-horizontal {
          margin-right: {switch_ticker.SPACING}px;
      }

      .jcarousel-skin-tango .jcarousel-item-vertical {
          margin-bottom: {switch_ticker.SPACING}px;
      }
      </style>
      <!-- END switch_ticker_new -->
      {HOSTING_JS}
      <!-- BEGIN google_analytics_code -->
      <script type="text/javascript">
      //<![CDATA[
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
        _gaq.push(['_trackPageview']);
      _gaq.push(['_trackPageLoadTime']);

      <!-- BEGIN google_analytics_code_bis -->
      _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
      _gaq.push(['b._trackPageview']);
      <!-- END google_analytics_code_bis -->

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      //]]>
      </script>
      <!-- END google_analytics_code -->
    </head>
     
      <div id="menu">
              <div>
                  <a class="bouton" href="#">Fermer le menu</a><br />
              </div>
           
              <center><strong>Les News</strong></center>
      <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
              <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
                <strong>~ xx/xx/xx :</strong> bla bla bla<br />
                <strong>~ xx/xx/xx :</strong> bla bla bla<br />
                <strong>~ xx/xx/xx :</strong> bla bla bla<br />
              </span>
      </marquee>
           
              <center><strong>Liens rapides</strong></center>
              <center><em>Principaux</em></center>
              <a href="http://blakens.forum-canada.com/index.htm">Accueil</a><br />
              <a href="http://blakens.forum-canada.com/search">Recherche</a><br />
              <a href="http://blakens.forum-canada.com/memberlist">Membres</a><br />
              <a href="http://blakens.forum-canada.com/groups">Groupes</a><br />
              <a href="http://blakens.forum-canada.com/profile?mode=editprofile">Profil</a><br />
              <a href="http://blakens.forum-canada.com/privmsg?folder=inbox id="mp">Messages Privés</a><br />
              <a href="http://blakens.forum-canada.com/register">Nous Rejoindre</a><br />
              <a href="http://blakens.forum-canada.com/t15-listing-de-nos-partenaires">Nos partenaires</a><br />
                  <a href="http://blakens.forum-canada.com/login">Connexion</a><br />
              <a href="http://blakens.forum-canada.com/login?logout">Déconnexion</a><br /><br />
         
              <center><em>Rôle Play et HRP</em></center>
              <a href="http://blakens.forum-canada.com/t2-blacken-s-island-presentation-du-projet-blacken">Contexte de Blacken</a><br />
              <a href="http://blakens.forum-canada.com/t4-charte-de-blacken-s">Charte de Blacken</a><br />
              <a href="http://blakens.forum-canada.com/t7-credits-de-blacken-s">Crédits du forum</a><br />
                  <a href="http://blakens.forum-canada.com/t19-guide-du-nouvel-arrivant">Guide de Blacken</a><br />
              <a href="http://blakens.forum-canada.com/t6-les-groupes-de-blacken-s">Groupes de Blacken</a><br />
                  <a href="http://blakens.forum-canada.com/t17-informations-importantes-avant-de-creer-votre-personnage">Infos importantes</a><br />
                  <a href="http://blakens.forum-canada.com/t11-formualire-de-presentation#11">Fiche de présentation</a><br />
              <a href="http://blakens.forum-canada.com/t13-galerie-d-avatars">Galerie d'avatars</a><br />
              <a href="http://blakens.forum-canada.com/t16-liste-des-avatars-pris">Avatars pris</a><br />
              <a href="http://blakens.forum-canada.com/t18-pnj">PNJ</a><br />
              <a href="http://blakens.forum-canada.com/t25-predefinis#37">Prédéfinis</a><br />
              <a href="http://blakens.forum-canada.com/t27-devnir-partenaire-avec-blacken-s-island">Nous lier</a><br />
              <a href="http://blakens.forum-canada.com/t32-creatures-de-blaken-s-island">Créatures</a>
                <br /><br />
             
                <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
                  <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
              <a class="bouton2" href="#menu">Ouvrir le menu</a>
      </div>
     
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
      <!-- BEGIN hitskin_preview -->
      <div id="hitskin_preview" style="display: block;">
          <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
          <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
            </p>
          </div>
      </div>
      <!-- END hitskin_preview -->

      <!-- BEGIN switch_login_popup -->
      <div id="login_popup">
          <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
            <tr height="25">
                <td class="catLeft">
                  <span class="genmed module-title">{SITENAME}</span>
                </td>
            </tr>
            <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                  <div id="login_popup_buttons">
                      <form action="{S_LOGIN_ACTION}" method="get">
                        <input type="submit" class="mainoption" value="{L_LOGIN}" />
                        <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                        <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                      </form>
                  </div>
                  <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
            </tr>
          </table>
      </div>
      <!-- END switch_login_popup -->

      <a name="top"></a>
      {JAVASCRIPT}

      <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
            <td class="bodyline">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                      <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_left -->
                      <td align="center" width="100%" valign="middle">
                        <!-- BEGIN switch_logo_center -->
                        <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                        <br />
                        <!-- END switch_logo_center -->
                        <div class="maintitle">{MAIN_SITENAME}</div>
                        <br />
                        <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                      </td>
                      <!-- BEGIN switch_logo_right -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_right -->
                  </tr>
                </table>

                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                        <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                              <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                                  <!-- BEGIN ticker_row -->
                                  <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                  <!-- END ticker_row -->
                              </ul>
                            </div>
                        </td>
                      </tr>
                  </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                        <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                              <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                  <div class="fa_ticker_content">
                                    <!-- BEGIN ticker_row -->
                                    <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                    <!-- END ticker_row -->
                                  </div>
                              </div>
                            </div>
                        </td>
                      </tr>
                  </table>
                </div>
                <!-- END switch_ticker -->

                <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                      <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                        <tbody>
                            <tr>
                              <td valign="top" width="{C1SIZE}">
                                  <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                  </div>
                              </td>
                              <td valign="top" width="100%">
    <!-- BEGIN html_validation -->
                              </td>
                            </tr>
                        </tbody>
                      </table>
                  </div>
                </div>
            </td>
          </tr>
      </table>
    </body>
    </html>
    <!-- END html_validation -->


    merci encore pour l'aide et désolé encore pour le dérangement.
    Eraendil
    Eraendil
    FémininAge : 27Messages : 92

    le Lun 11 Fév 2013 - 18:08

    Ta balise body est juste après ton code de Pa, regarde bien :)



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 Sign_n10
    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Lun 11 Fév 2013 - 18:32

    Je me sens légèrement cruche, mais je ne trouve pas du tout. Sans oublier que je n'ai pas de PA coder du coup, help je trouve pas du tout :calimero: J'ai tenter après le dernier body, mais ça fonctionne pas jai pas trouver le du tout.
    Sunshiine*
    Sunshiine*
    FémininAge : 24Messages : 16

    le Lun 11 Fév 2013 - 21:45

    Merci !
    Asunie
    Asunie
    FémininAge : 27Messages : 68

    le Mar 12 Fév 2013 - 14:49

    Merci ! :)
    Sara_y
    Sara_y
    FémininAge : 29Messages : 81

    le Jeu 14 Fév 2013 - 9:17

    Bonjour
    Merci beaucoup ^^



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 389654Arrow
    bianca ~♥~
    bianca ~♥~
    FémininAge : 51Messages : 111

    le Jeu 14 Fév 2013 - 16:48

    Merci :)



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 Coco_c11
    Alzufen
    Alzufen
    MasculinAge : 24Messages : 2103

    le Jeu 14 Fév 2013 - 23:09

    Sympa, merci =)



    xodramm
    xodramm
    FémininAge : 41Messages : 286

    le Ven 15 Fév 2013 - 2:28

    Je me permet de faire un petit up svp, j'aimerais vraiment régler mon petit soucis Embarassed merci
    RozenBreizh
    RozenBreizh
    FémininAge : 28Messages : 1392

    le Sam 16 Fév 2013 - 0:42

    Merci à tous les deux pour ce tuto Wink
    Carmina
    Carmina
    FémininAge : 33Messages : 338

    le Sam 16 Fév 2013 - 14:31

    merci
    Amaluna
    Amaluna
    FémininAge : 29Messages : 103

    le Lun 18 Fév 2013 - 3:40

    J'adore ! Merci beaucoup
    AlexeB
    AlexeB
    FémininAge : 24Messages : 165

    le Lun 18 Fév 2013 - 5:20

    Merciiiiiiiiiiiiiii :heart:
    MyNameIsTanalia
    MyNameIsTanalia
    FémininAge : 22Messages : 25

    le Mar 19 Fév 2013 - 20:05

    Merci !
    Bleufi
    Bleufi
    FémininAge : 24Messages : 311

    le Sam 23 Fév 2013 - 11:18

    Bonjour,
    Je n'arrive pas à trouver mon lien déconnexion.
    Est ce que quelqu'un pourrait m'aider ? :)
    Merci



    [Template, CSS, Javascript] Créer sa propre barre de navigation - Page 3 875686Asuna
    Moriarty
    Moriarty
    FémininAge : 24Messages : 85

    le Mer 27 Fév 2013 - 19:49

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2019 - 17:14