[PHPBB2] Votre P.A avec une double porte

Fondateur

,

je vais vous montrer comment personnaliser votre page d’accueil en insérant une porte à gauche et à droite
et au survol du menu ces dernières s'ouvriront pour laisser apparaître le contenu hinhin

.

Les codes HTML , C.S.S. et Javacripts s'adapteront automatiquement à la largeur de votre forum hinhin

.

Dans le template index_body:
Affichage/Templates/Général/index_body

Recherchez ceci:

Code:: 
<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

Remplacez par ceci:

Code:: 
<tr>
<td class="row1"rowspan="3" align="center" valign="middle">
<div id="M14_porte">
<div class="M14_porte_gauche"> </div>
{message_admin_index.message_admin_txt.MES_TXT}
<div class="M14_porte_droite"> </div>
</div>
</td>
</tr>

Pensez à enregistrer puis à valider en cliquant respectivement sur

puis

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:: #M14_porte
{
position: relative;/*ne pas toucher*/
overflow: hidden;/*ne pas toucher*/
height: 100px;/*la hauteur du bloc*/
width:100%;/*ne pas toucher*/
margin: 0; /*ne pas toucher*/
padding: 0; /*ne pas toucher*/
border: 3px solid #021d2b; /*la bordure*/
}

.M14_porte_gauche
{
background-image:url(LIEN DE L IMAGE);
background-repeat:no-repeat;
background-position:100% 50%;
background:#666666;/*La couleur de fond*/
width: 50%;/*ne pas toucher*/
height: 125px; /*la hauteur du bloc*/
position: absolute; /*ne pas toucher*/
top:0; /*ne pas toucher*/
left: 0; /*ne pas toucher*/
border-right:1px solid #333333;/*la bordure droite*/
}
.M14_porte_droite
{
background-image:url(LIEN DE L IMAGE);
background-repeat:no-repeat;
background-position:0% 50%;
background:#666666;/*La couleur de fond*/
width: 50%;/*ne pas toucher*/
height: 125px; /*la hauteur du bloc*/
position: absolute; /*ne pas toucher*/
top:0; /*ne pas toucher*/
right: 0;/*ne pas toucher*/
border-left:1px solid #333333;/*la bordure droite*/
}

La partie gauche qui laissera penser à une poignée de porte correspond à :

Code:: background-image:url(LE LIEN DE L IMAGE);
background-repeat:no-repeat;
background-position:100% 50%;

La partie droite qui laissera penser à une poignée de porte correspond à :

Code:: background-image:url(LE LIEN DE L IMAGE);
background-repeat:no-repeat;
background-position:0% 50%;

Pensez à valider les modifications en cliquant sur le bouton Valid

Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur l'index.

Déposez ce contenu:

Code:: $(function() {
   $('#M14_porte').hover(function(){
   $(this).find('.M14_porte_gauche').animate({ "left": "-=50%" },800 );
   }, function(){
   $(this).find('.M14_porte_gauche').animate({ "left": "+=50%" }, 1000 );
   });
   $('#M14_porte').hover(function(){
   $(this).find('.M14_porte_droite').animate({ "right": "-=50%" }, 800 );
   }, function(){
   $(this).find('.M14_porte_droite').animate({ "right": "+=50%" }, 1000 );
   });

});

Pensez a cliquer sur le bouton Valider

Milouzien

A encore un truc super bien Merci Philippe

Fondateur

Alex et Thierry ,

pensez a héberger les images fournies clin oeil

,

Milouzien

Oups fait j'avais oublié

Milouzien

Merci Philippe hinhin

Milouzien

Fais donc voir ça Philippe, merci.

Milouzien

Bonjours, merci, je suis intriguer par l'apellation "porte".

Blocage

Merci beaucoup, j'ai hâte de voir clin oeil

Milouzien

merci

Milouzien

merci

Invité

Merci :D

Milouzien

cool ;)
Merci du partage ;)

Milouzien

Merci

Milouzien

Merci beaucoup !

Milouzien

Merci Milouze

Milouzien

Des images en stock ou a recommandé ?

Milouzien

je suis curieuse par nature :) merci

Milouzien

curiosité, 101 Mercci. :heart:

Milouzien

Le lien pour voir l'astuce ne marche pas :ggff:

Fondateur

Merci Baptiste pour la remontée, je le modifie au fur et à mesure.

Le principe de répondre au sujet te donne
automatiquement le contenu de toutes façons clin oeil

Invité

Merci beaucoup !

Milouzien

C'est très intéressant mais je vois pas du tout ce que ça donne au final. Quelqu'un peut me donner le lien d'un forum qui a fait cette astuce ? Cela e bloque pour l'essayer. Merci :)

Invité

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

Membre regretté

Merci beaucoup !

Invité

Merci beaucoup !

Membre regretté

Merci beaucoup !

Membre regretté

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

Milouzien

Merci beaucoup !

» [PHPBB2] Afficher son profil avec transitions
» [PHPBB2]Afficher/Masquer le profil avec miniature de l'avatar
» [PHPBB2] Afficher une infobulle au survol des titres des sujets avec......
» [PHPBB2] Ajouter des boutons à la réponse rapide avec restriction
» [PHPBB2]Afficher la majeure partie des variables avec un bouton sur l'éditeur