Choisissez la taille de l’avatar sur la page la plus récente. La valeur par défaut est petite (25px). Pour voir les modifications appliquées, actualisez la page avec ctrl+F5 ou cmd+shift+R.
taille des avatars dans les sujets
Choisissez la taille des avatars dans les sujets. La valeur par défaut est 45px. Pour voir les modifications appliquées, actualisez la page avec ctrl+F5 ou cmd+shift+R.
taille des avatars dans l’en-tête
Choisissez la taille des avatars dans l’en-tête. La valeur par défaut est 32px. Pour voir les modifications appliquées, 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 fait en fonction de header_avatars_size + 10px. Par exemple, si header_avatars_size est défini à 90px, l’en-tête doit être de 100px. La valeur par défaut est 60px.
marge supérieure
Choisissez la distance en px par rapport à l’en-tête. La valeur par défaut est 0px.
rayon de bordure des avatars
Choisissez le rayon de bordure des avatars sur le site. Le 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. Valeur par défaut à 50%
taille des avatars mobiles
Choisissez la taille des avatars dans les sujets sur mobile. La valeur minimale est 45px (par défaut), la valeur maximale est 80px. Pour voir les modifications appliquées, actualisez la page avec ctrl+F5 ou cmd+shift+R.
Détails supplémentaires :
taille de l'avatar le plus récent modifie la taille de l’avatar sur la page /latest. Tous les avatars seront visibles jusqu’à la taille medium. À partir de large, seul l’avatar du dernier utilisateur qui a écrit dans le sujet sera affiché.
taille de l'avatar dans l'en-tête fonctionne bien jusqu’à une taille de 60px. 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 être augmentée (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 fonction de 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.
Très cool
J’aimerais pouvoir définir la taille de l’avatar du sujet à 53, par contre
Est-ce que cela s’applique également aux avatars dans le div topic-poster présent dans certaines dispositions de catégories sur la page d’accueil ? Cela ne semble pas être le cas, mais ce serait cool si c’était le cas.
@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 à l’utilisation sur nos plans Standard, Business et Enterprise.
