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.


    Barre de navigation en footer façon sites

    Partagez
    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Dim 19 Mai 2013 - 14:20
    Rappel du premier message :



      Plop,

      Un petit tuto pour mettre en forme votre navigation de manière un peu plus originale, en bas de page.

      Aperçu :



      Pour commencer, le code brut. Dans le template overall_footer_end, repérez cette partie :
      Code:
      <!-- END html_validation -->
       </div>
       </div>
       <!-- BEGIN switch_footer_links -->
       <div align="center">
       <div class="gen">
       <!-- BEGIN footer_link -->
       <!-- BEGIN switch_separator --> |&nbsp;<!-- END switch_separator -->
       <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
       <!-- END footer_link -->
       </div>
       </div>
       <!-- END switch_footer_links -->
       </div>

      Que vous remplacez par :
      Code:
      <!-- END html_validation -->
       </div>
                                </div> <div style="width: 88%; height: 250px; margin: 0px 0px -10px -10px; padding: 51px; font-size: arial; font-size: 12px; color: #C0C0C0; background-image: url('http://i71.servimg.com/u/f71/17/97/89/15/sans_t14.png');"><center><br /><br /><table width="99%" border="0" cellspacing="2">
        <tr>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Nom forum</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/">☽ Accueil</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/faq">☽ Foire aux questions</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/search?tt=1">☽ Rechercher</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/memberlist?tt=1">☽ Nos membres</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/groups?tt=1">☽ Nos Groupes</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/contact?tt=1">☽ Contactez-nous</a>
            <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/statistics?tt=1">☽ Nos statistiques</a></div></td>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Votre compte</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/profile?mode=editprofile">☽ Votre profil</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/privmsg?folder=inbox">☽ Votre messagerie</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/login">☽ Vous connecter</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org//login?logout">☽ Vous déconnecter</a>
            <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/register">☽ Nous rejoindre ?</a></div></td>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Autre</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://www.forumactif.com/forum-gratuit">☽ Créer un forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://forum.forumactif.com/">☽ Le forum des forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/abuse?page=%2F%3Ftt%3D1&report=1&tt=1">☽ Signaler un abus</a></div></td>
        </tr>
                                </table></center><center><a style="color: #E1E1E1 !important; font-size: 10px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© By Halloween de Never-Utopia</a></center></div>
       
      </div>


      Votre "barre" de navigation est maintenant installée (pensez à valider le template), il ne reste plus qu'à enlever celle prédéfinie par forumactif. Pour cela, dans le template overall_header, repérez cette partie :
      Code:
      <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
       <tr>
       <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
       </tr>
       </table>

      Que vous supprimez. Enregistrez, et la barre a disparue.


      Personnalisation.


      C'est bien beau, mais comment personnaliser sa nouvelle navigation ? Rien de plus simple, il suffit de suivre les étapes.


      Le bloc de navigation en lui-même.


      Le code qui suit vous permet de décrypter chaque élément. Les "margin" permettent de position le bloc, qui peut varier selon vos forum. Pour vous donner un coup de patte, dans l'ordre "0px 0 px -10px -10px" donne "marge du haut, marge de droite, marge du bas, marge de gauche".
      Code:
      <!-- END html_validation -->
       </div>
                                </div> <div style="width: LONGUEUR DE LA NAVIGATION EN FONCTION DE VOTRE FORUM; height: LARGEUR DE LA NAVIGATION EN FONCTION DE VOTRE FORUM; margin: 0px 0px -10px -10px; padding: ESPACE ENTRE LE CONTENU ET LE BORD DU CADREpx; font-size: POLICE; font-size: TAILLE EN px; color: CODE COULEUR; background-image: url('LIEN DE L'IMAGE');">CONTENU</div>
       
      </div>


      Pour remplacer l'image de fond par une couleur, remplacez :
      Code:
      background-image: url('LIEN DE L'IMAGE');

      Par :
      Code:
      background-color: code couleur;


      Le contenu.

      Code:
      <center><br /><br /><table width="LONGUEUR DU TABLEAU DU CONTENU" border="0" cellspacing="2">
        <tr>
          <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 1</div>
            <br /><br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DE VOTRE FORUM/">☽ Accueil</a>
      <br />  <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/faq">☽ Foire aux questions</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/search?tt=1">☽ Rechercher</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/memberlist?tt=1">☽ Nos membres</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/groups?tt=1">☽ Nos Groupes</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/contact?tt=1">☽ Contactez-nous</a>
            <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/statistics?tt=1">☽ Nos statistiques</a></div></td>
         <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 2</div>
            <br /><br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/profile?mode=editprofile">☽ Votre profil</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/privmsg?folder=inbox">☽ Votre messagerie</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/login">☽ Vous connecter</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM//login?logout">☽ Vous déconnecter</a>
            <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/register">☽ Nous rejoindre ?</a></div></td>
             <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 3</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://www.forumactif.com/forum-gratuit">☽ Créer un forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://forum.forumactif.com/">☽ Le forum des forum</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/abuse?page=%2F%3Ftt%3D1&report=1&tt=1">☽ Signaler un abus</a></div></td>
        </tr>
                                </table></center>

      Vous pouvez bien sûr remplacer ou ajouter d'autres liens. Le "ADRESSE DU FORUM" est à compléter par un bout de votre adresse, celle de la page d'accueil (exemple : http://halloweens-test.forumactif.org/groups?tt=1).


      Amusez-vous bien \o/


    Dernière édition par Halloween le Mar 20 Aoû 2013 - 13:25, édité 1 fois


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 21Message(s) : 66

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Heavensky
    le Ven 7 Mar 2014 - 0:12
    Merci :p
    MasculinAge : 15Message(s) : 422

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Thorn
    le Sam 8 Mar 2014 - 0:29
    Merci !^^


    MasculinAge : 27Message(s) : 19
    N'Eris
    le Sam 8 Mar 2014 - 8:36
    Merci beaucoup.
    FémininAge : 24Message(s) : 45
    Fallen Swallow
    le Mar 11 Mar 2014 - 12:16
    ça en jette ! Merci !
    FémininAge : 23Message(s) : 40
    Lakxi
    le Mar 11 Mar 2014 - 20:40
    merci beaucoup !
    FémininAge : 99Message(s) : 45

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Budapest
    le Sam 15 Mar 2014 - 15:09
    J'adooore! Merci. **


    MasculinAge : 17Message(s) : 63
    phinolex
    le Sam 15 Mar 2014 - 15:37
    Meci ^^
    FémininAge : 19Message(s) : 1926

    Les Guildes
    Guilde des Conteurs:
    7/10  (7/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    0/10  (0/10)
    Lunda
    le Dim 16 Mar 2014 - 15:20
    Merci beaucoup Razz


    FémininAge : 21Message(s) : 61
    Slown
    le Mer 19 Mar 2014 - 12:20
    Merci (:
    FémininAge : 25Message(s) : 293
    lala zhang
    le Jeu 20 Mar 2014 - 14:32
    C'est simpas
    FémininAge : 22Message(s) : 53
    Irony
    le Dim 23 Mar 2014 - 17:26
    Merci ! (:


    MasculinAge : 28Message(s) : 154
    Urbanspirit
    le Sam 29 Mar 2014 - 13:30
    merci


    FémininAge : 18Message(s) : 22
    Kio
    le Sam 29 Mar 2014 - 23:02
    Merci. *.*
    FémininAge : 24Message(s) : 213
    shala
    le Lun 31 Mar 2014 - 0:20
    merci


    MasculinAge : 26Message(s) : 21
    Badaric
    le Mer 2 Avr 2014 - 10:12
    Merci beaucoup pour le partage
    MasculinAge : 21Message(s) : 72
    skaera22
    le Mer 2 Avr 2014 - 21:56
    merci !!
    FémininAge : 23Message(s) : 576

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    6/10  (6/10)
    Guilde des Architectes:
    0/10  (0/10)
    Kathee
    le Jeu 3 Avr 2014 - 0:20
    Merci Halloween, great job ! Very Happy


    Merciii Shoki !! :

    FémininAge : 26Message(s) : 139
    Patdrue
    le Jeu 3 Avr 2014 - 14:05
    :love: :love: merchi
    FémininAge : 36Message(s) : 77
    Susan Storm
    le Jeu 3 Avr 2014 - 18:40
    Merciii Wink
    FémininAge : 27Message(s) : 44
    Deviliar
    le Lun 7 Avr 2014 - 8:00
    Merci !
    FémininAge : 25Message(s) : 72
    Aya Hanazawa
    le Sam 12 Avr 2014 - 21:59
    je vais test ça à l'air sympa
    FémininAge : 18Message(s) : 22
    Muffin24
    le Mer 16 Avr 2014 - 16:55
    Super, merci beaucoup Very Happy
    FémininAge : 18Message(s) : 104
    T_Time
    le Sam 19 Avr 2014 - 10:06
    I love it ♥
    FémininAge : 33Message(s) : 668

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Angie H.-Carter
    le Sam 19 Avr 2014 - 18:46
    o_o whoaaa je vais voir de suite ce que sa donne mais franchement tu sait tout faire!!!! J'adore!!


    Your my brillant! You shine into the darkness and you guide me in my  life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    FémininAge : 28Message(s) : 108
    Milka
    le Sam 26 Avr 2014 - 8:27
    C'est sympa merci Wink
    Contenu sponsorisé
    Aujourd'hui à 3:28

      La date/heure actuelle est Sam 1 Oct 2016 - 3:28