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 !
    MasculinAge : 20Message(s) : 19
    MajorNeuf
    le Ven 5 Juin 2015 - 14:08
    merci
    MasculinAge : 18Message(s) : 90
    Anon
    le Dim 7 Juin 2015 - 13:24
    Sympatoche le rendu, merci !



    ~
    MasculinAge : 24Message(s) : 9
    C0DEX
    le Lun 8 Juin 2015 - 0:36
    J'ai bien envie d'essayé ça, c'est agréable à l'oeil en plus.
    Merci à toi Halloween :)
    FémininAge : 25Message(s) : 32
    Scythe
    le Mar 16 Juin 2015 - 7:08
    Mille mercis !
    FémininAge : 20Message(s) : 253
    erika02
    le Ven 26 Juin 2015 - 7:43
    Merchi


    FémininAge : 20Message(s) : 51
    Sachem
    le Jeu 30 Juil 2015 - 13:28
    merci!
    FémininAge : 23Message(s) : 30
    Kuvera
    le Dim 2 Aoû 2015 - 17:30
    merci !
    FémininAge : 24Message(s) : 1355

    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 Dim 2 Aoû 2015 - 17:59
    Très beau, j'aime beaucoup, mais je serai curieuse de voir le rendu final sur un forum :)
    FémininAge : 23Message(s) : 117
    Err0r
    le Mer 5 Aoû 2015 - 9:23
    je pique !


    FémininAge : 46Message(s) : 200
    Angy38
    le Mer 5 Aoû 2015 - 10:38
    Merci !


    FémininAge : 26Message(s) : 184
    rosebleudu10
    le Lun 17 Aoû 2015 - 21:03
    merci
    FémininAge : 24Message(s) : 169

    Les Guildes
    Guilde des Conteurs:
    7/30  (7/30)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Linaewen
    le Mer 19 Aoû 2015 - 7:44
    Waaaw merci x) J'vais m'en servir pour sûr Haha Very Happy
    FémininAge : 27Message(s) : 90
    Black Diamond
    le Jeu 20 Aoû 2015 - 21:10
    Haan encore plus cool ♥



    FémininAge : 25Message(s) : 28
    Goupixette
    le Jeu 3 Sep 2015 - 13:12
    *Curieuse de voir l'aperçut* Mercii :3


    MasculinAge : 36Message(s) : 40
    hurudy
    le Dim 6 Sep 2015 - 1:08
    Super !
    MasculinAge : 34Message(s) : 63
    neochrome_ltd
    le Dim 6 Sep 2015 - 8:05
    Merci
    MasculinAge : 34Message(s) : 63
    neochrome_ltd
    le Dim 6 Sep 2015 - 10:18
    Bonjour, j'aimerais décaller les colonnes car elles se retrouvent sur la gauche, comment dois je m'y prendre s'il vous plait.

    Merci
    FémininAge : 23Message(s) : 12
    crackle bones
    le Lun 7 Sep 2015 - 20:55
    Magnifique, merci beaucoup :love:
    MasculinAge : 25Message(s) : 14
    SpaceSapien
    le Ven 18 Sep 2015 - 10:54
    Merci pour ce jolie code :)
    FémininAge : 26Message(s) : 19
    Sleyah
    le Sam 19 Sep 2015 - 21:03
    Merci !
    MasculinAge : 21Message(s) : 26
    Maxen Cox
    le Dim 20 Sep 2015 - 16:34
    Merciiii c'est vraiment super !! *^*
    FémininAge : 17Message(s) : 173
    Zoé
    le Mar 22 Sep 2015 - 10:55
    merci :3


    FémininAge : 24Message(s) : 54
    Alec Sing Toa
    le Sam 26 Sep 2015 - 9:44
    Super agréable à l’œil et vraiment original. Merci du partage ^ ^
    MasculinAge : 17Message(s) : 49

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Roitatan
    le Mar 29 Sep 2015 - 19:10
    Merci
    MasculinAge : 23Message(s) : 42

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Rizhskaya.
    le Dim 1 Nov 2015 - 19:37
    Pas mal du tout, ça peut rajoute un côté site internet assez original.
    Merci pour le partage. :)
    Contenu sponsorisé
    Aujourd'hui à 10:42

      La date/heure actuelle est Sam 1 Oct 2016 - 10:42