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.


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

    Partagez
    FémininAge : 25Message(s) : 167
    Offrande
    le Ven 18 Oct 2013 - 2:55
    Bonjour, :love: 

    Amaziel, nous as présenter un magnifique tuto pour coller la barre de navigation en haut du forum Aperçus : ici. En posant moi-même cette barre en haut de mon forum j'en ai changer quelque particularité, qui je pense feront plaisir à certain. Dans ce tuto je vous monterais deux façons de modifier la barre : 
    - Mettre la barre en Transparence au dessus de vôtre header
    - Mettre la barre en transparente SUR vôtre header.

    Etape -1
    Tout d'abords installer la barre en haut du forum en suivant 

    Variante 1 : Mettre la barre en Transparence au dessus de vôtre header
    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 2 : Mettre la barre en transparence SUR vôtre header.

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

    Etape 1 : CSS du header

    Aller dans: Affichage > couleur > feuille de style css
    puis, 
    Coller 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 : 



    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: 
    MasculinAge : 30Message(s) : 25
    LeMonarque
    le Sam 13 Aoû 2016 - 12:27
    Merci
    FémininAge : 24Message(s) : 1353

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Sam 13 Aoû 2016 - 13:09
    Merci pour le partage !
    Contenu sponsorisé
    Aujourd'hui à 0:35

      La date/heure actuelle est Dim 25 Sep 2016 - 0:35