AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  




 
Le Forum devient Plusse actif ♥️ Merci à Vous ! Notre forum est contre le SPAM

Partagez|

Barre de Navigation en Haut & personalisation

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage

MessageSujet: Barre de Navigation en Haut & personalisation Sam 10 Déc - 6:03



Barre de navigation en haut du forum

[font=Georgia]Pour que votre barre de navigation soit au dessus de votre bannière, allez dans votre panneau d'administration, puis allez dans affichage -> templates -> général -> overall_header. Je précise que vous devez être le fondateur pour accéder aux templates du forum.

Cherche ce code (avec le raccourci CTRL+F, c'est plus facile) et coupez-le :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>

Cherchez ensuite ce code. Normalement, il est juste au dessus de l'autre :

Code:
      <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <td align="center" width="100%" valign="middle">
                    <div class="maintitle">{MAIN_SITENAME}</div>
                 

                    <span class="gen">{SITE_DEscriptION}
  </span>
                  </td>
                  <!-- END switch_logo_left -->

                  <!-- BEGIN switch_logo_center -->
                  <td align="center" width="100%" valign="middle">
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

                    <div class="maintitle">{MAIN_SITENAME}</div>
                 

                    <span class="gen">{SITE_DEscriptION}</span>
                  </td>
                  <!-- END switch_logo_center -->

                  <!-- BEGIN switch_logo_right -->
                  <td align="center" width="100%" valign="middle">
                    <div class="maintitle">{MAIN_SITENAME}</div>
                 

                    <span class="gen">{SITE_DEscriptION}
  </span>
                  </td>
                  <td>
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  </td>
                  <!-- END switch_logo_right -->
              </tr>
            </table>

Et collez le premier code juste après :

Code:
<td class="bodyline">


Personalisation

Une fois que vous l'avez fait, reprenez le même template (c'est à dire overall_header). Cherchez à l'intérieur le code
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Une fois que vous l'avez trouvé, balayez le (sélectionnez le, surlignez le pour ceux qui n'auraient pas compris ^^') et remplacez le par le code suivant.
Code:
<table style="position: fixed; left: 0px; top: 0px; right: 0px; z-index:1000; width: 100%; background-color: #DAEDF3;border-bottom: 2px solid #ffffff;border-left: 2px solid #ffffff;border-right: 2px solid #ffffff;border-radius: 0px 0px 10px 10px;-moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; opacity:0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000;" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table><br>
Pour ceux qui voudraient modifier l'apparence avant de valider sans s'y connaître dans les codes, je vous explique tous les termes utilisés ici.
Pour voir comment cela rend, Enregistrer votre template et cliquez sur , à côté de En attente. Admirez le résultat tout en haut de votre fenêtre, en dessous de votre barre d'adresse. Si le résultat vous plait, cliquez sur (tout en sachant que les couleurs peuvent être modifiées); sinon cliquez sur pour supprimer le template (toutes modifications faites avant ce tutoriel seront supprimées également).


Codes

Les codes expliqués
  • position: fixed Ne touchez pas à ce code, c'est lui qui fixe la barre en haut de la page.
  • left: 0px Ne touchez pas à ce code, il règle un bug pour coller la barre à la gauche de la page.
  • top: 0px Ne touchez pas à ce code, il règle un bug pour coller la barre en haut de la page.
  • right: 0px Ne touchez pas à ce code, il règle un bug pour coller la barre à droite de la page.
  • z-index:1000 Ne touchez pas à ce code, il permet d'ajuster le positionnement de la barre.
  • width: 100% Ne touchez pas à ce code, c'est lui qui définit la taille de la barre. Ici pour qu'elle prenne toute la page.
  • background-color: #DAEDF3 Ce code définit la couleur. Ici du bleu clair.
  • border-bottom: 2px solid #ffffff Ce code ajuste une bordure blanche simple de 2 pixels en bas de la barre. Vous pouvez changer la taille, le style et la couleur.
  • border-left: 2px solid #ffffff Ce code ajuste une bordure blanche simple de 2 pixels à gauche de la barre. Vous pouvez changer la taille, le style et la couleur.
  • border-right: 2px solid #ffffff Ce code ajuste une bordure blanche simple de 2 pixels à droite de la barre. Vous pouvez changer la taille, le style et la couleur.

      Note : Si vous voulez 4 bordures de la même manière, utilisez simplement border: 2px solid #fffff

  • border-radius: 0px 0px 10px 10px Ce code arrondit les deux coins du bas.
  • -moz-border-radius: 0px 0px 10px 10px Ce code arrondit les deux coins du bas sur le navigateur Mozilla.
  • -webkit-border-radius: 0px 0px 10px 10px Ce code arrondit les deux coins du bas sur plusieurs navigateurs.

      Note : Si vous voulez 4 coins arrondis de la même manière, utilisez simplement border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px

  • opacity:0.8 Ce code baisse l'opacité à 80 (au lieu de 100).
  • -moz-opacity: 0.8 Ce code baisse l'opacité à 80 (au lieu de 100) sur le navigateur Mozilla.
  • -khtml-opacity: 0.8 Ce code baisse l'opacité à 80 (au lieu de 100) sur le navigateur Safari.
  • box-shadow: 0px 0px 10px #000 Ce code ajoute une ombre. #000 est une couleur, vous pouvez le modifier avec un code hexadécimal.
  • -webkit-box-shadow: 0px 0px 10px #000 Ce code ajoute une ombre sur plusieurs navigateurs. #000 est une couleur, vous pouvez le modifier avec un code hexadécimal.
  • -moz-box-shadow: 0px 0px 10px #000 Ce code ajoute une ombre sur le navigateur Mozilla. #000 est une couleur, vous pouvez le modifier avec un code hexadécimal.


Rendu

[/list]

Crédit : [url=Foligraph]http://foligraph.graphforum.com[/url]
Revenir en haut Aller en bas
http://graaph-land.graphforum.com

MessageSujet: Re: Barre de Navigation en Haut & personalisation Dim 11 Déc - 11:16

Tu as eu l'autorisation de copier ce tutoriel ?
Sinon merci ;D
Revenir en haut Aller en bas
http://graphismeeeee.forumgratuit.org/

MessageSujet: Re: Barre de Navigation en Haut & personalisation Dim 11 Déc - 11:34

Je les ai créditer ^^
Revenir en haut Aller en bas
http://graaph-land.graphforum.com

MessageSujet: Re: Barre de Navigation en Haut & personalisation Lun 12 Déc - 8:55

Ha oui j'avais ps vu exuse moi Wink
Revenir en haut Aller en bas
http://graphismeeeee.forumgratuit.org/

MessageSujet: Re: Barre de Navigation en Haut & personalisation Mar 13 Déc - 5:19

C'est Pas Un probléme Very Happy
Revenir en haut Aller en bas
http://graaph-land.graphforum.com

MessageSujet: Re: Barre de Navigation en Haut & personalisation Sam 17 Déc - 9:52

bravo! (y)



Katy!!! Mon idole!!!
OMG!New!!A voir à tout pris!
Revenir en haut Aller en bas

MessageSujet: Re: Barre de Navigation en Haut & personalisation

Revenir en haut Aller en bas

Barre de Navigation en Haut & personalisation

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graph Land ::  :: Css & HTML-