Avatar coulissant et affichage du rang

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

Résolu Avatar coulissant et affichage du rang

Message par Outis le Sam 6 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 7 Sep 2014 - 21:14, édité 1 fois

Outis
*****

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

http://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 le Dim 7 Sep 2014 - 13:01

up

Outis
*****

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

http://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 le Dim 7 Sep 2014 - 14:23

Bonjour,

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

Cordialement.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

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

http://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 le Dim 7 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
*****

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

http://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 le Dim 7 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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

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

http://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 le Dim 7 Sep 2014 - 21:14

Merci, ceci résout mon problème thumright

Outis
*****

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

http://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