Barre de navigation flottante modifée avec effets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Sam 28 Fév 2015 - 23:02

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://thewitcher.jdrforum.com/

Description du problème

Bonjour/bonsoir,

J'aimerais savoir comment coder pour obtenir une barre de navigation flottante (toujours affichée en haut lorsque l'on parcourt la page), avec des titres modifiés ("rejoindre" à la place de "s'enregistrer", etc.) et des effets au survol.

Merci d'avance pour vos réponses. Smile


Dernière édition par SweetGumiho le Dim 1 Mar 2015 - 22:46, édité 1 fois

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Sam 28 Fév 2015 - 23:55

Bonjour,

Pour la barre de navigation en haut du forum, un tutoriel se trouve dans les Trucs et astuces ^^ :
Mettre sa barre de navigation en haut du forum

Le dernier code du tutoriel vous permet de modifier la mise en forme des liens de la barre de navigation. Pour la mise en forme des liens au survol, il suffit de rajouter le même genre de code css mais avec la pseudo-class :hover , comme ceci :
Code:
a.mainmenu:hover {
    font-size: 13px;
    color: yellow;
}
par exemple avec ce code le lien au survol sera de taille de police 13px et couleur jaune ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par Cyn le Dim 1 Mar 2015 - 4:48

Et pour ceci :

@SweetGumiho a écrit:flottante (toujours affichée en haut lorsque l'on parcourt la page)

Dans le tutoriel donné par MlleAlys, il suffit de remplacer

Code:
position: absolute;

Par :

Code:
position: fixed;

Cyn
**

Féminin
Messages : 77
Inscrit(e) le : 08/09/2006

http://cat-rpg.forumactif.org/
Cyn a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 11:09

Merci à vous deux. Alors en suivant le tutoriel, je n'arrive pas du tout à trouver les parties de code en question, hormis le {GENERATED_NAV_BAR}. Voici donc mon template overall_header :

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() {

         $('#fa_ticker_content').css('display','block');

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }


            $('#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');
         if(pm != null) { 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}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {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}
   <style type="text/css">
   #page-footer, div.navbar, div.navbar ul.linklist {
   display: block !important;
   }
   ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
   display: inline !important;
   }

   <!-- BEGIN switch_ticker_new -->
   .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;
   }
   <!-- END switch_ticker_new -->
   </style>
   {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>

<body id="phpbb">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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" style="z-index: 10000 !important;">
   <div class="h3">{SITENAME}</div>
   {LOGIN_POPUP_MSG}
   <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}" />
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
         <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
      </form>
   </div>
</div>
<!-- END switch_login_popup -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
   <a id="top" name="top" accesskey="t"></a>
   {JAVASCRIPT}

   <div id="page-header">
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
         <li>{GENERATED_NAV_BAR}</li>
         </ul>

         <!-- BEGIN switch_search_box -->
         <div id="search-box">
            <form method="get" action="{ACTION_SEARCH}" id="search">
               <p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="{L_SEARCH}..." onclick="if (this.value == '{L_SEARCH}...') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}...';" />
               {JS_SESSION_ID_INPUT}
               <input class="button2" type="submit" value="{L_SEARCH}" /></p>
            </form>
         </div>
         <!-- END switch_search_box -->

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
         <div class="module">
            <div class="inner">
               <span class="corners-top"><span></span></span>
                  <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>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div>
      </div>
      <!-- END switch_ticker_new -->

      <!-- BEGIN switch_ticker -->
      <div id="fa_ticker_block" style="margin-top:4px;">
         <div class="module">
            <div class="inner">
               <span class="corners-top"><span></span></span>
                  <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>
               <span class="corners-bottom"><span></span></span>
            </div>
         </div>
      </div>
      <!-- END switch_ticker -->
   </div>

   <div id="page-body">

   <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
      <div id="outer-wrapper">
         <div id="wrapper">
            <div id="container">
               <div id="content">

                  <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>

                  <div id="main">
                     <div id="main-content">

Merci d'avance. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Dim 1 Mar 2015 - 12:58

Oups oui c'est parce que le tutoriel n'est seulement que pour les forums phpbb2 et punbb, désolée ><"
Le principe reste cependant le même : il faut remonter la variable correspondant à la barre de navigation juste en dessous du début de la page (<body>), l'encadrer, et retirer ce qui ne sert plus à rien là où elle était au départ ^^

Essayez avec le template suivant :
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() {

        $('#fa_ticker_content').css('display','block');

        var width_max = $('ul#fa_ticker_content').width();
        var width_item = Math.floor(width_max / {switch_ticker.SIZE});

        if (width_max > 0)
        {
            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).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);
              }
            });

            if (slid_vert)
            {
              var height_max = h_perso;

              $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                    height_max = $(this).height();
                  }
              } );

              $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
              $('ul#fa_ticker_content li').height(height_max);
            }


            $('#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');
        if(pm != null) { 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}');
        if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        $(document).ready(function() {
            Ticker.start({
              height : {switch_ticker.HEIGHT},
              spacing : {switch_ticker.SPACING},
              speed : {switch_ticker.SPEED},
              direction : '{switch_ticker.DIRECTION}',
              pause : {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}
  <style type="text/css">
  #page-footer, div.navbar, div.navbar ul.linklist {
  display: block !important;
  }
  ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
  display: inline !important;
  }

  <!-- BEGIN switch_ticker_new -->
  .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;
  }
  <!-- END switch_ticker_new -->
  </style>
  {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>

<body id="phpbb">

<center><div class="navig">{GENERATED_NAV_BAR}</div></center>
 
 
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
  <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.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" style="z-index: 10000 !important;">
  <div class="h3">{SITENAME}</div>
  {LOGIN_POPUP_MSG}
  <div id="login_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
        <input type="submit" class="button1" value="{L_LOGIN}" />
        <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
        <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
      </form>
  </div>
</div>
<!-- END switch_login_popup -->

<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
  <a id="top" name="top" accesskey="t"></a>
  {JAVASCRIPT}

  <div id="page-header">
      <div class="headerbar">
        <div class="inner"><span class="corners-top"><span></span></span>

        <div id="logo-desc">
            <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
        </div>

        <span class="corners-bottom"><span></span></span></div>
      </div>

      <!-- BEGIN switch_ticker_new -->
      <div id="fa_ticker_blockD" style="margin-top:4px;">
        <div class="module">
            <div class="inner">
              <span class="corners-top"><span></span></span>
                  <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>
              <span class="corners-bottom"><span></span></span>
            </div>
        </div>
      </div>
      <!-- END switch_ticker_new -->

      <!-- BEGIN switch_ticker -->
      <div id="fa_ticker_block" style="margin-top:4px;">
        <div class="module">
            <div class="inner">
              <span class="corners-top"><span></span></span>
                  <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>
              <span class="corners-bottom"><span></span></span>
            </div>
        </div>
      </div>
      <!-- END switch_ticker -->
  </div>

  <div id="page-body">

  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
      <div id="outer-wrapper">
        <div id="wrapper">
            <div id="container">
              <div id="content">

                  <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>

                  <div id="main">
                    <div id="main-content">

et le css suivant :
Code:
.navig {
    position: fixed;
    top:0;
    width:100%
    background: black; /*couleur de fond de la barre de navigation*/
    box-shadow: 0 2px 10px black;  /*effet d'ombre sous la barre de navigation*/
}
.navig li {
    display: inline-block;
    padding: 5px;  /*marge autour des liens*/
}


Pour les effets au survol, il nous faudra un peu plus de précision par contre, parce qu'on peut en faire plein.... ^^"


Dernière édition par MlleAlys le Dim 1 Mar 2015 - 21:01, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 16:45

Merci beaucoup pour ton aide. Voici les détails manquants :

▶ Détails sur la barre de navigation :

- Police de l'écriture : Alegreya SC.
- Couleur de l'écriture de base : #6F7D7D.
- Couleur au survol : #4D7999.
- Autre effet au survol : Léger espacement des lettres.

- Remplacer "Accueil" par "Forum".
- Remplacer "FAQ" par "Foire Aux Questions".
- Garder "Rechercher" tel quel.
- Remplacer "Membres" par "Aventuriers".
- Remplacer "Groupes" par "Peuples".
- Remplacer "Profil" par "Votre Personnage" (ou simplement "Personnage").
- Remplacer "MP" par "Missives", et faire en sorte que le mot change aussi de couleur lorsqu'un nouveau MP non-lu est arrivé.
- Remplacer "Connexion" par "Entrer".
- Remplacer "Déconnexion [Nom d'utilisateur]" par "Partir" (sans le nom d'utilisateur, ou alors dans une bulle).
- Remplacer "S'enregistrer" par "Rejoindre".

Et je n'ai pas besoin du "Calendrier".

Voilà, merci encore. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Dim 1 Mar 2015 - 17:49

Tout ce qui concerne la mise en forme des liens pourra être mis dans un code css du genre :
Code:
.navig a {
    ...
}
Ici ça donne :
Code:
.navig a {
    font-family: 'Alegreya SC'; /*police des liens*/
    color: #6F7D7D;  /*couleur ds liens*/
}

Tout ce qui concerne la mise en forme des liens au survol pourra être mis dans un code css du genre :
Code:
.navig a:hover {
    ...
}
Ce qui donne ici :
Code:
.navig a:hover {
    color: #4D7999;  /*couleur des liens au survol*/
    letter-spacing: 1px;  /*espacement des lettres au survol (0=normal)*/
}

Pour ce qui est de la couleur en cas de nouveau message, l'astuce suivante semble fonctionner sur mon forum test phpbb3, vous pouvez l'essayer :
phpBB2 : Une couleur pour les nouveaux messages privés

Pour changer le nom des liens, voilà un javascript à mettre sur toutes les pages :
Code:
$(function() {
    $('a.mainmenu[href="/"]').text('Forum');
    $('a.mainmenu[href="/faq"]').text('Foire Aux Questions');
    $('a.mainmenu[href="/memberlist"]').text('Aventuriers');
    $('a.mainmenu[href="/groups"]').text('Peuples');
    $('a.mainmenu[href="/profile?mode=editprofile"]').text('Votre personnage');
    $('a.mainmenu[href="/privmsg?folder=inbox"]').text('Missives');
    $('a.mainmenu[href="/register"]').text('Nous rejoindre');
    $('a.mainmenu[href="/login"]').text('Entrer');
    $('a.mainmenu[href^="/login?logout"]').text('Sortir');
});

Enfin, en ce qui concerne le calendrier, vous pouvez tout simplement le désactiver dans les modules. ^^


Dernière édition par MlleAlys le Dim 1 Mar 2015 - 21:09, édité 2 fois (Raison : J'avais oublié "entrer" et "sortir" dans le code ><")

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 18:54

Merci pour tout, c'est parfait. Juste j'aimerais que les différents éléments "Forum", "Foire Aux Questions", etc. soit plus espacés entre eux.
Et aussi j'aimerai savoir quel est le codage pour afficher en réception de messages :"1 missive", "3 missives".
De plus le tutoriel pour le changement de couleur lorsqu'un nouveau message arrive ne semble pas fonctionner (je l'ai testé).
Merci encore. Smile

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Dim 1 Mar 2015 - 19:04

Pour les écarter, vous pouvez essayer d'ajouter des espaces au début ou à la fin des nouveaux noms dans le javascript précédent, ou bien encore augmenter la marge autour des liens codée dans le css donné ici

Pour afficher le nombre de missives, ma réponse va être assez rapide : désolée, je ne sais pas =s Je ne m'y connais pas bien en javascript ^^" Mais je vais me renseigner, ou quelqu'un d'autre répondra-t-il avant ^^"

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 19:07

Merci encore pour vos réponses, ainsi que pour votre vitesse et réactivité. ^^
*
Sinon le tutoriel ne semble pas marcher sur mon forum malheureusement. :/
@SweetGumiho a écrit:De plus le tutoriel pour le changement de couleur lorsqu'un nouveau message arrive ne semble pas fonctionner (je l'ai testé).

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Dim 1 Mar 2015 - 19:31

Le code fonctionne bien chez moi...
Vérifiez que le code est correctement installé :
- Dans Module > Gestion des codes javascript
- Vérifiez que "Activer la gestion des codes Javascript" est cochée sur "OUI" (mais normalement c'est bon puisque le changement de nom des liens fonctionne)
- Créez un nouveau code
- Donnez lui un nom ("couleur nouveaux mp" par exemple)
- Appliquez le javascript "Sur toutes les pages"
- Collez le code suivant dans la zone de saisie :
Code:
$(function(){
          $('img#i_icon_mini_new_message').parent().css('color','#FF0000');
});
- Enregistrez

Utilisez un autre compte pour envoyer un message privé et voir en actualisant l'index si le lien change de couleur :
- si oui, tout va bien, et vous pouvez si voulu modifier la couleur dans le javascript
- si non.... Je ne saurais pas dire pourquoi il fonctionne bien chez moi, et pas chez vous... ><"

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 19:43

J'ai bien suivi étape par étape, ait envoyé un message d'un compte à l'autre et le changement de couleur ne se fait toujours pas. Peut-être un des codes précédents ou un autre code qui entre en conflit ? :/ Sinon est-ce qu'il y a le moyen de paramétrer pour que la popup de nouveau message ne soit pas activée par défaut ?

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par MlleAlys le Dim 1 Mar 2015 - 20:51

J'ai appliqué tous les codes que j'ai donnés précédemment sur mon forum test, et ça fonctionne... Je ne sais pas dire d'où ça vient, je vais passer la main

Pour la pop up, ça va être encore du javascript, mais c'est un sujet différent de la personnalisation de la barre de navigation, et je conseille d'ouvrir un autre sujet, de façon à ce que les sujets restent bien compréhensibles et facilement reconnaissables pour les autres membres qui pourraient avoir les mêmes questions ! ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation flottante modifée avec effets

Message par SweetGumiho le Dim 1 Mar 2015 - 22:46

Je vais de toute façon déclarer ce sujet comme résolu et plutôt ouvrir des sujets spécifiques à chaque problème.
Merci encore MlleAlys pour toute l'aide fournie ! ♥

SweetGumiho
****

Féminin
Messages : 340
Inscrit(e) le : 11/10/2014

http://...
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum