Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Coller la barre de navigation en haut du forum

    Partagez
    MasculinAge : 25Message(s) : 32
    Amaziel
    le Mar 8 Mar 2011 - 19:35
    Coller la barre de navigation en haut du navigateur

    Niveau : Moyen
    Aperçu : ICI

    Etape 1 : Aller dans les templates
    Panneau d'administration >> Affichage >> Templates >> General >> Template overall_header

    Etape : Supprimer la barre de navigation
    Une fois dans le templates, il vous faudra chercher le code suivant

    Code:
    {GENERATED_NAV_BAR}

    Une fois trouvé, supprimez ce code.

    Etape 3 : Installer la nouvelle barre de navigation
    Maintenant, une étape plus complexe. Suivez donc bien ces instructions sinon ca risque de capoter

    Toujours dans le même templates, cherchez ceci :

    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Une fois trouvé, collez le code suivant juste après le code trouvé précédemment :

    Code:
    <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #000000; z-index:1000; width: 100%; border-bottom:1px solid #5E4036;" ><tr><td><center>{GENERATED_NAV_BAR}</center></td></tr></table>

    Maintenant, il ne vous reste plus qu'à enregistrer et à publier. Néanmoins, je vais vous donner quelques précisions sur le code installé.

    Background-color : Cela correspond à la couleur de fond de la barre collé en haut du navigateur.

    Width : Cela permet de régler la taille de la barre de navigation. Plus vous augmenter le pourcentage, plus la barre sera large et vice versa. Vous pouvez très bien remplacer le pourcentage par une taille en pixel. Ce qui donnera : width:100px; par exemple.

    Border-bottom : Cela correspond au trait de démarcation permettant de séparer la nouvelle barre de navigation du forum en lui-même.

    Z-index : C'est une donnée indispensable pour que votre barre reste collé au navigateur que vous descendiez le forum ou non et que la barre fasse toute la largeur du forum.
    Age : 27Message(s) : 49
    Kanna
    le Mar 8 Mar 2011 - 23:01
    Super code qui marche à la perfection ^^ Merci beaucoup

    Juste une petite question pour compléter le chef d'oeuvre =) comment fait-on pour que la barre reste en haut du forum sans que celle-ci descende en même temps que le navigateur?


    MasculinAge : 25Message(s) : 32
    Amaziel
    le Mar 8 Mar 2011 - 23:53
    Théoriquement, il suffit d'enlever cette partie du code :

    Code:
    position:fixed;

    Mais n'ayant jamais fait sans la fixation, je ne garanti pas l'esthétisme de l'effet car il me semble que c'est d'autres manip bien différentes qu'il faut faire pour avoir ce que tu cherches.
    FémininAge : 24Message(s) : 28
    Lipton
    le Jeu 10 Mar 2011 - 22:16
    Merci pour le code ! :)
    FémininAge : 18Message(s) : 121
    alcantara
    le Mar 10 Mai 2011 - 20:11
    Bonsoir,
    Le code marche sur mon forum test la pas de problème..
    Sauf que sur mon forum de Pub , bahh , tous est décalé..
    Spoiler:







    {SITENAME_TITLE}{PAGE_TITLE}






    {META_FAVICO}
    {META}
    {META_FB_LIKE}

    {T_HEAD_STYLESHEET}
    {CSS}

















    // /* 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');
    }
    });
    //]]>



    // $(document).ready(function(){

    pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
    pm.focus();


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


    ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});

    });


    var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;



    $(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
    });
    });
    });

    //]]>

    {GREETING_POPUP}






    // 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);
    })();
    //]]>



    {GENERATED_NAV_BAR}


    Hitskin.com




    {hitskin_preview.L_THEME_SITE_PREVIEW}


    {hitskin_preview.U_INSTALL_THEME}{hitskin_preview.L_RETURN_THEME}
















    {SITENAME}








    {LOGIN_POPUP_MSG}




    {JAVASCRIPT}





















    {MAIN_SITENAME}



    {SITE_DESCRIPTION}
     

































    {switch_ticker.ticker_row.ELEMENT}




















    {giefmod_index1.MODVAR}












    J'ai mis 5 minutes environs pour trouver les codes , à part sa ,merci :]
    MasculinAge : 24Message(s) : 30
    Lunarfang Einzbern
    le Jeu 7 Juil 2011 - 19:17
    Une autre question, tant que j'y suis. J'ai mis le code en place, mais ce que j'aimerais, c'est qu'il fasse moins de 100% de largeur (rien de difficile jusque là), mais qu'il reste au milieu du forum. Or, il reste collé à gauche.

    Et j'aimerais aussi pouvoir arrondir les bordures bottomleft et bottomright, et rajouter une ombre portée vers la droite-bas, de couleur darkred. Ceci dit, je ne sais pas comment m'y prendre. J'ai essayé d'entourer le tout d'une classe avec un div, mais sans succès.
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Jeu 7 Juil 2011 - 19:43
    As-tu les balise < center > autour de la variable comme ceci?

    Code:
    <CENTER>{GENERATED_NAV_BAR}</CENTER>

    En mettant 80% de largeur la barre de navigation reste bien centrer chez moi.

    Pour arrondir le bas droit et gauche il te faut rajouter ceci dans ton css:

    Code:

    border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;

    et pour l'ombre porter il te faut mettre sa:

    Code:
    box-shadow: 3px 3px 3px #000;
    -moz-box-shadow:3px 3px 3px #000;

    J'ai pas tester mais sa devrait marcher.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 24Message(s) : 30
    Lunarfang Einzbern
    le Ven 8 Juil 2011 - 1:14
    Ben théoriquement, les liens restent centrés dans un tableau de 80% de la largeur du forum, mais en soi c'est le tableau que je veux centrer et maintenir au centre de l'écran, justement. ^^

    Quant à l'ombre portée, elle ne marche pas. Est-ce que c'est parce que je suis sous chrome ? Je ne sais pas, mais en tentant le border shadow, le moz box shadow et même un webkit box shadow, en changeant plusieurs fois le code de la couleur et l'orientation de l'ombre, rien n'a changé.

    Dans tout ça un point positif tout de même : L'arrondi fonctionne xD

    Edit : Bon, l'ombre portée marche, je suis doué, j'ai oublié le tiret devant le webkit. Reste le problème de ce foutu tableau qui va embrasser la gauche de mon écran quand il n'est plus à100% de largeur.
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Ven 8 Juil 2011 - 9:50
    Tu dois pas avoir la nouvelle version de chrome car moi je lis les arrondis ect sans mettre -webkit- devant chaque propriété.

    Pour centrer en effet c'est pas le tableau xD mais chez moi c'est quand même centrer ta du toucher au table dans le css peut-être, as tu essayer de mettre un margin: 0 50px; dans le tableau? (faudra régler la valeur)


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 24Message(s) : 30
    Lunarfang Einzbern
    le Ven 8 Juil 2011 - 10:08
    Oui merci... C'est pile poil ce que je voulais éviter, gérer la position du tableau via positionnement par pixel... xD


    enfin merci beaucoup sinon, je pense pouvoir me débrouiller pour la suite. =)

    Edit : En fait c'est tout bête... width de 80% pour la taille du tableau, et il suffisait bêtement, plutôt que de mettre une valeur en pixel à une marge, de la mettre en %, donc margin-left:10% pour qu'il y ait 10% de décalage de chaque côté... et ainsi centrer le tableau.
    MasculinAge : 20Message(s) : 1719

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Soul
    le Ven 8 Juil 2011 - 11:02
    Trop bien ce code merci beaucoup !
    Je l'ai mis et il est super simple à bidouiller !
    Merci beaucoup !
    FémininAge : 19Message(s) : 7
    aew
    le Lun 11 Juil 2011 - 13:29
    Merci beaucoup pour ce code et explication ! 8D
    Je débute et je n'arrive pas à arrondir les bords...
    On pourrait m'aider, s'il vous plaît ? :)
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Lun 11 Juil 2011 - 13:38
    Suffit de lire un peu plus haut c'est marquer:

    Pour arrondir le bas droit et gauche il te faut rajouter ceci dans ton css:

    Code:
    border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;

    border-radius= Arrondis sous chrome, opera, safari !à mettre obligatoirement!
    -moz-border-radius= Arrondis sous mozilla

    - Première valeur arrondis en haut à gauche.
    - Deuxième valeur arrondis en haut à droite.
    - Troisième valeur arrondis en bas à droite.
    - Quatrième valeur arrondis en bas à gauche.

    Pour arrondir les 4 coins de la même façon il suffit juste de mettre une seule fois la valeur comme ceci:

    Code:
    border-radius: 20px;
    -moz-border-radius: 20px;


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    FémininAge : 19Message(s) : 7
    aew
    le Mar 12 Juil 2011 - 14:22
    Oui merci, j'avais vu. ^^
    Mais je ne comprends pas tout.
    Je dois placer ce code dans la Feuille de style CSS, c'est ça ?
    Mais je ne dois pas rajouter quelque chose au code, le sélecteur, ou j'sais pas quoi.
    Un mot, comme body, ou une lettre comme p ou a ?
    Je m'excuse d'avoir mal formulé et de mon noobisme. :)
    Merci d'avance. Very Happy
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Mar 12 Juil 2011 - 15:50
    On débute tous au même niveau t'inquiète ^^

    Alors le code css il te faut l'inséré directement dans la balise < table > comme sa a été fait dans le code du tutoriel ou tu as ce code (en rouge je t'ai mis les propriété css déjà incluse):

    Code:
    < TABLE STYLE="[color=red]POSITION: FIXED; LEFT: 0PX; TOP: 0PX; RIGHT: 0PX; BACKGROUND-COLOR: #000000; Z-INDEX:1000; WIDTH: 100%; BORDER-BOTTOM:1PX SOLID #5E4036;[/color]"  >< TR >< TD >< CENTER >{ GENERATED_NAV_BAR }< /CENTER ></TD>< /TR >< /TABLE >

    Donc pour mettre des arrondis il te suffit juste de mettre ce bout de code:

    Code:
    border-radius: 20px;
    -moz-border-radius: 20px;

    à la suite du css déjà inclus ce qui te donne ceci:

    Code:
    <TABLE STYLE="POSITION: FIXED; LEFT: 0PX; TOP: 0PX; RIGHT: 0PX; BACKGROUND-COLOR: #000000; Z-INDEX:1000; WIDTH: 100%; BORDER-BOTTOM:1PX SOLID #5E4036; border-radius: 20px;
    -moz-border-radius: 20px" ><TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR></TABLE>

    Sa te mettra les quatre coins à un arrondis de 20px tu peux augmenter ou réduire le nombre selon ce que tu veux.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 27Message(s) : 57
    Baal
    le Dim 24 Juil 2011 - 7:30
    Merci beaucoup, il fonctionne parfaitement :)
    FémininAge : 24Message(s) : 16
    Sharky
    le Jeu 18 Aoû 2011 - 12:08
    Tuto très clair, simple à utiliser que dire d'autre... Merci pour votre aide :§(§:
    Vous êtes TOP ! <3
    FémininAge : 24Message(s) : 194
    Strawberry-Swan
    le Ven 2 Sep 2011 - 21:00
    Merci, j'avais déjà la barre du haut, mais les tutos ne donnait pas la bonne barre à supprimer ! J'ai enfin résolue mon soucis !


      FémininAge : 23Message(s) : 45
      cerizz
      le Ven 9 Sep 2011 - 13:25
      Merci!
      FémininAge : 22Message(s) : 1099
      Eunkyung
      le Sam 10 Sep 2011 - 18:41
      Sur Mozilla, je n'arrive pas à la mettre sur tout le long : / Sur Chrome & IE c'est niquel mais pas mozilla ._.


      FémininAge : 21Message(s) : 25
      Newlon
      le Lun 12 Sep 2011 - 20:37
      Bonjour !

      Tout d'abord, merci pour ce code, il est génial !

      J'aurais juste aimé savoir si on pouvait remplacer le noir par une image ? Et si c'est le cas, comment s'y prendre ? Parce que j'ai tenté
      Code:
      background-image: url("http://nsa27.casimages.com/img/2011/09/12/110912082432787066.png");
      à la place de
      Code:
      background-color: #000000
      , mais ça n'a pas marché. Le fond devient transparent, et elle se "dé-centre"...

      Merci d'avance !


      MasculinAge : 19Message(s) : 98
      Len111
      le Mer 23 Nov 2011 - 21:56
      Y love you!!!!!!


      FémininAge : 22Message(s) : 11
      Ninis
      le Sam 26 Nov 2011 - 14:52
      Merciiiiiiiiiiiii :bisou:
      FémininAge : 23Message(s) : 131
      Sysy
      le Mer 30 Nov 2011 - 14:44
      Newlon, à mon avis ton code est faux, parce que j'y suis arrivée du premier coup.
      Essaie de le remplacer par :
      Code:
      background-image: url(http://nsa27.casimages.com/img/2011/09/12/110912082432787066.png);

      Sinon merci beaucoup pour ce tuto génial ! Very Happy
      FémininAge : 34Message(s) : 14
      félicia
      le Mer 30 Nov 2011 - 16:31
      j'ai bien lu/mis dans le premier message mais ma barre de navigation est supprimée vraiment mais je n'ai pas la barre de navigation en haut sur mon forum actif Sad
      maintenant, je n'ai plus de barre de navigation, j'ai vraiment un besoin sur mon forum
      merci de m'aider Wink
      Contenu sponsorisé
      Aujourd'hui à 15:52

        La date/heure actuelle est Lun 26 Sep 2016 - 15:52