AccueilFAQRechercherMembresGroupesS'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.


    Variante du Tutoriel de Amaziel (barre de navigation en haut du forum)

    Offrande
    Offrande
    FémininAge : 28Messages : 194

    le Ven 18 Oct 2013 - 2:55



    Bonjour, :love: 

    Suite à un magnifique tutorel (maintenant archivé) de Amaziel pour coller la barre de navigation en haut du forum (aperçu : ici), j'en ai changé quelque particularité qui, je pense, feront plaisir à certain. Dans ce tuto je vous monterais deux façons de modifier la barre : 
    Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) 504593mini2 - Mettre la barre en Transparence au dessus de votre header
    Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) 504593mini2 - Mettre la barre en transparente SUR votre header.


    Etape -0 (reproduire le tuto d'Amaziel)
    Tout d'abord, vous rendre dans le bon template :
    Panneau d'administration >> Affichage >> Templates >> General >> Template overall_header

    Puis, supprimer la barre de navigation de base qui est dans le template :
    Code:
    {GENERATED_NAV_BAR}

    Vous retrouvez ensuite ce bout de code dans le template :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Et vous ajoutez, directement après, ce code :
    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>

    Vous enregistrez et publiez le template et voilà !


    Variante 1 : Mettre la barre en Transparence au dessus de vôtre header[/b]

    Repérer la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
    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>

    Et changer le par celui-ci : 
    Code:
    <TABLE STYLE="POSITION: FIXED; LEFT: 0PX; TOP: 0PX; RIGHT: 0PX; BACKGROUND-COLOR: none!important; Z-INDEX:1000; WIDTH: 100%;" ><TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR></TABLE>

    S'il se présente un espace entre la barre et le haut de vôtre forum, ce qui est possible car nous avons supprimer la couleur régler le :
    "top: 0px;" à "top: -10px;" de manière a ne plus voir cette espace.

    Ce qui vous donnera ceci : 
    Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) Eta1_b10





    [u]Variante 2
    : Mettre la barre en transparence SUR votre header.

    Les code suivants sont basée en fonction d'un header collé en haut du forum. 

    [b]Etape 1 : CSS du header

    Allez dans: Affichage > couleur > feuille de style css.

    Puis, collez ceci dans votre feuille de CSS :
    Code:
    /* LOGO DU FORUM */
    img#i_logo {
    width: 100%!important;
    margin-left: 0px!important;
    margin-right: 0px!important;
    margin-top: -10px!important;
    }

    Ce code est configuré pour que votre image colle au bords de droite, de gauche et du haut de votre forum, vous pouvez bien sur les modifier. Le "margin-top: -10px" sert à monter l'image en haut pour la rétrécir si vous le souhaiter.


    Repérer une fois de plus la ligne suivante que Amaziel vous as fait installer dans l' Overall_hearder
    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>

    et remplacer le par celui-ci : 
    Code:
    <TABLE STYLE="POSITION: ABSOLUTE;
                  LEFT: 0PX;
                  TOP: 0PX;
                  RIGHT: 0PX;
                  BACKGROUND-COLOR: none!important;
                  Z-INDEX:1000;
    WIDTH: 100%;" >
    <TR><TD><CENTER>{GENERATED_NAV_BAR}</CENTER></TD></TR>
    </TABLE>

    Cela devrait  donner ceci :
    Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) Eta2_b10

    Voila, Voila :cow:

    Si vous avez la moindre question ou si vous souhaiter une modification a cette petite barre, n'hésitez pas a répondre à ce message, je reviendrait régulièrement vous aider. 

    Bonne journée à tous :love:
    LeMonarque
    LeMonarque
    MasculinAge : 33Messages : 26

    le Sam 13 Aoû 2016 - 12:27

    Merci
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2075

    le Sam 13 Aoû 2016 - 13:09

    Merci pour le partage !
    Rebekaah
    Rebekaah
    FémininAge : 24Messages : 51

    le Mar 4 Oct 2016 - 17:13

    Merci !
    Ptite Louve
    Ptite Louve
    FémininAge : 28Messages : 33

    le Lun 31 Oct 2016 - 14:24

    Merci pour ce tuto :love:
    LadyMechanical
    LadyMechanical
    FémininAge : 15Messages : 7

    le Mer 2 Nov 2016 - 18:25

    Je ne trouve pas {GENERATED_NAV_BAR}



    Un jour, un grand homme a dit : "Ok."
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5106

    le Mer 2 Nov 2016 - 18:36

    @LadyMechanical a écrit:Je ne trouve pas {GENERATED_NAV_BAR}

    Coucou :)

    On ne passe pas vraiment dans les commentaires des codes en libre service, pour les problèmes il faut aller dans la section Problème avec mon code, tu auras plus de visibilité :hug:



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 19:40