Avatar en "bulle" dans le profil.

[Renald]

Détails techniques

Version du forum : Inconnue
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://t-c-d.forumactif.com/

Description du problème

Bonjour à tous,

Je suis en pleine création d'un nouveau forum pour mon club de triathlon et je souhaiterai faire apparaître les avatar en bulle comme ici.
J'aimerai que cela apparaisse dans le profil à la droite des messages.

Je viens de passer le forum en version phpbb3 mais je peux le changer s'il faut ce n'est pas un problème.

Merci d'avance pour votre aide.

[Ange Tuteur]

Bonsoir Renald,

Ajoutez les codes CSS suivant dans votre feuille de style.
PA > Affichage > Couleurs > Feuille de style CSS

Code:

#main-content > .post .postprofile dt img, .lastpost-avatar {
  background:#FFF;
  height:100px;
  width:100px;
  border-radius:100px;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.1);
  padding:3px;
}

.lastpost-avatar, .lastpost-avatar img {
  height:34px;
  width:34px;
}

( pour version phpbb3 )

Bonne soirée

[Renald]

Bonsoir j'ai l'impression que cela déforme légèrement l'image contrairement à ici:
Mon avatar:


Mon avatar en bulle:


Remarque cela m'affine lol ^^

[Ange Tuteur]

Re,

Essayez le code CSS suivant :

Code:

#main-content > .post .postprofile dt > a, .lastpost-avatar {
  background:#FFF;
  height:100px;
  width:100px;
  display:inline-block;
  overflow:hidden;
  border-radius:100px;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.1);
  border:3px solid #FFF;
  position:relative;
}
 
#main-content > .post .postprofile dt img, .lastpost-avatar img {
  border-radius:100px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.lastpost-avatar {
  height:34px;
  width:34px;
  border:1px solid #FFF;
}

[Renald]

Merci beaucoup cela fonctionne!!!!

[Lixyr]

Bonjour,

Le sujet a été replacé à la demande de l'auteur.

[Renald]

Bonjour,

Merci Lixyr, effectivement j'ai parlé trop rapidement et il y a quelques ajustements à faire ^^

Voila ce que cela donne sur le forum:


Alors que les avatars d'origines sont:



On remarque donc un arrondie blanc en haut à gauche du cercle.
De plus, ici sur le forum des forums, l'avatar semble un peu réduit pour entrer dans le cercle, ce qui ne semble pas être le cas avec le code fournit.

Merci d'avance pour votre aide.

[Renald]

C'est bon solution trouvée

Voici le code à ajouter dans le css:

Code:

.postprofile {
    border: 1px solid #DDD;
    border-radius: 3px;
    padding: 60px 3px 3px;
    text-align: center;
    border-color: #fff;
    border-left-style: solid;
    border-left-width: 1px;
    color: #555;
    display: inline;
    float: right;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}

#main-content > div.post .postprofile dt img, #userAvatar img, .avatar img, .lastpost-avatar img, .mod-login-avatar dt > img, td.avatar-mini img {
    border-radius: 100px;
    object-fit: cover;
    width: 100px;
}

.cadre_avatar {
    border: 3px solid #fff;
    border-radius: 100px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3);
    height: 100px;
    margin: auto;
    overflow: hidden;
    width: 100px;
}

Dans les templates une petite modif également:
Général > Viewtopic_body
Trouver la ligne:

Code:

{postrow.displayed.POSTER_AVATAR}

(ligne 227 s'il n'y a pas eu d'autres modifs avant)
et la remplacer par:

Code:

<div class="cadre_avatar">
   {postrow.displayed.POSTER_AVATAR}
</div>

Et le tour est joué

[JessicaBntps]

C'est bon solution trouvée

Voici le code à ajouter dans le css:

Code:

.postprofile {
    border: 1px solid #DDD;
    border-radius: 3px;
    padding: 60px 3px 3px;
    text-align: center;
    border-color: #fff;
    border-left-style: solid;
    border-left-width: 1px;
    color: #555;
    display: inline;
    float: right;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}

#main-content > div.post .postprofile dt img, #userAvatar img, .avatar img, .lastpost-avatar img, .mod-login-avatar dt > img, td.avatar-mini img {
    border-radius: 100px;
    object-fit: cover;
    width: 100px;
}

.cadre_avatar {
    border: 3px solid #fff;
    border-radius: 100px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3);
    height: 100px;
    margin: auto;
    overflow: hidden;
    width: 100px;
}

Dans les templates une petite modif également:
Général > Viewtopic_body
Trouver la ligne:

Code:

{postrow.displayed.POSTER_AVATAR}

(ligne 227 s'il n'y a pas eu d'autres modifs avant)
et la remplacer par:

Code:

<div class="cadre_avatar">
   {postrow.displayed.POSTER_AVATAR}
</div>

Et le tour est joué

Bonjour,

J'ai essayé la même chose sur mon forum. Voila ce que ça donne:

Spoiler:

[Renald]

Cela vient peut-être du fait que votre forum est en phpbb2 et le mien en phpbb3.

Pouvez-vous remettre la modif en place pour que je regarde votre code?

[JessicaBntps]

Ah oui, j'avais pas fait attention. Je pensais que vous étiez en phpbb2.