Astuce ▬ Mettre en place les logos de partenariat dans le footer.

Rappel du premier message :



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:)

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.



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

Nikel ça marche parfaitement !
Explications très claires en plus, absolument parfait.
Merci.

Merci o/

Merci beaucoup pour ce partage !

Merci beaucoup pour ce codage et ce tuto ! **
Il est vraiment cool ! **

Merciiii <3

Un graaaaand merci !!