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 :

    TAGS
    Langage : #css #html
    Éléments : #navigation #footer
    Auteur : #auteur_Halloween
    Version : #phpBB2


      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 : 28Message(s) : 77
    Hopyes
    le Jeu 19 Juin 2014 - 11:59
    merci beaucoup
    Invité
    le Sam 21 Juin 2014 - 17:28
    J'aime ce que tu fais ! :)
    MasculinAge : 21Message(s) : 55
    Merino
    le Dim 22 Juin 2014 - 20:59
    Merci, ça rend super bien!
    FémininAge : 21Message(s) : 29
    isKeiko
    le Mer 25 Juin 2014 - 19:33
    C'est vraiment magnifique !
    FémininAge : 21Message(s) : 81
    Hyl
    le Jeu 3 Juil 2014 - 19:36
    C'est original comme code, j'aime beaucoup !
    Merci  :hug2: 



    » H y l



    Spoiler:
    MasculinAge : 29Message(s) : 23
    Snapforum
    le Lun 7 Juil 2014 - 13:20
    Merci :)
    FémininAge : 20Message(s) : 152
    Zarwins
    le Mar 8 Juil 2014 - 5:35
    merci ! :O


    FémininAge : 20Message(s) : 119
    Sixties
    le Ven 11 Juil 2014 - 1:41
    Merci ! Very Happy
    FémininAge : 21Message(s) : 26
    Saphiina
    le Lun 21 Juil 2014 - 14:30
    SUPER !! :o merci :o
    FémininAge : 24Message(s) : 102
    LyN[ss]
    le Mer 23 Juil 2014 - 10:12
    Merci beaucoup !


    ❝Y.O.U G.E.T L.Y.N.[.S.S.].'.E.D❞
    how could you hate me? When all I ever wanted to be was you ? How could you love me? When all you ever gave me were open wounds ? Tell me why you broke me down and betrayed my trust in you ?
    FémininAge : 23Message(s) : 197
    Stitch56
    le Mer 23 Juil 2014 - 13:48
    Marchi ♥ ^^
    FémininAge : 21Message(s) : 76

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Zeroo
    le Ven 25 Juil 2014 - 7:08
    Merci o/
    FémininAge : 14Message(s) : 148

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kau
    le Mar 29 Juil 2014 - 20:36
    Miiiiici *^*
    FémininAge : 17Message(s) : 75
    Fleurine
    le Dim 3 Aoû 2014 - 9:45
    merci beaucoup !! <3
    FémininAge : 24Message(s) : 162
    petit lu
    le Dim 3 Aoû 2014 - 13:10
    Merci
    FémininAge : 19Message(s) : 177
    Piratress
    le Lun 4 Aoû 2014 - 16:46
    C'est chouette ça !Merci !!
    FémininAge : 15Message(s) : 250

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kovu
    le Sam 9 Aoû 2014 - 14:35
    Merci !


    FémininAge : 21Message(s) : 67

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    catkiller
    le Dim 10 Aoû 2014 - 4:49
    Superbe, ca change *-*
    FémininAge : 23Message(s) : 59
    piou
    le Lun 11 Aoû 2014 - 14:10
    Merci pour ce tuto n_n
    FémininAge : 20Message(s) : 153

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    0smose
    le Jeu 14 Aoû 2014 - 11:18
    J'aime beaucoup cette barre de navigation. Je la testerai... Personnalisée, elle doit être encore mieux. :3 Merci beaucoup, encore, pour un tel travail pour nous permettre de personnaliser nos forums !




    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    MasculinAge : 22Message(s) : 142

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Databar
    le Mer 20 Aoû 2014 - 13:38
    merci :)
    FémininAge : 19Message(s) : 52
    PLOIM
    le Lun 25 Aoû 2014 - 15:31
    Merci du partage !
    MasculinAge : 25Message(s) : 35
    teteaclaquefr
    le Mer 27 Aoû 2014 - 21:19
    Merci ! C'est très jolie
    MasculinAge : 21Message(s) : 8
    Tommy'
    le Jeu 28 Aoû 2014 - 15:14
    Ça a l'air vraiment sympa, super boulot.
    MasculinAge : 42Message(s) : 37
    Mr Yo
    le Dim 31 Aoû 2014 - 18:46
    Super intéressant Very Happy
    Contenu sponsorisé
    Aujourd'hui à 18:52

      La date/heure actuelle est Ven 30 Sep 2016 - 18:52