[PHPBB2] Afficher son profil avec transitions

Milouze14 Lun 25 Mai 2015 - 19:31

,
l'astuce est assez vicieuse mais pour les adeptes de transitions sur leurs fofos, cette astuce vous plaira .

Le but est de masquer tout le contenu pendant quelques millisecondes et d'afficher progressivement tous les autres onglets .


Modules/HTML JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher sur toutes les pages.
Déposez ce script:

Code:


if(document.location.pathname=="/profile"||
document.location.pathname=="/search"||
document.location.pathname=="/rpg_sheet_edit" )

$(function(){
$('.three-col span.gen').each(function(){
$(this).html($(this).html().replace(/\|/, ''));
$(this).closest('table').attr('id','M14_Profil_Slide').nextAll().attr('id','M14_Cache');
$('#M14_Profil_Slide span.gen a.mainmenu').addClass('M14_Slide_Ong');
$('.three-col span.gen strong').attr('title','Afficher le contenu').css('cursor','pointer').each(function(){
$('#M14_Cache,#M14_Cache tr ,#M14_Cache tr td').animate({opacity:'1'},2000);
$(this).hide().delay(1000).attr('id','M14_Slide_Ong_Strong').attr('title','').fadeIn().unbind();
$('.M14_Slide_Ong').hide().delay(1600).fadeIn(800);
});
});
});




Pensez a cliquer sur le bouton  


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


Déposez ce style et agrémentez le comme bon vous semble en respectant certaines valeurs mentionnées

Code:


#M14_Cache ,#M14_Cache tr ,#M14_Cache tr td
{
-moz-opacity:0;
-khtml-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity:0;
}
/*Le bloc contenant les onglets*/
table#M14_Profil_Slide
{
height:35px;/*hauteur de la cellule*/
background: #9197A3;/*couleur de fond*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies a gauche et a droite*/
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
  /*Les transitions */
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


/*L onglet actif*/
table#M14_Profil_Slide .gen strong#M14_Slide_Ong_Strong
{
margin-top:-5px;/*on decale en negatif sur la hauteur suivant la hauteur de la cellule*/
float:left !important;/*on le positionne a gauche*/
margin-left:10px;/*on le decale de la gauche*/
color:orange;/*on donne une couleur de police*/
font-size:11px;/*on donne une taille de police*/
font-style:normal;/*on donne sun style normal*/
padding: 5px 8px;/*on donne un espace*/

}

/*Autres onglets*/
table#M14_Profil_Slide .gen a.mainmenu.M14_Slide_Ong
{
color:white;/*on donne une couleur de police*/
text-decoration:none !important;/*on supprime le soulignement*/
font-size:12px;/*on donne une taille de police*/
padding: 2px 4px;/*on donne un espace*/
top: 7px;/*on decale en negatif sur la hauteur suivant la hauteur de la cellule*/
position: relative;/*ne pas toucher*/

 /*Les transitions */
  -webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
/*Derniers onglets*/
table#M14_Profil_Slide .gen a.mainmenu.M14_Slide_Ong:last-child ,
table#M14_Profil_Slide .gen strong:last-child
{
margin-right:10px;/*on decale les derniers onglets de la droite*/
}






Pensez à valider les modifications en cliquant sur le bouton  

Invité Lun 25 Mai 2015 - 20:36

Merci beaucoup ! 

Keltah Mar 9 Juin 2015 - 12:36

Teten85 Ven 19 Juin 2015 - 0:29

ThunderTB Jeu 3 Sep 2015 - 18:39

mariok Jeu 3 Sep 2015 - 21:52

patriciadpt30 Dim 27 Sep 2015 - 14:29

Girly Jeu 19 Nov 2015 - 18:49

Invité Ven 4 Déc 2015 - 12:00

Mawie62 Sam 30 Jan 2016 - 16:26

Loba Mer 24 Fév 2016 - 5:27

Invité Jeu 25 Fév 2016 - 9:43

Invité Sam 5 Mar 2016 - 15:28

dragon594 Dim 27 Mar 2016 - 7:08

Invité Mar 12 Juil 2016 - 1:10

Queen G. Ven 4 Nov 2016 - 7:20

safranite Sam 4 Mar 2017 - 15:59

Ecleasya Sam 11 Mar 2017 - 13:41

Kaeyla Dim 16 Avr 2017 - 8:05

petit coq Ven 12 Mai 2017 - 18:22

Psychotic Bitch Mer 21 Fév 2018 - 11:48

kristhyane Sam 17 Mar 2018 - 16:53

fred9545 Mar 15 Jan 2019 - 19:01

Contenu sponsorisé