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


      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 : 34Message(s) : 102
    Féli
    le Dim 19 Mai 2013 - 15:52
    Sympa, merci


    FémininAge : 19Message(s) : 1036
    .Hunter
    le Dim 19 Mai 2013 - 16:14
    Très sympas, merci du partage! :)


    FémininAge : 28Message(s) : 110
    Aile
    le Lun 27 Mai 2013 - 9:45
    J'adore, il faut que je test! Merci beaucoup pour la partage!


    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 Lun 27 Mai 2013 - 13:12
    Avec plaisir =3


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 28Message(s) : 28
    lapinette
    le Lun 27 Mai 2013 - 21:02
    miciii
    FémininAge : 34Message(s) : 102
    Féli
    le Mar 28 Mai 2013 - 9:07
    Salut,

    A ton possibilité de le mettre en spoiler cette "navigation" ?
    si oui, comment ?

    merci


    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 Mar 28 Mai 2013 - 10:38
      Hey,

      J'en doute. En tout cas je n'en suis pas capable.


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 34Message(s) : 102
    Féli
    le Jeu 30 Mai 2013 - 9:47
    Merci Halloween pour ta réponse.
    J'ai cherché mais ça ne marche pas. Je pense que dans le codage tout est possible, après c'est savoir comment surtout... là, c'est une autre histoire


    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 Jeu 30 Mai 2013 - 11:02
    Vraiment désolée =$
    Après peut-être que si tu postes dans les aides en codage on pourra t'aiguiller, il y a bien plus calé que moi Wink


    Je mets les voiles, que le vent te soit favorable matelot !
    MasculinAge : 19Message(s) : 398
    K-Surf
    le Jeu 30 Mai 2013 - 19:56
    Merci tres utile a savoir


    FémininAge : 24Message(s) : 63
    Rapsodie♥
    le Sam 1 Juin 2013 - 13:56
    C'est très sympa, merci Very Happy

    édit : Je me permet une petite question hs : Les deux sortes de PA qui sont sur votre forum test on peut les trouver ou ? Embarassed
    MasculinAge : 26Message(s) : 59
    Chevalier Oignon
    le Dim 2 Juin 2013 - 1:01
    Merci pour ce tuto ! : D
    FémininAge : 34Message(s) : 102
    Féli
    le Dim 2 Juin 2013 - 12:19
    Oui Halloween, je sais que c'est une demande à la fois alors j'attends d'abord que ma première demande soit effectuée pour la suite.
    cheers


    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 2 Juin 2013 - 12:38
    @Rapsodie♥ a écrit:édit : Je me permet une petite question hs : Les deux sortes de PA qui sont sur votre forum test on peut les trouver ou ? Embarassed

    Toutes mes excuses, je n'avais pas vu l'édit =O
    Les PA sont des commandes, elles ne sont donc pas disponibles Wink Cependant tu peux toujours poster une demande avec un schéma qui s'en approche et j'essaierai de t'aider.


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 24Message(s) : 63
    Rapsodie♥
    le Dim 2 Juin 2013 - 12:51
    D'accord je vais faire ça, merci beaucoup :)


    - Ecrire, c'est ranger le bordel qu'on a dans sa tête. -
    MasculinAge : 21Message(s) : 13
    Le père Noël.
    le Dim 2 Juin 2013 - 20:58
    Merci.
    FémininAge : 18Message(s) : 51
    Bridgess
    le Mer 5 Juin 2013 - 15:17
    Très utile :) ! Merci ^^
    MasculinAge : 31Message(s) : 18
    Jagan
    le Sam 8 Juin 2013 - 23:41
    Merci
    FémininAge : 33Message(s) : 125
    Sweet Angel
    le Dim 9 Juin 2013 - 11:14
    Merci pour ce tuto qui me semble très intéressant!
    FémininAge : 28Message(s) : 30
    Kânon
    le Lun 24 Juin 2013 - 17:53
    super
    MasculinAge : 22Message(s) : 220
    titan1
    le Mar 25 Juin 2013 - 23:10
    Merci, beaucoup.


    Seule la mort met fin au devoir
    MasculinAge : 17Message(s) : 30
    Jason41800
    le Lun 8 Juil 2013 - 13:43
    Merci ! Very Happy
    MasculinAge : 19Message(s) : 27
    KaraV3
    le Ven 12 Juil 2013 - 0:54
    Merci
    MasculinAge : 25Message(s) : 7
    Vekky
    le Mar 16 Juil 2013 - 17:24
    Merci beaucoup =)
    Contenu sponsorisé
    Aujourd'hui à 22:17

      La date/heure actuelle est Ven 30 Sep 2016 - 22:17