Avatar coulissant et affichage du rang
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Avatar coulissant et affichage du rang
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
Forum test : http://personofintetest.weshforum.com/
Forum : phpbb2
CSS modifié
Template index-box, topics_list_box, viewtopic_body : modifié
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
Re: Avatar coulissant et affichage du rang
Bonjour,
Sans le template concerné il est difficile de vous aider
Cordialement.
Sans le template concerné il est difficile de vous aider
Cordialement.
Re: Avatar coulissant et affichage du rang
Template concerné : viewtopic_body
Comme indiqué dans le tutoriel )
section template concerné
Code CSS
Merci
Comme indiqué dans le tutoriel )
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
Re: Avatar coulissant et affichage du rang
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
Cordialement.
Il faut donc rajouter la variable {postrow.displayed.POSTER_RANK} qui affiche le texte du rang
Cordialement.
Re: Avatar coulissant et affichage du rang
Merci, ceci résout mon problème
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum