Avatars ronds sur le profil, la toolbar et les mps | Phpbb2

[Mat]

Bonjour ,

Je voudrais avoir sur mon forum les avatars ronds, j'ai déjà placé un code pour les avoir ronds sur la page d'accueil et sur les catégories ^^


Mais je voudrais aussi les avoir sur les profils (profil simple), sur les mps et sur l'avatar dans la toolbar (voir capture) :


Merci d'avance et bonne année à tous !

[_Ayno]

Bonjour,

essayez d'ajouter le même code sur la balise :

Code:

#fa_usermenu img {
}

[Mat]

Merci
Ça fonctionne pour l'avatar du menu !
Plus que sur les profils (profil simple) et sur les mps !

[_Ayno]

Re,

voilà pour les mp normalement

Code:

.postprofile dt > a:first-child > img, .postprofile dt > img:first-child

[Mat]

Parfait merci ^^
Et ça donne quoi le CSS complet pour les mps ?
J'arrive pas à le faire fonctionner

[_Ayno]

Re,

Code:

.postprofile dt > a:first-child > img, .postprofile dt > img:first-child {
  border-radius: 100px; /*Coins arrondis*/
    object-fit: cover; /*non déformation de l'image*/
    width: 100px; /*redimensionnement pour uniformisation*/
    max-height: 100px; /*hauteur max*/
    border-style: solid; /*bord*/
    border-color: #FFFFFF; /*couleur du bord*/
    padding: 2px; /*écartement du bord à l'image*/
    border: 2px; /*taille du bord*/
  }

attention les coins arrondis doivent être lié par la même valeur pour faire un avatar rond

[Mat]

Merci, mais ça ne fonctionne pas ^^

[_Ayno]

c'est bien ce résultat là que vous cherchez?

[Mat]

Pas tout à fait, je veux juste avoir les avatars ronds sans cadre ^^
Donc juste un :

Code:

border-radius: 150px;

Mais je n'arrive pas à trouver l'ID des images !

[_Ayno]

Bonjour,
sur mon phpbb3 cette balise fonctionne parfaitement :

Code:

.postprofile dt > a:first-child > img, .postprofile dt > img:first-child {
 border-radius: 150px;
 width: 150px;
 height: 150px;
 object-fit: cover;
}


[Mat]

Ah oui, mais je ne suis pas sur PhpBB 3 !

[Mat]

Et un up

[_Ayno]

Re,

avec google chrome ou firefox; faites clique droit sur l'image dans le profil -> inspecter et voyez la balise utilisée.

[Mat]

Oui, mais ils n'ont pas d'ID

[_Ayno]

Re ,

sur ton phpbb2 une balise row1 existe, il suffirait donc de faire :

Code:

.row1 img { /* donc code */}

mais cette balise est certainement à 90% sûr utilisée ailleurs.

Autre solution ;

il faut se rendre dans template > Poster & Messages privés > affichage d'un message privé (en bas)

repérer la ligne {AVATAR_FROM}, entourer cette variable d'une balise
exemple :

Code:

<div class="avatarmp" {avatar_from} </div>

puis lui affecter les propriétés css souhaitées.

Je pense que cela fonctionne mais aucune certitude.

[Invité]

Hello Mat et_Ayno ,

pour les MPS ceci devrait fonctionner:

Code:


form[action^="/privmsg?folder"] img[alt="avatar"]
{
 border-radius: 150px;
 width: 150px;
 height: 150px;
}


_Ayno ,
Il faut prendre en compte que la variable n'est pas prise en compte dans la revue, donc comme la version phpbb2 nous aide bien grâce au alt de l'avatar, on ne va pas s'en priver .

Mat,


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.

Déposes ceci:

Code:


$(function(){
$('form[action^="/privmsg?folder"]').find(' img[alt="avatar"]').wrap('<div class="M14_avatar"></div>');
});


Penses à cliquer sur le bouton VALIDER

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:


div.M14_avatar{background-color:grey;}


Penses à cliquer sur le bouton


Et voilou, il ne reste plus que les réglages a mettre en œuvre .

a++

[Mat]

Bonsoir
Ça marche merci
Et pour les profils (profil simple) je n'y arrive pas 
Et je n'ai pas besoin de fond gris.
Merci d'avance

[Invité]

Hello Mat,
tu peux ajouter juste après le script donné celui-ci:

Code:


if(/^\/u/.test(location.pathname))
{
$(function(){
$(' img[alt="avatar"]').wrap('<div class="M14_avatar"></div>');
});
}


Ce qui donne:

Code:

 
$(function(){
$('form[action^="/privmsg?folder"]').find(' img[alt="avatar"]').wrap('<div class="M14_avatar"></div>');
});
if(/^\/u/.test(location.pathname))
{
$(function(){
$(' img[alt="avatar"]').wrap('<div class="M14_avatar"></div>');
});
}



a++

[Mat]

Bonjour
Merci, mais ça ne fonctionne pas  :
https://www.fidjix.com/u1

[Invité]

Re Mat,

le code source montre le contraire:

Modifie le style ainsi:

Code:


div.M14_avatar img
{
 border-radius: 150px;
}


a++

[Mat]

Merci, ça fonctionne !

Bonne soirée !