Tamaño y forma del avatar te permite personalizar fácilmente el tamaño y la forma de los avatares en tu sitio en una variedad de ubicaciones diferentes.
Elige el tamaño del avatar en la página más reciente. El valor predeterminado es pequeño (25px). Para ver los cambios aplicados, actualiza la página con ctrl+F5 o cmd+shift+R.
tamaño de los avatares en temas
Elige el tamaño del avatar en los temas. El valor predeterminado es 45px. Para ver los cambios aplicados, actualiza la página con ctrl+F5 o cmd+shift+R.
tamaño de los avatares en la cabecera
Elige el tamaño del avatar en la cabecera. El valor predeterminado es 32px. Para ver los cambios aplicados, actualiza la página con ctrl+F5 o cmd+shift+R.
altura de la cabecera
Elige la altura de la cabecera. La elección debe basarse en el header_avatars_size + 10px. Por ejemplo, si el header_avatars_size está configurado en 90px, la cabecera debe ser de 100px. El valor predeterminado es 60px.
margen superior
Elige la distancia en px desde la cabecera. El valor predeterminado es 0px.
radio del borde de los avatares
Elige el border-radius de los avatares en el sitio. La configuración se aplicará a todos los avatares, incluido el de la cabecera y el de la tarjeta de usuario. 0% corresponde a una forma cuadrada, 50% a una forma redondeada. Valor predeterminado del 50%
tamaño de los avatares móviles
Elige el tamaño del avatar en los temas en dispositivos móviles. El valor mínimo es 45px (predeterminado), el valor máximo es 80px. Para ver los cambios aplicados, actualiza 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 medium. A partir de large, solo se mostrará el avatar del último usuario que escribió en el tema.
tamaño del avatar de la cabecera funciona bien hasta el tamaño de 60px. Para avatares de un tamaño mayor, la altura de la cabecera debe aumentarse (altura de la cabecera) y, consecuentemente, el margen superior que separa la cabecera de los otros 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 fue escrito tomando inspiración de 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.
¡Muy genial!
Ojalá pudiera establecer el tamaño del avatar del tema en 53, aunque
Además, ¿esto también se aplica a los avatares en el div del publicador del tema que aparece en algunas disposiciones de categorías de la página principal? No parece ser así, pero sería genial si lo fuera.
@dax Encontré un pequeño problema que entra en conflicto con el plugin de Mensajes Rápidos.
El siguiente CSS también afecta a la notificación de insignia del plugin de Mensajes Rápidos:
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- este es el culpable */
}
Quizás podrías añadir algún elemento #… al selector CSS
Gracias, Daniela, tengo una sugerencia más. Sería genial si hubiera una opción para dejar los avatares de respuesta activados para los tamaños grande o extra_grande, de modo que pueda reducir su tamaño mediante CSS. O bien, una opción para reducir el tamaño de los avatares de respuesta directamente en el complemento. Estoy intentando lograr esto, pero, por supuesto, el avatar más grande se ve borroso porque se está ampliando el avatar de tamaño medio.
@Dax El único problema que veo ahora es en el encabezado, que tiene un color más oscuro. El efecto hover está configurado en blanco, lo cual funciona bien en el botón de búsqueda y en el menú hamburguesa, pero cuando el avatar se configura en un tamaño ligeramente más grande, el tamaño del hover es más pequeño que el del avatar. ¿Cómo podría solucionar eso?
Gran componente.
Facilita el control del tamaño y la proporción de tu avatar sin modificar el CSS de tu tema (lo que podría causar problemas al actualizar el tema).
@dax Quizás no me expliqué muy bien. No se trata del color, sino del tamaño del contenedor. Si pasas el cursor sobre tu propio icono de avatar en la esquina superior derecha de la página aquí en Meta, aparecerá un cuadrado coloreado con una propiedad :hover, y el cuadrado es más grande que el avatar.
Sin embargo, si aumento el tamaño del avatar con este plugin, el tamaño del cuadrado :hover ahora es más pequeño que el avatar y se ve un poco extraño.
Al cambiar la altura de ese div, los otros dos iconos también deben reposicionarse. Por esta razón, preferí no hacerlo. Por ahora, solo hago que el color del div sea transparente al pasar el cursor.
Como nota al margen, logré un efecto bastante bueno en CSS en cuanto a tener un estado :hover en el avatar (borde blanco). Ahora, si solo pudiera lograr que el fondo del elemento li no se resalte junto con el resto…
¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.
