| | [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
| | Sujet: [PHPBB2] Votre P.A avec une double porte Mar 12 Nov 2013 - 20:03 | |
| Rappel du premier message : , 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 | |
|
| | |
