Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le deal à ne pas rater :
Mangas Kazé : 2 achetés = 1 manga offert
Voir le deal

 

 [PHPBB2] Votre P.A avec une double porte

Aller en bas 
+40
gigi60
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
Aller à la page : 1, 2  Suivant
AuteurMessage
Milouze14
Fondateur

Milouze14



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMar 12 Nov 2013 - 20:03

coucou ,

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:

 <!-- 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  Enregistr  puis Ajout

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



Dernière édition par Milouze14 le Lun 29 Nov 2021 - 6:55, édité 19 fois
Revenir en haut Aller en bas
https://www.milouze14.com
fleur78
Milouzien

fleur78



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMar 12 Nov 2013 - 20:14

super A encore un truc super bien Merci Philippe
Revenir en haut Aller en bas
http://graphfleur78.forumactif.org/
Milouze14
Fondateur

Milouze14



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMer 13 Nov 2013 - 3:28

coucou Alex et Thierry ,

pensez a héberger les images fournies clin oeil ,
Revenir en haut Aller en bas
https://www.milouze14.com
fleur78
Milouzien

fleur78



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMer 13 Nov 2013 - 7:15

Oups fait j'avais oublié
Revenir en haut Aller en bas
http://graphfleur78.forumactif.org/
Teten85
Milouzien

Teten85



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyLun 18 Nov 2013 - 0:13

Merci Philippe hinhin 
Revenir en haut Aller en bas
http://entrenous.bbfr.net/
Aenigma
Milouzien

Aenigma



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 22 Nov 2013 - 8:39

Fais donc voir ça Philippe, merci.
Revenir en haut Aller en bas
http://atlan.niceboard.org/
pierre31250
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptySam 4 Jan 2014 - 12:15

Bonjours, merci, je suis intriguer par l'apellation "porte".
Revenir en haut Aller en bas
Sick.l.Offrande
Blocage
Sick.l.Offrande



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyDim 5 Jan 2014 - 5:47

Merci beaucoup, j'ai hâte de voir  clin oeil clin oeil 
Revenir en haut Aller en bas
https://office-equideow.forumactif.com/
safranite
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyJeu 29 Mai 2014 - 21:06

merci
Revenir en haut Aller en bas
databar
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 22 Aoû 2014 - 8:30

merci
Revenir en haut Aller en bas
Invité
Invité
Anonymous



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 22 Aoû 2014 - 9:05

Merci :D
Revenir en haut Aller en bas
Rumbelle85
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptySam 23 Aoû 2014 - 16:43

cool ;)
Merci du partage ;)
Revenir en haut Aller en bas
http://storybrookerpg.forumactif.org/
ThunderTB
Milouzien

ThunderTB



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 5 Sep 2014 - 1:59

Merci
Revenir en haut Aller en bas
http://hockeyfederation.forumgratuit.org/forum
WyvernNE
Milouzien

WyvernNE



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyLun 6 Oct 2014 - 15:19

Merci beaucoup !
Revenir en haut Aller en bas
http://foxtrottx3.forumgratuit.ch/
Eczema Help
Milouzien

Eczema Help



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyDim 12 Oct 2014 - 19:30

Merci Milouze
Revenir en haut Aller en bas
http://eczemahelp.forumactif.org/
Eczema Help
Milouzien

Eczema Help



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptySam 18 Oct 2014 - 13:50

Des images en stock ou a recommandé ?
Revenir en haut Aller en bas
http://eczemahelp.forumactif.org/
patriciadpt30
Milouzien

patriciadpt30



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyDim 22 Fév 2015 - 11:35

je suis curieuse par nature :) merci
Revenir en haut Aller en bas
Gypsy Water.
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyJeu 26 Fév 2015 - 19:26

curiosité, 101 Mercci. :heart:
Revenir en haut Aller en bas
1baptiste
Milouzien

1baptiste



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyLun 2 Mar 2015 - 18:59

Le lien pour voir l'astuce ne marche pas :ggff:
Revenir en haut Aller en bas
http://horus.forumactif.com/
Milouze14
Fondateur

Milouze14



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyLun 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 clin oeil
Revenir en haut Aller en bas
https://www.milouze14.com
Invité
Invité
Anonymous



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMar 10 Mar 2015 - 12:37

Merci beaucoup !
Revenir en haut Aller en bas
1baptiste
Milouzien

1baptiste



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMar 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 :)
Revenir en haut Aller en bas
http://horus.forumactif.com/
Invité
Invité
Anonymous



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 8 Mai 2015 - 10:44

Merci beaucoup !
Revenir en haut Aller en bas
Flaura
Milouzien

Flaura



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 8 Mai 2015 - 21:15

Merci beaucoup !
Revenir en haut Aller en bas
http://pokemondm.pokemonrpg.org
Graazi
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 29 Mai 2015 - 14:48

Merci beaucoup !
Revenir en haut Aller en bas
http://mediatek.discutforum.com
mariok
Membre regretté

mariok



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyJeu 1 Oct 2015 - 21:59

Merci beaucoup !
Revenir en haut Aller en bas
http://www.amarid.net
Invité
Invité
Anonymous



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 2 Oct 2015 - 15:32

Merci beaucoup !
Revenir en haut Aller en bas
mariok
Membre regretté

mariok



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 2 Oct 2015 - 20:51

Merci beaucoup !
Revenir en haut Aller en bas
http://www.amarid.net
mariok
Membre regretté

mariok



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 2 Oct 2015 - 20:52

Merci beaucoup !
Revenir en haut Aller en bas
http://www.amarid.net
Orphère
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyVen 2 Oct 2015 - 22:34

Merci beaucoup !
Revenir en haut Aller en bas
tastet.roger
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptySam 3 Oct 2015 - 9:08

Merci beaucoup !
Revenir en haut Aller en bas
https://rgpetanque36.forumactif.com/
benchris
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyDim 4 Oct 2015 - 19:05

Merci beaucoup !
Revenir en haut Aller en bas
https://oursbleu.forumactif.com/
Grande013
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyLun 5 Oct 2015 - 22:05

Merci beaucoup !
Revenir en haut Aller en bas
Ezio
Milouzien

Ezio



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyJeu 29 Oct 2015 - 20:22

Merci beaucoup !
Revenir en haut Aller en bas
http://laguerredesdesclans.forumactif.org/
damieng59
Milouzien

avatar



[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte EmptyMer 11 Nov 2015 - 21:44

Merci beaucoup !
Revenir en haut Aller en bas
http://dg-59.forumactif.org
Contenu sponsorisé





[PHPBB2] Votre P.A avec une double porte Empty
MessageSujet: Re: [PHPBB2] Votre P.A avec une double porte   [PHPBB2] Votre P.A avec une double porte Empty

Revenir en haut Aller en bas
 
[PHPBB2] Votre P.A avec une double porte
Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» [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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces Phpbb2-
Sauter vers: