Avatar caché

[aurélie62]

Bonjour, pour être la plus claire possible je cherche à reproduire exactement la même chose pour mes avatars, dont voici l'exemple ici, j'adore le concept où l'on voit que l'avatar et que quand on passe dessus on voit les infos, merci  

[néco]

salut
essaie de voir si ce topic correspond à ce que tu demandes ^^

https://forum.forumactif.com/t334651-avatar-en-accordeon?highlight=Kit+Avatar+signature

ou celui-là peut-être https://forum.forumactif.com/t339094-info-de-profil-cache-derriere-l-avatar?highlight=info+%2Bprofil+%2Bavatar

en espérant que ça t'aidera ^^

bizzz

[aurélie62]

Alors merci j'ai essayé avec le premier topic, ça marche mais j'aimerais que le prénom ne soit pas souligné, et j'aimerais encore voir nos statuts et mes rangs comme admin par exemple à la place des étoiles, voilà mon forum icipour que tu vois

Ensuite, je voudrais que quand je survolle ça fait comme le forum que j'ai donné en premier post, j'aimerais vraiment la même chose, avec par exemple Fondatrice dans le cadre lui-même et non au dessus seul

[néco]

désolé , je ne m'y connais pas pour t'aider , j'ai juste fais une recherche dans la case de recherche de ce forum , c'est tout ! ^^

bizzz et bon courage

[aurélie62]

Ah d'accord mais tu m'as aidé quand même t'inquiète, j'attend d'autre réponses alors

[aurélie62]

Un petit up

[FANCH 56]

Bonjour

J'ai mis en place ceci hier grace à AenigmA. A mettre dans ton CSS

Peut-être cela marchera sous phpbb2. A toi de changer les codes couleur et l'image de fond.

Code:

      /* PANNEAU DU PROFIL MESSAGES  */
        
       .postprofile-details {
            background-color: #808080;
            background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/f215.jpg");
            border: 1px solid #808080;
            border-radius: 12px;
            margin: 10px auto auto;
            padding: 3px;
            text-align: center;
            width: 186px;
            height:210px;
            overflow:hidden;
        }
        .postprofile-details:hover {
            background-color: #808080;
            background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/f215.jpg");
            border: 1px solid #808080;
            border-radius: 12px;
            margin: 10px auto auto;
            padding: 3px;
            text-align: center;
            width: 186px;
            height: 100%;
            overflow:visible;
        }

[aurélie62]

Je viens d'essayer sur mon forum test ce n'est pas du tout ce que je recherche, je recherche vraiment le même effet que celui-ci, sur mon forum j'ai déjà réussi à placer le profil sous l'avatar mais je cherche encore la solution pour la bascule de l'avatar mais surtout à remettre mes rangs et groupes et ne pas avoir le pseudo surligné

Pour le moment j'ai du modifier les pseudos mais j'aimerais vraiment récupérer mes statuts, modos, traducteurs ect...

[Maxmax]

Salut,

Pour le statut à la place des étoiles, essaie de remplacer :

Code:

{postrow.displayed.RANK_IMAGE}

Par :

Code:

{postrow.displayed.POSTER_RANK}

[aurélie62]

Ahhhh mille merci bon par contre j'aime pas du tout la police, je dois modifier où?

[Maxmax]

Tu veux changer l'image ?

[aurélie62]

Oui car déjà mon forum n'est pas un forum de chats   mais là le texte sur mon forum me convient, je veux juste changer la taille et la bascule de l'avatar

[Maxmax]

Pourrais-tu mettre ton CSS stp ?

[aurélie62]

Code:

.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin: 0 1px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #252626;
  box-shadow: 0 0 6px #000;
  position: relative;
 
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.avatar_mess:hover
{
  margin-left: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
 
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: white;
  color: #c5bea0;
  font-size: 12px;
  filter: alpha(opacity=0);
  opacity: 0;
 
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.profil_mess:hover
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.pseudo_mess
{
  display: block;
  width: 190px;
  margin: -10px auto 0;
  text-align: center;
  font: bold 16px "Courier New", Courier, monospace;
  background: #545252;
  padding-top: 5px;
  border: 3px solid #371e1a;
  text-shadow: 0 0 3px #c5bea0;
  box-shadow: 0 0 3px #000;
}

[Maxmax]

Essaie en remplaçant ton CSS actuel par celui-ci :

Code:

.avatar_mess
{
  display: block;
  width: 200px;
  height: 320px;
  margin: 0 1px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #252626;
  box-shadow: 0 0 6px #000;
  position: relative;
}

.avatar_mess > img
{
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: absolute;
  z-index: 1;
}
 
.avatar_mess:hover > img
{
  margin-top: 320px
}

.avatar_mess:hover > .profil_mess
{
  opacity: 1;
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: white;
  color: #c5bea0;
  font-size: 12px;
  opacity: 0;
 
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  z-index: 0;
}
 
.profil_mess:hover
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.pseudo_mess
{
  display: block;
  width: 190px;
  margin: -10px auto 0;
  text-align: center;
  font: bold 16px "Courier New", Courier, monospace;
  background: #545252;
  padding-top: 5px;
  border: 3px solid #371e1a;
  text-shadow: 0 0 3px #c5bea0;
  box-shadow: 0 0 3px #000;
}

[aurélie62]

Pour la taille c'est bon merci. Plus que 1 dernière chose et c'est bon, comment mettre l'image https://2img.net/r/hpimg4/pics/282861rang2chaussettecouronne.png dans le profil? Je m'explique, j'aimerais que mes rangs soit intégrés dans le fond du profil comme ce forum de chats, je vois qu'elle as mis une image transparente, mais quand j'en met une, elle se met au-dessus du profil et moi j'aimerais comme ce forum dans le profil

Edit : je viens de m'apercevoir que le pseudo est toujours surligné, j'aimerais le retirer svp

[Maxmax]

Pour ce qui est du surlignage du pseudo cherche dans ton CSS cette ligne et supprime la :

Code:

text-shadow: 0 0 3px #c5bea0;

Pour ce qui est du rang, va dans ton template viewtopic_body et cherche la ligne

Code:

<span class="rang_mess">{postrow.displayed.POSTER_RANK}</span>

Tu vas la déplacer après la ligne :

Code:

<span class="avatar_mess"><span class="profil_mess"><!-- BEGIN profile_field -->

Ce qui va te donner :

Code:

<span class="avatar_mess"><span class="profil_mess"><!-- BEGIN profile_field -->
<span class="rang_mess">{postrow.displayed.POSTER_RANK}</span>

[aurélie62]

Pour le surlignage du pseudo, J'ai retiré la ligne mais elle est toujours là!

Alors je viens de tout mettre en place, ça marche mais du coup, on ne voit plus le rang, je comprend pas, les rangs sur le forum du chat sont bien dans le profil mais pas caché, c'est ce que je souhaite reproduire.

Regarde sur mon forum test

[Maxmax]

Ah j'avais mal compris pour le rang, c'est ma faute :/ J'espère que cette fois ça sera bon
Donc refais le changement de position du rang.
Ensuite met ceci à la place de ton CSS actuel :

Code:

.avatar_mess
{
  background:#fff!important;
  display: block;
  width: 200px;
  height: 345px;
  margin: 0 1px;
  overflow: hidden;
  background: #031128;
  border: 5px solid #252626;
  box-shadow: 0 0 6px #000;
  position: relative;
}
 
.avatar_mess > img
{
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: absolute;
  z-index: 1;
  top: 25px;
}
 
.avatar_mess:hover > img
{
  margin-top: 320px
}
 
.avatar_mess:hover > .profil_mess
{
  opacity: 1;
}
 
.profil_mess
{
  position: absolute;
  display: block;
  left: 0; right: 0; top: 25px; bottom: 0;
  padding: 5px;
  overflow: auto;
  background: white;
  color: #c5bea0;
  font-size: 12px;
 
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  z-index: 0;
}
 
.profil_mess:hover
{
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
 
.pseudo_mess
{
  display: block;
  width: 190px;
  margin: -10px auto 0;
  text-align: center;
  font: bold 16px "Courier New", Courier, monospace;
  background: #545252;
  padding-top: 5px;
  border: 3px solid #371e1a;
  text-shadow: 0 0 3px #c5bea0;
  box-shadow: 0 0 3px #000;
}

Pour ce qui est du surlignage, tu parles bien de l'halo doré qu'on peut voir sur cette image ?

[aurélie62]

Non ça marche pas regarde

Pour le pseudo c'est le trait qui surligne que je souhaite retirer

[Maxmax]

J'étais partis sur ce forum comme base de travail. Je vais donc revoir avec le nouveau que tu m'as donné.

[aurélie62]

Ah oui ça c'est mon forum, le forum harry potter c'est mon forum test

[Maxmax]

Et si tu appliques les modifications directement sur ton forum ça donne quoi ?
Parce que la structure n'est pas tout à fait la même, donc le code non plus

[aurélie62]

Ca donne ça sur mon vrai forum



Je pense que je pourrais remettre le code avec la phrase à changer mais par contre je ne vois plus l'avatar, la bascule à disparu

[Maxmax]

Etrange je viens de réessayer avec le code que je t'ai fourni et ça fonctionne chez moi 
Pourrais-tu remettre le code et le laisser le temps que je vois ça stp ?

[aurélie62]

Tu peux aller voir c'est bon

[Maxmax]

Ça fonctionne chez moi, essaie de vider le cache de ton navigateur.

[aurélie62]

Fait ça ne marche pas

[Maxmax]

Tu as remis l'ancien code ?

[aurélie62]

Ah oui tu as besoin de revoir, je te le remet, tu me diras quand je pourrais changer