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.
¡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 su uso en nuestros planes Estándar, Comercial y Empresarial.
