AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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.



7 résultats trouvés pour footer

Astuce ▬ Mettre en place les logos de partenariat dans le footer. - Jeu 29 Jan 2015 - 12:10



Bonjour, bonsoir:D

Ceci est mon premier tutoriel. Après la demande de Lisou pour afficher ces partenaires dans le footer, je me suis dit que j'allais le proposer.

Dans ce tuto je vais vous montrer comment placer ces partenaires en footer de deux manières différentes. Vous avez effectivement le choix de placer vos partenaires de sorte à ce qu'ils soient visible sur toutes les pages de votre forum ou uniquement sur l'index de celui-ci.

Alors commençons:)

/!\ Je rappelle que cette section existe en cas de problème!./!\


I. Visible uniquement sur l'Index du Forum.


✘ Mise en page avec scrollbare.

Aperçus d'un potentiel rendu.

Comme vous pouvez le voir sur le screen, sur la droite de votre box il y a une scrollbare. Et aussi, la box se trouve entre votre QEEL (Qui Est En Ligne) et votre légende des nouveaux messages, pas de nouveaux messages et forum verrouillé. Ainsi votre boxe et vos partenaires ne sont visibles uniquement que su votre index.

Le HTML :
Code:
<center><div class="titre_footer">Nos Partenaires Footer.</div><div class="partenaire_footer">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div></center>


Voici donc le bout de code qu'il vous faut. Il est à placer dans le template « index_body » après la « {CHATBOX_BOTTOM} »

Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer {
background-color:#fff;
width: 620px;
height: 50px;
border: 2px solid red;
overflow: auto;
}

.titre_footer {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


Et en fin le bout de CSS associé. Il est à mettre dans la feuille de style. Vous pouvez tout changer, améliorer, mettre des effets en plus, en moins.

/!\ Ce qui met en place la scrollbare est « overflow:auto; », donc n'y touchez pas ! /!\

✘ Mise en page avec défilement.


La mise en page consiste à faire défiler les logos de la droite vers la gauche. Pour cela dans votre code HTML vous devez entourer vos logos avec la balise suivante :
Code:
<nobr><marquee> ...</marquee></nobr>


Ce qui donne :


Et dans votre CSS vous n'avez qu'à régler la hauteur de votre boxe comme bon vous semble et de retirer l'overflow.

✘✘ Variante du défilement.

Comme vue précédemment le défilement se fait de la droite vers la gauche, mais que diriez-vous de varier le défilement, de faire en sorte que lorsqu'on passe sa souris sur un logo le défilement se stop – ce qui est fort appréciable pour une clikeuse de logo partenaire comme moi xD

✘✘✘ Variante simple.

Les variantes simples seront juste de changer le sens du défilement. Au lieu d'aller de droite à gauche, pourquoi ne pas aller de gauche à droite, de bas en haut et de haut en bas. Pour cela il faut mettre un attribut à votre balise. Celui-ci sera « DIRECTION », puis vous ajouterez la direction souhaité :

Vers la gauche :


Vers la droite :


Vers le haut :


Vers le bas :


Pour définir le sens de défilement vous avez le choix entre les quatre valeurs suivantes :
- left.
- right.
- up.
- down.

✘✘✘ Variante « aller-retour ».

«Ce que j’appelle un « aller-retour » c'est le fait que sa aille à gauche puis reviens à droite et ceci à l'infini. Pour définir une variante de défilement il faut ajouter un attribut à la balise marquee qui sera « behavior ». ce qui donnera
Code:
<marquee behavior="..."></marquee>
, ce qui donne :



Pour obtenir cet effet nous allons ajouter à notre balise l'attribut « alternate » :
Code:
<marquee behavior="alternate">...</marquee>
Personnellement je conseille cette variante lorsque vous avez un petit nombre de logo à faire défiler.

✘✘ Stop Souris.

Le stop souris consiste à faire stopper le défilement au passage de votre souris.

Néanmoins ! J'ai rencontré un soucis avec le Stop souris. Et en ayant discuter avec Nihil, elle m'a fait découvert que le Stop Souris ne fonctionne pas chez tout le monde et sur tous les navigateurs. Ayant fais le test moi-même, le stop souris fonctionne parfaitement bien sous le navigateur Google Chrome, mais pas sous le navigateur Mozilla Firefox. Alors que chez Samhain cela fonction très bien sous les deux navigateurs.


La aussi il faut ajouter, non pas un, mais deux attributs qui se suivent : « onmouseover="this.stop();" » « onmouseout="this.start();" », ce qui donne :
Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></marquee>


✘✘ Le temps de défilement.

Vous pouvez choisir de faire défiler vos partenaires lentement, ou au contraire rapidement. La aussi on ajout un attribut à notre balise de départ : « scrollamount ». Vous définissez une valeur numérique compris en 1 et 100. A 1 vos logos défilerons très lentement et plus vous vous rapprocherez de 100 vos logos défilerons vite.

Valeur numérique de 5 :


Valeur numérique de 30 :



II. Visible sur toutes les pages du Forum (phpBB2).

Comme promis, voici comment mettre en place votre footer partenaire de sorte à ce qu'il soit visible sur toutes les pages de votre forum. Vous devez aller dans le template « overall_footer_begin ».

Prenez le code qui suit et changé intégralement le template avec.
Le HTML :
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen"><div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->


Votre morceau de code reste inchangé à la première partie :
Code:
<div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>


Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer2 {
background-color:#fff;
width: 620px;
height: 100px;
border: 2px solid red;
overflow: auto;
}

.titre_footer2 {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


La encore vous pouvez personnaliser le footer comme bon vous semble, en utilisant toutes les variantes cité plus haut.

II. Mise en page avec une image de fond.

Vous pouvez personnaliser à volonté votre footer et donc lui donner une image de fond. J'ai fait du basique pour vous montrer : Screen ou en Live.

Pour cela rien de plus simple pour les codeurs en herbe que vous êtes Very Happy Dans votre CSS vous allez changer le :
Code:
background-color : #fff;

en
Code:
background : url('METTRE ICI L'URL DE VOTRE IMAGE');


Et voilà, vous avez une image en fond ! Ah j’allai oublier ! Si vous définissez une image de fond vous devez changer la hauteur et la largeur en fonction de la taille de votre image.

Ensuite vous allez voir que vos logos sont mal positionné. Pas de problème nous allons remédier à cela. Vous allez ajouter une div dans votre code, comme ceci :
Code:
<div class="partenaire_footer2"><div class="logo_partenaires">...</div></div>


Puis dans votre CSS, vous ajoutez :
Code:
.logo_partenaires { padding : 35px ; }


Vous réglez la valeur du padding comme bon vous semble en fonction de votre image :)

Et voilà, le tuto est terminé \o/

/!\ Je rappelle que cette section existe en cas de problème!./!\

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Halloween

Barre de navigation en footer façon sites - Lun 27 Mai 2013 - 13:12



    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 --> | <!-- 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/


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Halloween

Barre de navigation en footer façon sites - 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 --> | <!-- 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/


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Arrogant Mischief

Mettre une image à la place des légendes - Lun 14 Jan 2013 - 20:15



Bonjour/Bonsoir !

Suite à mon topic sur la suppression des légendes ( http://www.never-utopia.com/t42118-supprimer-les-legendes ), Chk Marvel m'a donné l'idée d'une petite astuce pour remplacer ces fameuses légendes par une image.


Toujours dans les templates index_body (pour l'accueil) et viewforum_body (pour l'intérieur des catégories), vous trouvez la partie entre :
Code:
<!-- BEGIN switch_legend -->
et
Code:
<!-- END switch_legend -->
que vous supprimez.

A la place, vous insérez la balise
Code:
<img src="URL DE VOTRE IMAGE" border="0" alt="" />


Vous enregistrez et publiez votre template. Vous pouvez bien sûr personnaliser cette partie grâce au CSS, ou encore insérer du texte ou tout autre contenu (ça peut être sympa pour les partenaires par exemple).


Pour ceux qui veulent utiliser le CSS, il vous suffit d'encadrer votre contenu ajouté par
Code:
<span class="votre_titre">VOTRE CONTENU</span>

et de personnaliser dans votre CSS avec
Code:
.votre_titre {
      Vos personnalisations
   }



Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Arrogant Mischief

Supprimer les légendes - Lun 14 Jan 2013 - 16:12



MAJ Responsable (Onyx) :
Une autre façon d'arriver au même résultat beaucoup plus facilement est d'aller dans le Panneau d'administration > Onglet "Général" > Messages & email > Configuration > Afficher la légende du statut des messages > non.




Bonjour ou Bonsoir,

Voilà une petite astuce pour supprimer les légendes de votre accueil et de l'intérieur de vos catégories. Ce que j'entends par légende, ce sont ces zones où on trouve les icônes de nouveau message, message verrouillé, etc...

Légende de l'accueil:

Légende intérieure des catégories:


Alors pour la légende de l'accueil, ouvrez votre template index_body et supprimez tout ce qui est entre ce Begin et ce End :
Code:
<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
<!-- END switch_legend -->

Vous le supprimez simplement et n'oubliez pas de publier le template.

Pour la légende de l'intérieur des catégories, ouvrez votre template viewforum_body et supprimez le passage entre ce Begin et ce End :
Code:
<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
   <!-- END switch_legend -->

Encore une fois, n'oubliez pas de publier.

Voilà, j'espère que cette petite astuce vous sera utile !

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Okhmhaka

Un "Footer" (img bas de page) sur votre Forum - Mer 2 Sep 2009 - 21:28



La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.

Allez dans le panneau > Affichage > Templates > "overall_footer_end"

Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :
Code:
<div id="newbottom">
</div>


Juste avant ce bout de code :
Code:
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


(à la fin du templates donc.)


Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
Pour cela, il vous faut aller dans :
Affichage > Image & Couleurs > Couleurs > Feuille CSS


Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".
Code:
#newbottom
{
clear: both;
margin: auto;
width: 100%;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 500px;
}


Explications :
clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
margin: auto : centre l'image si elle ne fait pas toute la largeur
width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
background-image : c'est l'adresse de votre image de fond
background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
background-position: la position du fond, ici au centre
height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

[INVISION]Changer la couleur de la barre lien bas de page - Sam 27 Juin 2009 - 18:31



Bonjour !

Selon votre forum, la barre des liens en bas de l'index est souvent sur un fond de couleur détonnant avec le fond.

Comme le fond de notre forum d'exemple est noir, nous allons donc mettre le fond de la barre en noir. Pour ce faire, cherchez le code CSS suivant :

Code:
#gfooter
    {
        background-color:#60A500;
        color:#FFFFFF;
        font-size:0.8em;
        margin:8px 0;
        padding:0.5em;
        text-align:right;
    }


Remplacez le code du background-color par le code couleur voulu, ce qui donnera (rappel : notre exemple est le noir) :

Code:
#gfooter
    {
        background-color:#000000;
        color:#FFFFFF;
        font-size:0.8em;
        margin:8px 0;
        padding:0.5em;
        text-align:right;
    }


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Mar 21 Nov 2017 - 22:23