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.


1 résultat trouvé pour auteur_Amaziel

Variante du Tutoriel de Amaziel (barre de navigation en haut du forum) - 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 : 
Tag auteur_amaziel sur Never Utopia - graphisme, codage et game design 504593mini2 - Mettre la barre en Transparence au dessus de votre header
Tag auteur_amaziel sur Never Utopia - graphisme, codage et game design 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 : 
Tag auteur_amaziel sur Never Utopia - graphisme, codage et game design 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 :
Tag auteur_amaziel sur Never Utopia - graphisme, codage et game design 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:


Revenir en haut

La date/heure actuelle est Lun 20 Mai 2024 - 7:54