Avatar coulissant et affichage du rang

2 participants

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

Résolu Avatar coulissant et affichage du rang

Message par Outis Sam 06 Sep 2014, 10:55

Bonjour,

J'ai jouté le code qui permet de masquer les infos de profil jusqu'à ce que l'on passe la souris dessus, suivant ce tuto.

Mais je ne vois pas les rangs de chaque membre même en passant la souris sur l'avatar.

Je voudrai, si possible, que cela soit visible sous l'avatar et toujours visible
soit dans le même cadre que le pseudo, soit dans un nouveau cadre plus bas.

Merci

Exemple en image:

Forum test : http://personofintetest.weshforum.com/
Forum : phpbb2
CSS modifié
Template index-box, topics_list_box, viewtopic_body : modifié


Dernière édition par Outis le Dim 07 Sep 2014, 21:14, édité 1 fois
Outis

Outis
*****

Messages : 676
Inscrit(e) le : 28/07/2012

https://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant et affichage du rang

Message par Outis Dim 07 Sep 2014, 13:01

up
Outis

Outis
*****

Messages : 676
Inscrit(e) le : 28/07/2012

https://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant et affichage du rang

Message par Tech Dim 07 Sep 2014, 14:23

Bonjour,

Sans le template concerné il est difficile de vous aider Smile

Cordialement.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant et affichage du rang

Message par Outis Dim 07 Sep 2014, 15:04

Template concerné : viewtopic_body

Comme indiqué dans le tutoriel Wink )


section template concerné
Code:
        <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             
                          <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
                       
                          <span class="avatar_mess"><span class="profil_mess"><!-- 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>
                            {postrow.displayed.POSTER_AVATAR}</span>
                       
                          <span class="pseudo_mess">{postrow.displayed.POSTER_NAME}</span>               
                     
              </td>

Code CSS
Code:
/* Avatar accordéon */
        .avatar_mess
        {
          display: block;
          width: 150px;
          height: 200px;
          margin-left: -5px;
          margin-right: 5px;
          overflow: hidden;
          background: #222222;
          border: 3px solid #000000;
          transform: rotate(-5deg);
          -moz-transform: rotate(-5deg);
          -o-transform: rotate(-5deg);
          -ms-transform: rotate(-5deg);
          -htm-transform: rotate(-5deg);
          -webkit-transform: rotate(-5deg);
          box-shadow: 0px 0px 6px #000000;
          -moz-box-shadow: 0px 0px 6px #000000;
          -o-box-shadow: 0px 0px 6px #000000;
          -htm-box-shadow: 0px 0px 6px #000000;
          -webkit-box-shadow: 0px 0px 6px #000000;
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .avatar_mess:hover
        {
          margin-left: 5px;
          transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -htm-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .profil_mess
        {
          position: absolute;
          display: block;
          width: 140px;
          height: 190px;
          margin: auto;
          padding: 5px;
          overflow: auto;
          background: #222222;
          color: #ffffff;
          font-size: 11px;
          opacity: 0;
          -moz-opacity: 0;
          -khtml-opacity: 0;
          filter: alpha(opacity=0);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .profil_mess:hover
        {
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .pseudo_mess
        {
          display: block;
          position: relative;
          z-index: 2;
          width: 140px;
          margin-top: -15px;
          margin-left: 10px;
          text-align: center;
          font-size: 18px;
          font-family: courier;
          font-weight: bold;
          text-shadow: 0px 0px 0px;
          background: ##222222;
          padding-top: 5px;
          border-left: 1px solid #000000;
          border-right: 1px solid #000000;
          border-top: 1px solid #000000;
          border-bottom: 1px solid #000000;
          box-shadow: 0px 0px 3px #000000;
          -moz-box-shadow: 0px 0px 3px #000000;
          -o-box-shadow: 0px 0px 3px #000000;
          -htm-box-shadow: 0px 0px 3px #000000;
          -webkit-box-shadow: 0px 0px 3px #000000;
        }

Merci thumright
Outis

Outis
*****

Messages : 676
Inscrit(e) le : 28/07/2012

https://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant et affichage du rang

Message par Tech Dim 07 Sep 2014, 17:39

Vous n'avez que la variable {postrow.displayed.RANK_IMAGE} qui représente l'image du rang or il semblerait que vous n'ayez pas d'image pour vos rangs.

Il faut donc rajouter la variable {postrow.displayed.POSTER_RANK} qui affiche le texte du rang Wink

Cordialement.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant et affichage du rang

Message par Outis Dim 07 Sep 2014, 21:14

Merci, ceci résout mon problème thumright
Outis

Outis
*****

Messages : 676
Inscrit(e) le : 28/07/2012

https://personofinterest.fra.co
Outis a été remercié(e) par l'auteur de ce sujet.

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


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