Icons avatars écrasés (CB et catégories)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Icons avatars écrasés (CB et catégories)
Détails techniques
Version du forum : ModernBBPoste 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 !
Re: Icons avatars écrasés (CB et catégories)
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.
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
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.
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.
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Icons avatars écrasés (CB et catégories)
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 :
Je ne sais pas si c'est très juste, mais ça fonctionne
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 !
En vous souhaitant une belle journée !
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
[...] 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 !
En vous souhaitant une belle journée !
Re: Icons avatars écrasés (CB et catégories)
finalement je retire ce que j'ai dit, ça fonctionne mais du coup ça décale tous les avatars dans la liste des sujets
je verrai ça demain mais urg
je verrai ça demain mais urg
Re: Icons avatars écrasés (CB et catégories)
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 :
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.
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Icons avatars écrasés (CB et catégories)
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
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
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
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
Re: Icons avatars écrasés (CB et catégories)
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
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
Re: Icons avatars écrasés (CB et catégories)
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 ?
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Icons avatars écrasés (CB et catégories)
mais je n'avais aucun code similaire 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
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
Re: Icons avatars écrasés (CB et catégories)
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.
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.
En tout cas, c'est tout bon de mon côté.
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.
En tout cas, c'est tout bon de mon côté.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Icons avatars écrasés (CB et catégories)
Bonjour,
Merci beaucoup pour votre aide, ça fonctionne nickel !!!
Je met le sujet en résolu et vous souhaite une belle journée !
Merci beaucoup pour votre aide, ça fonctionne nickel !!!
Je met le sujet en résolu et vous souhaite une belle journée !
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum