Choisissez la taille de l’avatar sur la page des derniers sujets. La valeur par défaut est petite (25 px). Pour voir les changements appliqués, actualisez la page avec Ctrl+F5 ou Cmd+Shift+R.
taille des avatars des sujets
Choisissez la taille de l’avatar dans les sujets. La valeur par défaut est 45 px. Pour voir les changements appliqués, actualisez la page avec Ctrl+F5 ou Cmd+Shift+R.
taille des avatars de l’en-tête
Choisissez la taille de l’avatar dans l’en-tête. La valeur par défaut est 32 px. Pour voir les changements appliqués, actualisez la page avec Ctrl+F5 ou Cmd+Shift+R.
hauteur de l’en-tête
Choisissez la hauteur de l’en-tête. Le choix doit être basé sur la taille_avatars_en_tête + 10 px. Par exemple, si la taille_avatars_en_tête est définie à 90 px, l’en-tête doit faire 100 px. La valeur par défaut est 60 px.
marge supérieure
Choisissez la distance en px par rapport à l’en-tête. La valeur par défaut est 0 px.
rayon de bordure des avatars
Choisissez le rayon de bordure des avatars sur le site. Ce paramètre s’appliquera à tous les avatars, y compris celui de l’en-tête et celui de la carte utilisateur. 0 % correspond à une forme carrée, 50 % à une forme arrondie. La valeur par défaut est de 50 %.
taille des avatars mobiles
Choisissez la taille de l’avatar dans les sujets sur mobile. La valeur minimale est de 45 px (par défaut), la valeur maximale est de 80 px. Pour voir les changements appliqués, actualisez la page avec Ctrl+F5 ou Cmd+Shift+R.
Détails supplémentaires :
taille de l'avatar récent modifie la taille de l’avatar sur la page /latest. Tous les avatars seront visibles jusqu’à la taille moyenne. À partir de grande, seul l’avatar du dernier utilisateur ayant écrit sur le sujet sera affiché.
taille de l'avatar de l'en-tête fonctionne bien jusqu’à une taille de 60 px. Pour des avatars de taille supérieure, la hauteur de l’en-tête doit être augmentée (hauteur de l'en-tête) et, par conséquent, la marge supérieure qui éloigne l’en-tête des autres éléments de la page doit également augmenter (marge supérieure).
La position (en hauteur) de la bulle de notification (sujets et MP) est restée inchangée. Ces bulles ne se déplaceront que horizontalement en suivant la taille de l’avatar.
Historique de développement
Ce composant de thème a été écrit en s’inspirant des guides suivants :
How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.
very cool
wish I could set the topic avatar size to 53 though
Also does this apply to avatars in the topic-poster div found on some front page category arrangments? It doesn’t seem to but it would be cool if it did.
@dax J’ai repéré un petit problème qui entre en conflit avec le plugin Messages Rapides.
Le CSS suivant cible également l’indicateur de notification du plugin Messages Rapides :
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- c'est le coupable */
}
Peut-être ajouter un sélecteur #… spécifique à ce CSS ?
Merci, Daniela, j’ai une autre suggestion. Ce serait super d’avoir une option pour garder les avatars de réponse actifs pour les tailles large ou extra_large, afin que je puisse réduire leur taille via CSS. Ou alors, une option pour réduire la taille des avatars de réponse directement dans le plugin. J’essaie d’obtenir ce résultat, mais bien sûr, l’avatar plus grand devient flou à cause de l’agrandissement de l’avatar de taille moyenne.
@Dax Le seul problème que je remarque actuellement se situe dans l’en-tête, qui est d’une couleur plus foncée. L’état au survol est défini sur blanc, ce qui fonctionne bien sur le bouton de recherche et sur le menu hamburger, mais lorsque l’avatar est réglé sur une taille légèrement plus grande, la taille de l’état au survol est plus petite que celle de l’avatar. Comment puis-je résoudre cela ?
Excellent composant.
Il permet de contrôler facilement la taille et l’aspect de votre avatar sans modifier le CSS de votre thème (ce qui pourrait poser des problèmes lors de la mise à jour du thème).
@dax Peut-être que je ne me suis pas très bien expliqué. Il ne s’agit pas de la couleur, mais de la taille du conteneur. Si vous passez la souris sur votre propre icône d’avatar en haut à droite de la page ici sur meta, vous obtenez un carré coloré avec une propriété :hover, et le carré est plus grand que l’avatar.
Cependant, si j’agrandis l’avatar avec ce plugin, la taille du carré :hover devient maintenant plus petite que l’avatar et cela paraît un peu étrange.
En modifiant la hauteur de cette div, les deux autres icônes doivent également être repositionnées. C’est pourquoi j’avais préféré ne pas le faire. Pour l’instant, je rends simplement la couleur de la div transparente au survol.
J’essaie d’obtenir ce résultat en CSS, mais comme toutes les icônes d’en-tête utilisent la même classe :
<li class="header-dropdown-toggle">
il semble qu’elles soient toutes activées ou toutes désactivées. Comment avez-vous réussi à empêcher uniquement l’icône d’avatar de s’activer au survol (:hover) ?
À titre d’information, j’ai réussi à obtenir un effet assez réussi en CSS avec un état :hover sur l’avatar (bordure blanche). Maintenant, si je pouvais juste empêcher l’arrière-plan de l’élément li de s’illuminer en même temps que le reste…
Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos offres Standard, Business et Entreprise.
