| [PHPBB2] Votre P.A avec une double porte | |
|
+40gigi60 Lilas Splash Taraserie petitefeuille Neptunia Kaeyla Divarion Ombi Chocolatine RED² Psychotic Bitch Ecleasya Emc2 dragon594 El_Mojito damieng59 Ezio Grande013 benchris tastet.roger Orphère mariok Graazi Flaura 1baptiste Gypsy Water. patriciadpt30 Eczema Help WyvernNE ThunderTB Rumbelle85 databar safranite Sick.l.Offrande pierre31250 Aenigma Teten85 fleur78 Milouze14 44 participants |
|
Auteur | Message |
---|
Milouze14
Fondateur

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: [PHPBB2] Votre P.A avec une double porte 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  . Dans le template index_body: Affichage/ Templates/ Général/ index_bodyRecherchez 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 JavascriptMettre 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
Dernière édition par Milouze14 le Lun 29 Nov 2021 - 6:55, édité 19 fois | |
|
 | |
fleur78
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | |
 | |
Milouze14
Fondateur

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Mer 13 Nov 2013 - 3:28 | |
|  Alex et Thierry , pensez a héberger les images fournies  , | |
|
 | |
fleur78
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Mer 13 Nov 2013 - 7:15 | |
| | |
|
 | |
Teten85
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Lun 18 Nov 2013 - 0:13 | |
| Merci Philippe | |
|
 | |
Aenigma
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 22 Nov 2013 - 8:39 | |
| Fais donc voir ça Philippe, merci. | |
|
 | |
pierre31250
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Sam 4 Jan 2014 - 12:15 | |
| Bonjours, merci, je suis intriguer par l'apellation "porte". | |
|
 | |
Sick.l.Offrande Blocage

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | |
 | |
safranite
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Jeu 29 Mai 2014 - 21:06 | |
| | |
|
 | |
databar
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 22 Aoû 2014 - 8:30 | |
| | |
|
 | |
Invité Invité

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 22 Aoû 2014 - 9:05 | |
| |
|
 | |
Rumbelle85
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Sam 23 Aoû 2014 - 16:43 | |
| cool ;) Merci du partage ;) | |
|
 | |
ThunderTB
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 5 Sep 2014 - 1:59 | |
| | |
|
 | |
WyvernNE
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Lun 6 Oct 2014 - 15:19 | |
| | |
|
 | |
Eczema Help
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Dim 12 Oct 2014 - 19:30 | |
| | |
|
 | |
Eczema Help
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Sam 18 Oct 2014 - 13:50 | |
| Des images en stock ou a recommandé ? | |
|
 | |
patriciadpt30
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Dim 22 Fév 2015 - 11:35 | |
| je suis curieuse par nature :) merci | |
|
 | |
Gypsy Water.
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Jeu 26 Fév 2015 - 19:26 | |
| curiosité, 101 Mercci. :heart: | |
|
 | |
1baptiste
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Lun 2 Mar 2015 - 18:59 | |
| Le lien pour voir l'astuce ne marche pas :ggff: | |
|
 | |
Milouze14
Fondateur

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte 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 | |
|
 | |
Invité Invité

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Mar 10 Mar 2015 - 12:37 | |
| |
|
 | |
1baptiste
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Mar 10 Mar 2015 - 17:12 | |
| 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é Invité

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 8 Mai 2015 - 10:44 | |
| |
|
 | |
Flaura
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 8 Mai 2015 - 21:15 | |
| | |
|
 | |
Graazi
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 29 Mai 2015 - 14:48 | |
| | |
|
 | |
mariok
Membre regretté

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Jeu 1 Oct 2015 - 21:59 | |
| | |
|
 | |
Invité Invité

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 2 Oct 2015 - 15:32 | |
| |
|
 | |
mariok
Membre regretté

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 2 Oct 2015 - 20:51 | |
| | |
|
 | |
mariok
Membre regretté

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 2 Oct 2015 - 20:52 | |
| | |
|
 | |
Orphère
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Ven 2 Oct 2015 - 22:34 | |
| | |
|
 | |
tastet.roger
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Sam 3 Oct 2015 - 9:08 | |
| | |
|
 | |
benchris
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Dim 4 Oct 2015 - 19:05 | |
| | |
|
 | |
Grande013
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Lun 5 Oct 2015 - 22:05 | |
| | |
|
 | |
Ezio
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Jeu 29 Oct 2015 - 20:22 | |
| | |
|
 | |
damieng59
Milouzien

![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte Mer 11 Nov 2015 - 21:44 | |
| | |
|
 | |
Contenu sponsorisé
![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | Sujet: Re: [PHPBB2] Votre P.A avec une double porte ![[PHPBB2] Votre P.A avec une double porte Empty](https://2img.net/i/empty.gif) | |
| |
|
 | |
| [PHPBB2] Votre P.A avec une double porte | |
|