Connexion

Récupérer mon mot de passe

Derniers sujets
» [PhpBB2] La version web ne s'affiche pas sur "mon" IPAD.
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 21 Juil 2019 - 15:01 par photoclic

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 21 Juil 2019 - 6:07 par Milouze14

» [Toutes versions]Remplacer les icônes de l'éditeur par des icônes FontAwesome
[PHPBB2] Votre P.A avec une double porte Clock-10Sam 20 Juil 2019 - 11:23 par Morane

» histoire du Jour sans fin
[PHPBB2] Votre P.A avec une double porte Clock-10Sam 20 Juil 2019 - 7:29 par Quad Daniel

» *RESOLU*[PhpBB2] Chargement de mon forum
[PHPBB2] Votre P.A avec une double porte Clock-10Mer 17 Juil 2019 - 19:51 par Milouze14

» *RESOLU*[PhpBB2] Un encodage pour stoper l'autoplay pour mon IFRAM vidéo
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 16 Juil 2019 - 18:58 par Milouze14

» [Blague] Le patient et le psychiatre
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 16 Juil 2019 - 7:43 par Quad Daniel

» Élémentaire mon cher Watson !
[PHPBB2] Votre P.A avec une double porte Clock-10Lun 15 Juil 2019 - 9:04 par soleda

» [AwesomeBB]Activer le lien du Pseudo sur l'index dans les derniers messages
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 14 Juil 2019 - 8:01 par Milouze14

» Fille ou garçon "blagounette"
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 9 Juil 2019 - 8:09 par Quad Daniel

» Règlement de l'entraide Forumactif
[PHPBB2] Votre P.A avec une double porte Clock-10Ven 5 Juil 2019 - 19:29 par Rabolliot

» [AwesomeBB] Rendre l'image du header cliquable
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 2 Juil 2019 - 19:12 par Milouze14

» [ModernBB] Rendre l'image du header cliquable
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 2 Juil 2019 - 19:07 par Splash

» [PhpBB2]Afficher le profil à droite
[PHPBB2] Votre P.A avec une double porte Clock-10Mar 2 Juil 2019 - 9:28 par Morane

» les Histoires Belge
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 30 Juin 2019 - 10:50 par Milouze14

» *RESOLU*[PhpBB2] .postbody / texte qui sort du cadre
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 30 Juin 2019 - 10:48 par Milouze14

» Histoire de Blondes Sans Fin
[PHPBB2] Votre P.A avec une double porte Clock-10Dim 30 Juin 2019 - 8:38 par Quad Daniel

» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum
[PHPBB2] Votre P.A avec une double porte Clock-10Jeu 27 Juin 2019 - 15:50 par Milouze14

» Socrate et la maïeutique "histoire"
[PHPBB2] Votre P.A avec une double porte Clock-10Mer 26 Juin 2019 - 7:34 par Quad Daniel

» Coca-Cola (histoire)
[PHPBB2] Votre P.A avec une double porte Clock-10Lun 24 Juin 2019 - 9:33 par bildil62

[PHPBB2] Votre P.A avec une double porte

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mar 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 .

-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
[PHPBB2] Votre P.A avec une double porte Staff10



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








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


Dernière édition par Milouze14 le Jeu 25 Oct 2018 - 18:12, édité 17 fois
fleur78
fleur78
Milouzien

Messagefleur78 le Mar 12 Nov 2013 - 20:14

super A encore un truc super bien Merci Philippe
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 13 Nov 2013 - 3:28

coucou Alex et Thierry ,

pensez a héberger les images fournies clin oeil ,
fleur78
fleur78
Milouzien

Messagefleur78 le Mer 13 Nov 2013 - 7:15

Oups fait j'avais oublié
Teten85
Teten85
Milouzien

MessageTeten85 le Lun 18 Nov 2013 - 0:13

Merci Philippe hinhin 
Aenigma
Aenigma
Milouzien

MessageAenigma le Ven 22 Nov 2013 - 8:39

Fais donc voir ça Philippe, merci.
avatar
pierre31250
Milouzien

Messagepierre31250 le Sam 4 Jan 2014 - 12:15

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

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

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

Messagesafranite le Jeu 29 Mai 2014 - 21:06

merci
avatar
databar
Milouzien

Messagedatabar le Ven 22 Aoû 2014 - 8:30

merci
Anonymous
Invité
Invité

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

Merci :D
avatar
Rumbelle85
Milouzien

MessageRumbelle85 le Sam 23 Aoû 2014 - 16:43

cool ;)
Merci du partage ;)
avatar
ThunderTB
Milouzien

MessageThunderTB le Ven 5 Sep 2014 - 1:59

Merci
WyvernNE
WyvernNE
Milouzien

MessageWyvernNE le Lun 6 Oct 2014 - 15:19

Merci beaucoup !
Eczema Help
Eczema Help
Milouzien

MessageEczema Help le Dim 12 Oct 2014 - 19:30

Merci Milouze
Eczema Help
Eczema Help
Milouzien

MessageEczema Help le Sam 18 Oct 2014 - 13:50

Des images en stock ou a recommandé ?
patriciadpt30
patriciadpt30
Milouzien

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

je suis curieuse par nature :) merci
avatar
Gypsy Water.
Milouzien

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

curiosité, 101 Mercci. :heart:
1baptiste
1baptiste
Milouzien

Message1baptiste le Lun 2 Mar 2015 - 18:59

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

MessageMilouze14 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 clin oeil
{12°S}coco-lapin
{12°S}coco-lapin
Milouzien

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

Merci beaucoup !
1baptiste
1baptiste
Milouzien

Message1baptiste le 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 :)
Anonymous
Invité
Invité

MessageInvité le Ven 8 Mai 2015 - 10:44

Merci beaucoup !
Flaura
Flaura
Milouzien

MessageFlaura le Ven 8 Mai 2015 - 21:15

Merci beaucoup !
Graazi
Graazi
Milouzien

MessageGraazi le Ven 29 Mai 2015 - 14:48

Merci beaucoup !
mariok
mariok
Membre regretté

Messagemariok le Jeu 1 Oct 2015 - 21:59

Merci beaucoup !
Anonymous
Invité
Invité

MessageInvité le Ven 2 Oct 2015 - 15:32

Merci beaucoup !
mariok
mariok
Membre regretté

Messagemariok le Ven 2 Oct 2015 - 20:51

Merci beaucoup !
mariok
mariok
Membre regretté

Messagemariok le Ven 2 Oct 2015 - 20:52

Merci beaucoup !
avatar
Orphère
Milouzien

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

Merci beaucoup !
avatar
tastet.roger
Milouzien

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

Merci beaucoup !
avatar
benchris
Milouzien

Messagebenchris le Dim 4 Oct 2015 - 19:05

Merci beaucoup !
Grande013
Grande013
Milouzien

MessageGrande013 le Lun 5 Oct 2015 - 22:05

Merci beaucoup !
Ezio
Ezio
Milouzien

MessageEzio le Jeu 29 Oct 2015 - 20:22

Merci beaucoup !
damieng59
damieng59
Milouzien

Messagedamieng59 le Mer 11 Nov 2015 - 21:44

Merci beaucoup !

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum