Tamaño y forma de los avatares le permite personalizar fácilmente el tamaño y la forma de los avatares en su sitio en una variedad de ubicaciones diferentes.
Elija el tamaño del avatar en la página más reciente. El valor predeterminado es pequeño (25px). Para ver los cambios aplicados, actualice la página con ctrl+F5 o cmd+shift+R.
tamaño de los avatares en los temas
Elija el tamaño del avatar en los temas. El valor predeterminado es 45px. Para ver los cambios aplicados, actualice la página con ctrl+F5 o cmd+shift+R.
tamaño de los avatares en el encabezado
Elija el tamaño del avatar en el encabezado. El valor predeterminado es 32px. Para ver los cambios aplicados, actualice la página con ctrl+F5 o cmd+shift+R.
altura del encabezado
Elija la altura del encabezado. La elección debe basarse en el header_avatars_size + 10px. Por ejemplo, si el header_avatars_size se establece en 90px, el encabezado debe ser de 100px. El valor predeterminado es 60px.
margen superior
Elija la distancia en px desde el encabezado. El valor predeterminado es 0px.
radio del borde de los avatares
Elija el radio del borde de los avatares en el sitio. La configuración se aplicará a todos los avatares, incluido el del encabezado y el de la tarjeta de usuario. 0% corresponde a una forma cuadrada, 50% a una forma redondeada. Valor predeterminado al 50%
tamaño de los avatares en móviles
Elija el tamaño del avatar en los temas en dispositivos móviles. El valor mínimo es 45px (predeterminado) y el máximo es 80px. Para ver los cambios aplicados, actualice la página con ctrl+F5 o cmd+shift+R.
Detalles adicionales:
tamaño del avatar más reciente cambia el tamaño del avatar en la página /latest. Todos los avatares serán visibles hasta el tamaño mediano. A partir de grande, solo se mostrará el avatar del último usuario que escribió en el tema.
tamaño del avatar del encabezado funciona bien hasta el tamaño de 60px. Para avatares de mayor tamaño, la altura del encabezado debe aumentarse (altura del encabezado) y, en consecuencia, el margen superior que separa el encabezado de los demás elementos de la página también debe aumentar (margen superior).
La posición (en altura) de la burbuja de notificación (temas y MP) ha permanecido sin cambios. Estas burbujas solo se moverán horizontalmente siguiendo el tamaño del avatar.
Historial de desarrollo
Este componente de tema se escribió tomando como inspiración las guías
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 I found a small issue which collides with the Quick Messages plugin.
The following CSS comes targets the badge notification of the quick messages plugin as well:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- this is the culprit*/
}
Thank you Daniela, I have one more suggestion. It would be great if there was an option to either leave the reply avatars on for large or extra_large so I can reduce the size via css. Or an option to reduce the size of the reply avatars in the plugin. I’m trying to achieve this, but of course the larger avatar is blurry from upsizing the medium size avatar.
@Dax Only problem I’m seeing right now is in the header which is a darker color. The hover is set to white which works fine on the search button and on the hamburger menu, but when the avatar is set to a slightly larger size, the size of the hover is smaller than the avatar. How would I go about fixing that?
Great component.
It makes it easy to control the size and aspecto of your avatar without changing CSS of you theme (that may give problems upgrading the theme).
@dax Maybe I did not explain myself very well. It’s not about the color, it’s about the size of the container. If you hover over your own avatar icon in the upper right corner of the page here on meta, you get a colored square with a :hover property, and the square is bigger than the avatar.
However, if I enlarge the avatar with this plugin, the size of the :hover square is now smaller than the avatar and looks a little wonky.
By changing the height of that div, the other two icons must also be repositioned. For this reason I had preferred not to. For now I only make the color of the div on hover transparent.
As a side note, I was able to get a pretty good looking effect in CSS in terms of having a :hover state on the avatar (white border). Now if I could just get the background of the li element to not highlight with the rest of it…
¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, Comercial y Empresarial.
