[PHPBB2] Votre P.A avec une double porte

Milouze14 le Mar 12 Nov 2013 - 20:03

 ,

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  .


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

-Astuce des Forums Milouze14&Compagnie- Astuce postée par: Réponse automatique: Merci de cliquer ici pour voir le message Pour toute information,merci de contacter un Membre du Staff

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


Recherchez ceci:

Code:


 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->


Remplacez par ceci:

Code:


<!-- BEGIN message_admin_txt -->
 <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>
 <!-- END message_admin_txt -->


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  



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








Voilà,c'est tout pour le moment.
Un soucis?
Direction l'entraide 
https://www.milouze14.com/f108-entraide-tous-supports

fleur78 le Mar 12 Nov 2013 - 20:14

A encore un truc super bien Merci Philippe

Milouze14 le Mer 13 Nov 2013 - 3:28

 Alex et Thierry ,

pensez a héberger les images fournies  ,

fleur78 le Mer 13 Nov 2013 - 7:15

Teten85 le Lun 18 Nov 2013 - 0:13

Merci Philippe  

Aenigma le Ven 22 Nov 2013 - 8:39

pierre31250 le Sam 4 Jan 2014 - 12:15

Sick.l.Offrande le Dim 5 Jan 2014 - 5:47

Merci beaucoup, j'ai hâte de voir    

safranite le Jeu 29 Mai 2014 - 21:06

databar le Ven 22 Aoû 2014 - 8:30

Invité le Ven 22 Aoû 2014 - 9:05

Rumbelle85 le Sam 23 Aoû 2014 - 16:43

ThunderTB le Ven 5 Sep 2014 - 1:59

WyvernNE le Lun 6 Oct 2014 - 15:19

Eczema Help le Dim 12 Oct 2014 - 19:30

Eczema Help le Sam 18 Oct 2014 - 13:50

patriciadpt30 le Dim 22 Fév 2015 - 11:35

Gypsy Water. le Jeu 26 Fév 2015 - 19:26

1baptiste le Lun 2 Mar 2015 - 18:59

Milouze14 le Lun 2 Mar 2015 - 19:39

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

{12°S}coco-lapin le Mar 10 Mar 2015 - 12:37

1baptiste le Mar 10 Mar 2015 - 17:12

Invité le Ven 8 Mai 2015 - 10:44

Flaura le Ven 8 Mai 2015 - 21:15

Graazi le Ven 29 Mai 2015 - 14:48

mariok le Jeu 1 Oct 2015 - 21:59

Invité le Ven 2 Oct 2015 - 15:32

mariok le Ven 2 Oct 2015 - 20:51

mariok le Ven 2 Oct 2015 - 20:52

Orphère le Ven 2 Oct 2015 - 22:34

tastet.roger le Sam 3 Oct 2015 - 9:08

benchris le Dim 4 Oct 2015 - 19:05

Grande013 le Lun 5 Oct 2015 - 22:05

Ezio le Jeu 29 Oct 2015 - 20:22

damieng59 le Mer 11 Nov 2015 - 21:44