AccueilDernières imagesRechercherS'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.

Le Deal du moment : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.99 €

    (NIHIL) Codage de la Toolbar / Fusion avec la barre de navigation

    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Jeu 22 Oct 2015 - 12:00

    Rappel du premier message :

    Ma demande



    Bonjour bonjour !

    Puisqu'on arrête pas le progrès, je cherche un moyen de "combiner" la Toolbar forumactif et la barre de menu de mon forum.

    L'adresse de mon forum est la suivante : NOVUS

    Mon idée serait d'intégrer dans une même barre le centre de notification, le panel "bienvenue (member) et ses sous menus, puis les menus de mon actuelle barre de navigation : INDEX, FAQ, MEMBRES, GROUPES, BANDE ORIGINALE, MESSAGERIE, PROFIL et CONNEXION/DECONNEXION/INSCRIPTION. Le best-of serait également d'avoir un lien pour faire apparaître la Chatbox en pop-up.

    Auriez-vous des suggestions, des modèles de codage de Toolbar ? J'ai eu du mal à en trouver jusqu'à présent. Mes critères seraient simplement l'esthétisme et la fonctionnalité (un peu comme celle de Never-Utopia d'ailleurs !).



    Schéma(s) et Eléments

    Effets voulus : Affichage de l'avatar du membre connecté, et animation sur les liens.
    Version de votre forum : PHPBB2

    Autres précisions ?
    Comme je le précise dans la plupart de mes demandes de codage, il est difficile pour un néophyte de savoir ce qui est réalisable et ce qui ne l'est pas. Alors n'hésitez pas à engager le dialogue avec moi :)


    Merci d'avance des 28 petits heureux que vous ferez sur mon forum !
    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Lun 30 Nov 2015 - 18:03

    Super, on a étudié les trois propositions et la seconde, avec la barre fine, nous va à merveilles.
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 2 Déc 2015 - 22:07

    Coucou Novus, merci pour la précision :)

    Je poste pour dire que je suis désolée, mais je ne sais pas si je vais pouvoir finir cette demande de LS,je suis très occupée ces temps-ci, ou alors il faudra patienter "beaucoup" (jusqu'au vacances de Noel) :/
    (EDIT : je viens de réaliser que les vacances c'étaient dans 2/3 semaines en fait -_-)

    Il n'y a plus grand chose à faire, donc je vais essayer de régler ça ce week-end si possible, mais sinon je vais peut-être devoir me retirer pour laisser la place à quelqu'un d'autre, histoire de ne pas bloquer une demande pour rien.

    Du coup si tu as des remarques supplémentaires, des idées, etc, hésite pas à le faire maintenant pour que je puisse voir ce week end  (j'aimerais vraiment pouvoir finir votre libre service ! ♥)


    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Jeu 3 Déc 2015 - 14:22

    Coucou Nihil,


    Ne t'en fais pas, nous ne sommes pas pressés. Si ce n'est "que" jusqu'au vacances de Noël ça ira très bien, sauf si quelqu'un souhaite faire cette création entre temps évidemment.

    Nous avons aussi un programme chargé et ça nous arrange d'implémenter les nouveaux codes pendant les vacances.
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 9 Déc 2015 - 15:31

    Top, si ça peut attendre les vacances ça m'arrange bien :)
    Du coup, pense juste à up 1 fois par semaine (ou tous les 10 jours, je ne me souviens plus XD) pour éviter que le sujet coule et voilà ♥

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mer 9 Déc 2015 - 17:09

    Oups ! Okay je vais essayer de upper comme il faut alors !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 9 Déc 2015 - 23:43

    Bon finalement j'ai bien avancé en fait XD !

    Est ce que tu as un forum test où on peut tester une installation (pour vérifier que tout est bon pour toi) ou bien tu testeras directement sur ton forum :) ?

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Jeu 10 Déc 2015 - 23:27

    Coucou ! Malheureusement je n'ai pas de forum test... Je compte faire les test sur mon propre forum !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 11 Déc 2015 - 21:19

    Ouki ouki :3

    Alors, pour pouvoir t'indiquer quoi modifier, est ce que tu peux me copier / coller ton template overall_header s'il te plait ? (ça permettra aussi d'avoir une copie ici, s'il y a le moindre soucis ensuite à l'installation tu peux facilement revenir en arrière en récupérant la version sur le topic)

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Sam 12 Déc 2015 - 22:50

    Coucou Nihil. 
    Tout d'abord excuse moi pour le délai de ma réponse. J'étais en examens, et ma dernière épreuve durait 48h (oui oui !).


    Alors voici mon template overall_hearder :



    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 ?l?ments */
                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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                   if ($(this).height() > height_max)
                   {
                      height_max = $(this).height();
                   }
                } );

                /* Redimensionnement des ?l?ments 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']);

        (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>
    <table id="nav_barr" style="position: fixed; left: 0px; top: 0px; right: 0px; z-index:1000; width: 100%" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>
       <!-- BEGIN hitskin_preview -->
       <div id="hitskin_preview" style="display: block;">
          <h1><img src="http://2img.net/i/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 />&nbsp; </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>

                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}></td>
                   </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:50px;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 -->
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 14 Déc 2015 - 23:34

    T'inquiète pas, je suis assez occupée aussi xD

    J'ai fait un premier essai, voici la modification dans le template :
    Code:
    <table id="nav_barr" style="position: fixed; left: 0px; top: 0px; right: 0px; z-index:1000; width: 100%" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>

    Devient :
    Code:
    <div class="generated_nav_bar">{GENERATED_NAV_BAR}</div>

    Ensuite le CSS à rajouter :


    Il te faudra ensuite activer ta toolbar :)

    Il nous restera un petit javascript à mettre, pour l'avatar + enlever le pseudo du texte "Déconnexion" ^^


    Si quelque chose ne marche pas, n'hésite pas à enlever mon code, par contre, je veux bien une capture d'écran du / des problèmes ! :)

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mar 15 Déc 2015 - 11:51

    Coucou Nihil,

    Alors, j'ai bien fait toutes les modifications, et il doit y avoir un petit soucis d'affichage. Je te laisses regarder :

    (NIHIL) Codage de la Toolbar / Fusion avec la barre de navigation - Page 2 2015-110


    Trop de texte dans la barre de navigation ?
    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mer 16 Déc 2015 - 23:16

    Coucou, 

    Alors après rafraîchissement et suppression du cache, le "Déconnexion (nom d'utilisateur)" s'affiche bien comme il faut, mais je n'ai pas l'avatar qui s'affiche.
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 17 Déc 2015 - 22:33

    Oups je suis étourdie moi :toto:

    Dans le template overall_header, juste en dessous de la div avec la barre de navigation il y a ceci à rajouter :
    Code:
    <!-- BEGIN switch_user_logged_in -->
        <div class="fa_avatar js-useravatar"></div>
    <!-- END switch_user_logged_in -->

    Ca donne donc comme "code total" (barre de navigation + avatar) :
    Code:
    <div class="generated_nav_bar">{GENERATED_NAV_BAR}</div>
    <!-- BEGIN switch_user_logged_in -->
        <div class="fa_avatar js-useravatar"></div>
    <!-- END switch_user_logged_in -->

    Voilà, désolée pour le retard ! :)

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Jeu 17 Déc 2015 - 22:48

    Merci Nihil.

    Alors tout fonctionne correctement, il va simplement que je modifie deux trois trucs au niveau du style :

    • Rapprocher le "Bienvenue utilisateur" de l'image de l'avatar, pour le coller davantage à ce dernier
    • Changer la couleur du cercle de l'avatar, pour y mettre la couleur de bordure du menu.
    • Harmoniser le style entre les boutons du menu et "Bienvenue utilisateur" / Notifications
    • Supprimer les boutons "Connexion/S'enregistrer" version barre de navigation pour les non log-in


    Sans coder tout toi-même, peut-être pourrais-tu m'indiquer où j'agis sur ces paramètres, et quel genre de code je peux utiliser ? (As-tu des codes sympathiques pour l'animation des liens, le menu de Never Utopia, par exemple, es très réussi en la matière).


    Enfin, je souhaiterais avoir ton avis sur les doublons qui existent entre le sous panneau de l'utilisateur et les boutons du menu, comme messagerie, profil, etc... Crois-tu que c'est intéressant de les conserver ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 17 Déc 2015 - 23:10

    Coucou :)

    - Pour la bordure de l'avatar, le CSS est ici :
    Code:
    /* rond avec l.avatar */
    .fa_avatar {
        background: #969DC1;
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 50%;
        top: 7px;
        left: 135px;
        z-index: 999;
        border: 2px solid #65511A;
        box-shadow: 0 0 5px black;
        overflow: hidden;
    }

    Il faut changer la couleur #65511A à cette ligne là :
    Code:
    border: 2px solid #65511A;

    - Pour l'espacement entre le "Bienvenue" et l'avatar, tu vas pouvoir changer la valeur de left ici :
    Code:
    /* Menu welcome */
    #fa_menu {
        position: fixed;
        top: 0px;
        left: 200px;
    }

    - Afin de styliser les liens "Bienvenue" et "Notifications", tu peux ajouter et modifier ceci :
    Code:
    #fa_notifications, #fa_welcome {
        color: #dea37e!important;
        font-family: Corbel;
        font-size: 14px;
        font-variant: small-caps;
        letter-spacing: 1px;
    }

    - En mode déconnecté, on va retirer les liens en double de la toolbar grâce à ceci => Toolbar > Cacher les liens Connexion et S'enregistrer
    Je viens d'ailleurs de m'apercevoir d'un petit bug en mode déconnecté qu'il faut que je pense à changer, le contenu est mal centré sur les "petits écrans" .

    Enfin, les animations, en général je les fais moi même, je n'ai pas forcément de code "tout fait" sous la main, car la toolbar est un peu "saoulante" à modifier si on a pas l'habitude (donc même avec un code tout fait tu aurais un peu de mal ><), et ici je reprends la toolbar directement (sur Never Utopia, c'est un nouvel élément totalement codé de A à Z).

    Les liens dupliqués peuvent facilement être supprimés si besoin ^^. Personnellement je dois avouer que je n'ouvre presque jamais ce menu :/
    Comme c'est quelque chose qui se déclenche au clic, cela ne me dérange pas qu'il y ait des doublons, je ne passe vraiment que très rarement dessus, donc son apparence ne me dérange pas trop.
    Pour te donner une idée, voici ce que pourrait voir un membre si on enlève les liens d'édition du profil & vers les MP : https://i.imgur.com/5qdgq9P.png

    Voilà voilà, désolée pour cette réponse un peu rapide, je file retourner bosser pour les cours moi :toto:

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Ven 18 Déc 2015 - 0:51

    Merci Nihil, je suis en train de bidouiller le code. Pourrais-tu me dire comment je peux modifier la hauteur de la barre ? J'ai essayé quelque chose, mais ça provoque de nombreux bug... 

    [url=novus.web-rpg.com]HAVE A LOOK [/url]

    Il faudrait "descendre" les liens de la Navbarre au même niveau que les autres.
    En fait, je cherche à mettre le Bienvenue utilisateur sur deux lignes pour décharger le menu.

    Egalement, je voudrais changer le style du menu des notifications. Peut-être faudrait-il que j'ouvre un nouveau topic dédié spécialement au style ?


    Bon courage pour tes cours !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 19 Déc 2015 - 20:06

    En fait, je n'ai pas fait le style des notifications encore, je comptais l'ajouter une fois qu'on s'était mises d'accord pour la zone Bienvenue (comme ça on peut mettre le même).

    Je me suis créée un compte temporaire sur ton forum histoire de pouvoir voir la barre en tant que membre connectée ! Tu pourras ensuite le supprimer sans soucis ^^

    Si je comprends bien tu veux baisser → la zone Bienvenue, la zone Notification, c'est ça ? :)

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Dim 20 Déc 2015 - 19:09

    Merci Nihil de ta persévérance.

    Alors en effet, je voudrais baisser la zone bienvenue et notifications, pour la mettre au même niveau que le menu, tout en permettant d'afficher le "Bienvenue Joueur X" sur deux lignes, sans déstabiliser l'affichage général.

    Je souhaiterais également que les liens deviennent blanc au surlignage, dans les deux menus. 


    Merci encore, j'espère que tes cours de sont bien terminés !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 22 Déc 2015 - 22:01

    Coucou :)

    Je ne suis pas sur mon écran habituel à cause d'un petit soucis, et ça me complique la vie pour finir ta demande :'(

    Du coup je vais répondre petit à petit, pour descendre la zone notification :
    Code:
    /* centrer le texte Notification verticalement */
    #fa_toolbar #fa_notifications {
        line-height: 40px;
    }

    Pour mettre sur 2 lignes le Bienvenue :
    Code:
    #fa_welcome {
        width: 100px;
        line-height: 1.2;
        padding-top: 5px;
    }

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mar 22 Déc 2015 - 22:03

    D'accord Nihil, je t'en fais pas. Je vais implémenter progressivement tes modifications :)
    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mar 22 Déc 2015 - 22:28

    J'ai ajouté les codes que tu m'as donné.

    Mon code actuel est le suivant :


    Code:
    /* LIBRE SERVICE NEVER UTOPIA
     * Barre de navigation + toolbar
    */

    /* Style général */
    .generated_nav_bar {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
        top: 0;

        background-image: url(http://i35.servimg.com/u/f35/16/65/12/73/fondme11.jpg);
        border-bottom: 3px solid #28282A;
        box-shadow: 0 0 5px #000;
       
        text-align: center;
        white-space: nowrap;
        line-height: 40px;
       
        opacity: 0.85;
    }

    /* Liens dans la navbar */
    .generated_nav_bar .mainmenu {
        color: #dea37e;
        font-family: Corbel;
        font-size: 14px;
        font-weight: lighter;
        margin: 5px;
        border: none;
        font-variant: small-caps;
        letter-spacing: 1px;
    }

    #fa_toolbar {
        margin-top: -30px; /* On cache la toolbar en haut */
        opacity: 0.85;
        font-variant: small-caps;
    }

    /* bouton pour ouvrir fermer la toolbar */
    #fa_toolbar_hidden, #fa_toolbar #fa_hide, #fa_toolbar_hidden { display: none!important;}

    /* rond avec l.avatar */
    .fa_avatar {
        background: #969DC1;
        width: 50px;
        height: 50px;
        position: fixed;
        border-radius: 50%;
        top: 7px;
        left: 135px;
        z-index: 999;
        border: 2px solid #25262b;
        box-shadow: 0 0 5px black;
        overflow: hidden;
    }

    /* centrage avatatar */
    .fa_avatar img {
        width: 100%;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    }


    /* placement crédits Toolbar NE PAS ENLEVER ! ! ! */
    #fa_left {
        position: fixed;
        top: 2px;
        left: 7px;
    }

    /* Placement texte notifications */
    #fa_right {
        position: fixed;
        right: 0px;
        top: 0px;
    }

    /* Placement popup notif */
    #notif_list {
        position: fixed;
        right: 0;
        left: auto!important;
        border-right: 0!important;
    }

    /* Placement popup notif live */
    #live_notif {
        position: fixed!important;
        top: 50px!important;
        right: 50px!important;
    }

    /* Menu welcome */
    #fa_menu {
        position: fixed;
        top: 0px;
        left: 200px;
    }

    /* Adaptations pour les petits écrans */
    @media screen and (max-width: 1360px) {
      .generated_nav_bar {
          padding-left: 285px;
      }
    }

    @media screen and (min-width: 1360px) and (max-width: 1510px) {
      .generated_nav_bar {
          padding-left: 200px;
      }
    }

    /* centrer le texte Notification verticalement */
    #fa_toolbar #fa_notifications {
        line-height: 40px;
    }
    /* On enleve la partie gauche de la zone Welcome */
    #fa_usermenu { display: none; }

    /* Style de la zone welcome*/
    #fa_menu #fa_menulist {
      padding-left: 10px;
      border: 0;
      left: 0!important;
    }

    #fa_welcome {
        width: 150px;
        line-height: 1.2;
        padding-top: 5px;
    }

    #fa_notifications, #fa_welcome {
        color: #dea37e!important;
        font-family: Corbel;
        font-size: 14px;
        font-variant: small-caps;
        letter-spacing: 1px;
    }

    #fa_menu #fa_menulist :link, #fa_menu #fa_menulist :visited { color: inherit!important; }

    #fa_menu #fa_menulist, #fa_toolbar #fa_right.welcome #fa_menu #fa_welcome {
        background: #27313D;
        color: #E2A582;
    }

    #fa_right #fa_menu #fa_menulist {
        display: block;
        visibility: hidden;
        -webkit-transition: all 300ms;
        transition: all 300ms;
        opacity: 0;
        overflow: hidden;
    }

    #fa_right.welcome #fa_menu #fa_menulist {
        visibility: visible;  opacity: 1;
    }

    #fa_toolbar #fa_right #fa_menu .fa_separator {
      background: #E2A582;
    }

    #fa_right #fa_menu #fa_menulist li {
        -webkit-transform: translateX(-245px);
            -ms-transform: translateX(-245px);
                transform: translateX(-245px);
        -webkit-transition: all 300ms 50ms;
        transition: all 300ms 50ms;
    }


    #fa_right.welcome #fa_menu #fa_menulist li {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }

    /*  Animation menu Welcome */
    #fa_right #fa_menu #fa_menulist li:nth-child(2) {-webkit-transition-delay: 100ms;transition-delay: 100ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(3) {-webkit-transition-delay: 150ms;transition-delay: 150ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(4) {-webkit-transition-delay: 200ms;transition-delay: 200ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(5) {-webkit-transition-delay: 250ms;transition-delay: 250ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(6) {-webkit-transition-delay: 300ms;transition-delay: 300ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(7) {-webkit-transition-delay: 350ms;transition-delay: 350ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(8) {-webkit-transition-delay: 400ms;transition-delay: 400ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(9) {-webkit-transition-delay: 450ms;transition-delay: 450ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(10) {-webkit-transition-delay: 500ms;transition-delay: 500ms;}
    #fa_right #fa_menu #fa_menulist li:nth-child(11) {-webkit-transition-delay: 550ms;transition-delay: 550ms;}
    #fa_welcome { -webkit-transition: all 300ms; transition: all 300ms;}

    /* Boutons connexion / enregistrement de la toolbar */
    #fa_right a[href$="login"],
    #fa_right a[href$="register"] {
        display: none!important;
    }



    En tous cas mes membres nous voient faire la réfection de la barre de navigation, et même si on voit bien qu'elle est en travaux pour le moment, ils adorent !
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 22 Déc 2015 - 23:07

    Alors, pour la partie Bienvenue, ça sera mieux comme ça :
    Code:
    #fa_toolbar #fa_welcome {
        width: 150px;
        line-height: 1.2;
        padding-top: 5px;
    }

    Pour les liens blancs, on va ajouter juste après:
    Code:
    #fa_menu #fa_menulist :link, #fa_menu #fa_menulist :visited { color: inherit!important; }

    Ceci :
    Code:
    #fa_menu #fa_menulist a:hover, #fa_notifications:hover, #fa_welcome:hover { color: #ffffff!important; }

    J'ai récupéré un vieil écran en 1024 * 768, une antiquité haha, ça fait tellement bizarre et pas du tout pratique pour coder x)

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mar 22 Déc 2015 - 23:15

    Bon pas évident le vieil écran. Tu es parti en vacances au fin fond de la France ? :)


    J'ai ajouté tes changements. Le texte de Bienvenue est bien circonscrit dans l'espace de la Toolbar. Le hoovering en blanc est aussi actif. 


    Par contre, Bienvenue et Notifications ne sont pas centrés, et mangent donc toujours un peu sur la toolbar.

    Par ailleurs, lorsqu'on a mis le Bienvenue sur deux lignes, on a réduit l'espace de son cadre. Est-ce que tu crois qu'on pourrait ajuster la taille du cadre du menu Bienvenue (celui qui apparaît au clic) sur ces mêmes dimensions ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 23 Déc 2015 - 20:55

    Allez, le combat avec le super écran est reparti :barbare:

    Pour aligner le Notifications, on va remplacer :
    Code:
    #fa_toolbar #fa_notifications {
        line-height: 40px;
    }

    Pour rajouter un sélecteur de plus histoire d'être sûr de dépasser le code de FA
    Code:
    #fa_toolbar #fa_right #fa_notifications{
        line-height: 40px;
    }

    Ici le 40px correspond à la hauteur de la barre :)
    Pour centrer le bienvenue, je te conseille de toucher à cette partie du CSS là en jouant avec la valeur du padding-top pour avoir un rendu qui te convient (plus la valeur est haute, plus le tout descendra) :
    Code:
    #fa_toolbar #fa_welcome {
        width: 150px;
        line-height: 1.2;
        padding-top: 5px;
    }

    Pour la largeur de Menu "Bienvenue" :
    Code:
    /* Menu en dessous de Bienvenue */
    #fa_menu #fa_menulist {
        min-width: 0;
        width: 140px;
    }

    Ne perdons pas espoir, nous arriverons à terminer un jour cette demande :friends:

    • Revenir en haut
    Novus-RPG
    Novus-RPG
    MasculinAge : 31Messages : 176

    Mer 23 Déc 2015 - 22:35

    Nihil !:captain:

    Je crois que cette fois-ci c'est la bonne !

    Le texte est parfaitement centré, aucun chevauchement. Ca me semble perfect.


    Il ne manque plus qu'une chose, le style du menu des notifications et on est bons !


    Merci beaucoup.
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 12:50