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 à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

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

    Offrande
    Offrande
    FémininAge : 33Messages : 194

    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 : 38Messages : 26

    Sam 13 Aoû 2016 - 12:27

    Merci
    Anonymous
    Invité

    Sam 13 Aoû 2016 - 13:09

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

    Mar 4 Oct 2016 - 17:13

    Merci !
    Ptite Louve
    Ptite Louve
    FémininAge : 34Messages : 34

    Lun 31 Oct 2016 - 14:24

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

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

    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:

    Sherryl H.
    Sherryl H.
    FémininAge : 30Messages : 36

    Mar 7 Avr 2020 - 20:40

    Un énorme merci :hug:
    Milharis
    Milharis
    MasculinAge : 42Messages : 8

    Mer 28 Juil 2021 - 4:23

    Un grand merci!
    Tepemkau
    Tepemkau
    FémininAge : 32Messages : 25

    Jeu 28 Juil 2022 - 16:44

    J'ai réussi, superbe explication, merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 10:12