Icons avatars écrasés (CB et catégories)

2 participants

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

Résolu Icons avatars écrasés (CB et catégories)

Message par Dellou Jeu 8 Juil 2021 - 20:06

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://aurumregis.forumactif.com/

Description du problème

Bonjour forumactif !
Voilà il se trouve que sur notre forum, les icons dans la chatbox (comme dans le screen) sont écrasés (les avatars font 250x350px) comme dans les catégories ( https://i.imgur.com/lkjYcgX.jpg )
j'ai essayé de remédier à ça, mais je n'arrive pas à rien... je n'arrive pas à y toucher comme je voudrais... j'aimerai un rendu non écrasé, comme l'icon qu'on voit avant la connexion dans la CB ( https://i.imgur.com/zJsToVx.jpg ) y a-t-il une solution ?

Merci à vous !
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Sam 10 Juil 2021 - 11:32

up
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Dim 11 Juil 2021 - 21:20

up!
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Mar 13 Juil 2021 - 0:57

up
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Lixyr Mer 14 Juil 2021 - 20:28

Bonjour,

Il est normal que les images apparaissent écrasées, car elles sont affichées sous forme de rond. Or, leur forme d'origine est rectangulaire.

Pour l'affichage des avatars dans les catégories, on pourrait modifier ça pour que ça s'affiche mieux, par contre pour la chat-box, il me faudrait un accès invité, ou un compte invité sur votre forum, pour que je puisse me connecter à votre chat-box et regarder.

Like a Star @ heaven Les catégories

Pour les catégories, je vous propose ces codes, qui fonctionnent sur votre forum :

A mettre dans la CSS : panneau d'administration >> Affichage >> Couleurs >> Feuille de style CSS

Code:
.lastpost span.lastpost-avatar {
    border: 3px solid #efefef;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    float: none !important;
}

Code:
.lastpost-avatar img {
    background: none !important;
    border-radius: 0;
    width: 50px;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    position: relative !important;
    top: -50% !important;
}

Concrètement, j'ai transféré l'apparence des images sur le span qui les contient, et je lui ai donné quelques petites attributs pour qu'il s'affiche exactement comme et au même emplacement que vos images avant la modification du code.
Pour que le tout soit joli, j'ai demandé aux images de se placer au milieu des span, car certains avatar ont leur personnage vers le bas.

Après, il faudrait voir si vous pouvez également appliquer ce code à la chat-box.


Comme ce sont les classes génériques au format PhpBB2, ce code fonctionne normalement pour tous les avatars ayant le même problème mais dont le template index_box, et surtout les classes, n'ont pas été modifiés.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Icons avatars écrasés (CB et catégories) 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Icons avatars écrasés (CB et catégories) 3592387030 pour prévenir la modération.

Icons avatars écrasés (CB et catégories) Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Jeu 15 Juil 2021 - 3:00

Bonjour !
Merci énormément pour vos explications !
Malheureusement, le code n'a pas fonctionné chez-moi, mais avec votre aide, j'ai réussi a avoir ce que je souhaitais pour les catégories ! J'ai plutôt fait comme ceci :

Code:
.lastpost span.lastpost-avatar {
    border: 5px solid #efefef;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
  float: none !important;}

.lastpost-avatar img {background: #efefef;
    border: solid 5px #efefef;
    border-radius: 100%;
    height: 70px;
    margin-left: -9px;
    margin-top: -14px;
    overflow: hidden;
    padding: 0;
    width: 60px;
}

Je ne sais pas si c'est très juste, mais ça fonctionne  Icons avatars écrasés (CB et catégories) 1f605

[...] par contre pour la chat-box, il me faudrait un accès invité, ou un compte invité sur votre forum, pour que je puisse me connecter à votre chat-box et regarder.

Vu que nos inscriptions sont fermées, je vous ai créée un compte invité !
Le voici (en hide)



Merci énormément pour votre aide et pour votre temps ! Icons avatars écrasés (CB et catégories) 263a

En vous souhaitant une belle journée ! Icons avatars écrasés (CB et catégories) 263a
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Jeu 15 Juil 2021 - 5:04

finalement je retire ce que j'ai dit, ça fonctionne mais du coup ça décale tous les avatars dans la liste des sujets Icons avatars écrasés (CB et catégories) 1f62d

je verrai ça demain mais urg
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Lixyr Jeu 15 Juil 2021 - 14:14

Bonjour,

Oui, vous pouvez mettre un margin sur les images si vous préférez. Mais du coup il faut enlever la position: absolute mise sur le span, qui ne sert plus à rien.
Par contre, normalement vous n'êtes pas censée mettre de overflow: hidden sur les images, car ce n'est pas fait pour. Du coup je l'ai enlevé.

Pour votre problème d'image modifiée dans la liste des sujets, je vous mets la solution ici :

Code:
ul.topiclist.forums .lastpost span.lastpost-avatar {
    border: 5px solid #efefef;
    border-radius: 100%;
    height: 50px;
    overflow: hidden;
    padding: 0;
    width: 50px;
}

Code:
ul.topiclist.forums .lastpost-avatar img {
    height: 70px;
    margin-left: -9px;
    margin-top: -14px;
    padding: 0;
    width: 60px;
    border-radius: 100%;
}

Vous avez utilisé le même code pour les catégories et les sujets, du coup, si on ne précise pas exactement ce qu'on veut changer, ça change tous les avatars concernés par ce même code. Pour éviter ça, j'ai simplement rajouté ceci : ul.topiclist.forums
Ça permet de pointer uniquement le code concernant la liste des forums.



Pour faciliter les recherches, mettez un titre explicite.
Remerciez Icons avatars écrasés (CB et catégories) 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Icons avatars écrasés (CB et catégories) 3592387030 pour prévenir la modération.

Icons avatars écrasés (CB et catégories) Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Jeu 15 Juil 2021 - 15:47

Bonjour !
Merci encore de votre patience!

Alors si, overflow hidden et la position absolute sont essentielles, car sinon, je me retrouve avec ceci :
https://i.imgur.com/t0HcsSB.jpg Icons avatars écrasés (CB et catégories) 1f623

J'ai mis votre code, mais malheureusement, ça ne fonctionne pas ! Je l'ai mis tout à la fin de mon css pour être sûre que ça n'interférais pas avec un autre css (même s'il n'y avait pas de raison de ce que je voyais dans mon css) mais rien à faire Icons avatars écrasés (CB et catégories) 1f623
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Jeu 15 Juil 2021 - 17:09

Re-bonjour,
j'ai un peu "salement" régler le problème des profils en touchant directement dans les templates !

du coup, il ne reste comme soucis que les icons de la chatbox Icons avatars écrasés (CB et catégories) 1f60a
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Ven 16 Juil 2021 - 15:09

up !
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Lixyr Ven 16 Juil 2021 - 18:01

Oui, il fallait remplacer les codes, pas les mettre à la fin, sinon ça fait interférence.

Je suis connectée sur la chatbox, et je ne vois pas de soucis. Quel navigateur utilisez-vous ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Icons avatars écrasés (CB et catégories) 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Icons avatars écrasés (CB et catégories) 3592387030 pour prévenir la modération.

Icons avatars écrasés (CB et catégories) Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Ven 16 Juil 2021 - 18:27

mais je n'avais aucun code similaire Icons avatars écrasés (CB et catégories) 1f62d donc rien à remplacer... ou alors je n'ai pas saisis quelques choses

j'utilise chrome et beaucoup sur le forum utilisent chrome aussi, ils ont tous noté des déformations plus ou moins importantes (d'autant plus que à présent les membres utilisent des avatars de 500x700 pour éviter la pixellisation) l'effet était exactement le même que sur les catégories ; je ne pense pas que ça soit dû au navigateur, c'est simplement que comme pour tout le reste, les avatars sont rectangulaires
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Lixyr Ven 16 Juil 2021 - 19:19

Pour faire plus simple, les codes ne réagissent pas de la même façon en fonction du navigateur. Tous les codes que je vous ai donnés, je les ai testés sur votre forum depuis Firefox, mais Chrome est beaucoup plus strict au niveau du codage. Ca explique pourquoi mon rendu n'était pas le même que vous.

Pour la Chatbox, tout est à peu près similaire.

Code:
#chatbox .user-msg .cb-avatar {
    overflow: hidden;
    width: 38px !important;
    height: 38px !important;
    border: solid 2px #e6e6e6 !important;
    border-radius: 100%;
    margin-right: 15px !important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%) !important;
}

#chatbox .user-msg .cb-avatar img {
    width: 38px !important;
    height: auto !important;
    border: none !important;
}

Bon, là c'était plus compliqué, parce que les codes de base de Forumactif sont blindés de !important, donc ça coince au niveau du codage (on ne peut pas faire ce que l'on veut) mais normalement j'ai réussi à remettre l'apparence des images sur les span pour avoir l'effet arrondis et la petite ombre.

Comme ça, ça devrait aller. Donc la même histoire : on donne une hauteur et une largeur carrée au span et on lui met un overflow: hidden pour cacher ce qui dépasse, et on demande aux avatars de reprendre une apparence rectangulaire.

Cette fois, testés sur Chrome (c'est plus ch***t à coder que sur Firefox je vous l'avoue) donc il ne devrait pas y avoir de problème. Angel
En tout cas, c'est tout bon de mon côté.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Icons avatars écrasés (CB et catégories) 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Icons avatars écrasés (CB et catégories) 3592387030 pour prévenir la modération.

Icons avatars écrasés (CB et catégories) Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icons avatars écrasés (CB et catégories)

Message par Dellou Sam 17 Juil 2021 - 15:18

Bonjour,

Merci beaucoup pour votre aide, ça fonctionne nickel !!! Icons avatars écrasés (CB et catégories) 263a

Je met le sujet en résolu et vous souhaite une belle journée !
Dellou

Dellou
***

Féminin
Messages : 198
Inscrit(e) le : 06/10/2012

https://aurumregis.forumactif.com/
Dellou 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