Avatar en "bulle" dans le profil.

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

Résolu Avatar en "bulle" dans le profil.

Message par Renald le Jeu 28 Jan 2016 - 19:02

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.


Dernière édition par Renald le Lun 1 Fév 2016 - 18:29, édité 5 fois

Renald
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Ange Tuteur le Jeu 28 Jan 2016 - 19:14

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 ::fleur::

Ange Tuteur
****

Masculin
Messages : 477
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Renald le Jeu 28 Jan 2016 - 19:41

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 ^^

Renald
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Ange Tuteur le Sam 30 Jan 2016 - 22:32

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;
}

Ange Tuteur
****

Masculin
Messages : 477
Inscrit(e) le : 16/11/2013

https://github.com/SethClydesdale
Ange Tuteur a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Renald le Sam 30 Jan 2016 - 23:42

Merci beaucoup cela fonctionne!!!!

Renald
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Lixyr le Dim 31 Jan 2016 - 13:48

Bonjour,

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Renald le Dim 31 Jan 2016 - 15:51

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
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Renald le Lun 1 Fév 2016 - 14:39

C'est bon solution trouvée Wink

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é Wink

Renald
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par JessicaBntps le Lun 1 Fév 2016 - 17:11

@Renald a écrit:C'est bon solution trouvée Wink

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é Wink

Bonjour,

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

JessicaBntps
Nouveau membre

Messages : 12
Inscrit(e) le : 29/12/2015

http://lilianrenaud.forum-officiel.fr
JessicaBntps a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par Renald le Lun 1 Fév 2016 - 17:21

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?

Renald
*****

Masculin
Messages : 627
Inscrit(e) le : 27/04/2006

http://t-c-d.forumactif.com
Renald a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en "bulle" dans le profil.

Message par JessicaBntps le Lun 1 Fév 2016 - 18:09

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


JessicaBntps
Nouveau membre

Messages : 12
Inscrit(e) le : 29/12/2015

http://lilianrenaud.forum-officiel.fr
JessicaBntps 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