AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

    Profil en hover avec perspective

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Dim 20 Sep 2015 - 16:01

    Rappel du premier message :

    Profil en hover avec perspective





    Hello all ! Bon bah voilà, encore un profil, avec une petite transition cool et les infos à l'intérieur sur des petites bandes... bref.

       
    PHPBB2 - Template et CSS - taille de l'avatar adaptable - Aperçu - Aperçu à l'ouverture



    Et un autre aperçu, pour la transition...





    Template


    Ok, dans le panneau d'admin > affichage > templates > général > viewtopic-body, cherchez ceci (vers la ligne 139)
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
     <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
     <span class="postdetails poster-profile">
     {postrow.displayed.POSTER_RANK}<br />
     {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
     <!-- BEGIN profile_field -->
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
     <!-- END profile_field -->
     {postrow.displayed.POSTER_RPG}
     </span><br />
     <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
     </td>

    Supprimez, et remplacez par ça :
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150" style="position:relative;display:block; min-height:320px;">
      <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
      <div class="profil">
            <div class="infos">
              {postrow.displayed.POSTER_AVATAR}
              <div>
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} <span class="infosrep">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
              </div>
            </div>
            <div class="avatarflip">
              <div style="backface-visibility:hidden;">{postrow.displayed.POSTER_AVATAR}</div>
              <div>{postrow.displayed.RANK_IMAGE}</div>
            </div>
      </div>
    </td>


    Là, sur la première ligne vous trouverez ça:
    Code:
    min-height:320px;
    Vous pouvez adapter cette hauteur en fonction de la hauteur des avatars de votre forum; il s'agit de la hauteur minimum d'un message (si le message est plus petit que l'avatar, les avatars des différents messages vont se chevaucher, ce qui serait fâcheux...)



    CSS

    Ensuite validez, publiez le template, puis rendez vous dans affichage > couleurs > feuille de style CSS, et ajoutez ceci à votre code:

    Code:

    /*PROFIL par Alu pour NEVER-UTOPIA **********************************/
    .profil{
      width:180px;/*largeur avatar*/
      height:288px;/*hauteur avatar*/
      -moz-perspective:800px;
      -webkit-perspective:800px;
      -moz-perspective-origin:50px 150px;
      -webkit-perspective-origin:50px 150px;
      perspective-origin:50px 150px;
      perspective:800px;
      position:absolute;
      top:30px;
      left:-100px;
      z-index:2;
      -moz-transform: rotate(-5deg);/*avatar penché*/
      -ms-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }
    .profil img{width:100%;}
    .avatarflip{
      width:100%;
      height:auto;
      -webkit-transform-origin:top left;
      transform-origin:top left;
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      transform:rotateY(0deg);
      -ms-transition:all 1s ease;
      transition:all 1s ease;
      -moz-transform-style:preserve-3d;
      -webkit-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
      transform-style:preserve-3d;
    }

    .avatarflip div{position:absolute; width:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden;overflow:hidden;}
    .avatarflip div:last-child{
      -ms-transform:rotateY(-180deg);
      -moz-transform:rotateY(-180deg);
      -webkit-transform:rotateY(-180deg);
      transform:rotateY(-180deg);
    }
    .profil:hover .avatarflip{
      -ms-transform:rotateY(-180deg);
      -moz-transform:rotateY(-180deg);
      -webkit-transform:rotateY(-180deg);
      transform:rotateY(-180deg);
      -ms-transform-origin:left top;
      -webkit-transform-origin:left top;
      transform-origin:left top;}

    .infos{
      position:absolute;
      width:100%;
      text-align:center;
      font-size:0.8vw;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3); /*ombre sous le profil*/
    }
    .infos div{position:absolute;top:0;left:0;width:100%; height:100%;overflow:hidden;}
    .infos .label{visibility:hidden;}
    .infos .label span, .infosrep {
      visibility:visible;
      display:block;
      background-color:rgba(256, 256, 256, 0.4);/*couleur des bandes des infos, le 0.4 correspond à lopacité*/
      color:#303030 !important;/*couleur du texte dans les infos*/
      margin: -5px 0 0 0;
      padding:3px;
    }
    .infos .label span {text-decoration:underline; text-transform:uppercase;margin: 5px 0 -5px 0;}
    .infosrep img{width:auto;}


    A priori vous ne devriez pas avoir besoin de modifier autre chose que les lignes commentées... Enregistrez, et tout devrait fonctionner !


    Merci de laisser un crédit à N-U quelque part sur votre forum !

    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Alumine le Lun 21 Sep 2015 - 21:18, édité 1 fois



    Alumine
    Mephitiques
    Mephitiques
    MasculinAge : 24Messages : 29

    Mar 18 Juil 2017 - 18:46

    merci
    Sigril
    Sigril
    MasculinAge : 25Messages : 13

    Ven 28 Juil 2017 - 2:04

    merci
    Daph
    Daph
    FémininAge : 30Messages : 67

    Lun 31 Juil 2017 - 2:14

    Merci pour le partage :)



    Suncy
    Suncy
    FémininAge : 23Messages : 12

    Ven 4 Aoû 2017 - 13:47

    Magnifique ! merci
    JemAedan
    JemAedan
    FémininAge : 37Messages : 28

    Sam 5 Aoû 2017 - 18:01

    Merci du partage *-*
    Mattyew
    Mattyew
    MasculinAge : 30Messages : 90

    Jeu 17 Aoû 2017 - 13:52

    Merci du partage Very Happy
    DarkWrestler.
    DarkWrestler.
    MasculinAge : 29Messages : 36

    Mer 23 Aoû 2017 - 11:56

    Merci
    Ahina
    Ahina
    FémininAge : 42Messages : 73

    Sam 26 Aoû 2017 - 11:31

    merci beaucoup :)
    Noruenu
    Noruenu
    FémininAge : 31Messages : 123

    Ven 29 Sep 2017 - 15:11

    Merci ! :B
    Titou2302
    Titou2302
    MasculinAge : 21Messages : 95

    Ven 29 Sep 2017 - 20:53

    Merci^^

    benficagirl
    benficagirl
    FémininAge : 37Messages : 448

    Mar 31 Oct 2017 - 21:04

    J'adore Very Happy
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Sam 11 Nov 2017 - 14:19

    thanks Very Happy
    Novatrix
    Novatrix
    FémininAge : 30Messages : 30

    Mar 9 Jan 2018 - 15:49

    merci ♥
    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Sam 28 Mar 2020 - 0:39

    merci très joli Ls ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:36