Cómo mostrar las reacciones con botones redondeados
-
Aethior -
October 22, 2024 at 9:00 AM -
151 Views -
0 Comments
A continuación, te mostramos cómo puedes destacar las reacciones de tu comunidad con llamativo efecto usando CSS. Este efecto se parece a la forma en la que, por ejemplo, Facebook muestra las reacciones, aplicando un marco redondeado alrededor de los iconos.
Las reacciones permiten a los miembros de tu comunidad reaccionar al contenido de otros usuarios. Podríamos decir que las reacciones son un paso más allá del botón de "Me gusta" y permiten que los usuarios muestren emociones de asombro, agrado, enfado o diversión, entre otras opciones, a los contenidos que otros miembros comparten en nuestra comunidad. En definitiva, son una forma de ayudar a la comunicación emocional en línea, permitiendo que los miembros puedan responder a una publicación utilizando un emoji que se asemeja a la emoción que les ha generado.
Hace algún tiempo se abrió una propuesta en la comunidad de WoltLab para mejorar la visualización de las reacciones, pero la compañía alemana todavía no ha tomado ninguna decisión al respecto. Sin embargo, @Gino Zantarelli, miembro activo de la comunidad y administrador del sitio web powerstylez.de, ha sabido recrear este efecto usando código CSS y ha tenido a bien compartirlo con la comunidad.
/*REACCIONES REDONDEADAS
Gracias a @Gino Zantarelli*/
.messageGroupList .columnSubject > .statusDisplay .topReactionShort {
background-color: var(--wcfContentBorderInner);
border-radius: 30px;
margin-top: 3px;
padding: 1px 5px 1px 5px;
line-height: 1.28;
color: var(--wcfContentText);
min-height: 24px;
}
.messageGroupList .columnSubject > .statusDisplay .topReactionShort img.reactionType {
width: 16px;
}
.messageGroupList .columnSubject > .statusDisplay .topReactionShort .reactionCount {
font-size: 10px;
vertical-align: 2px;
}
.reactionSummary .reactionCountButton {
background-color: var(--wcfContentContainerBorder);
padding: 2px 12px 2px 8px;
border: 3px solid var(--wcfContentContainerBackground);
margin-left: -17px;
border-radius: 30px;
line-height: 22px;
}
.reactionSummary .reactionCountButton:first-child {
margin-left: 0px;
}
.reactionSummary .reactionCountButton:first-child:last-child {
padding: 2px 8px 2px 8px;
}
.reactionSummary .reactionCountButton:last-child {
padding: 2px 8px 2px 8px;
}
Display More
Sin duda, personas como @Gino Zantarelli hacen de la comunidad de WoltLab un lugar mejor, y nos muestran como con un poco de CSS, ingenio y buen gusto se puede conseguir que WoltLab Suite muestre todo su potencial. Desde aquí te invitamos a que visites su sitio web y descubras los diferentes estilos y extensiones que tiene disponibles, tanto gratuitos como de pagos.
Cómo activar las reacciones en WoltLab Suite
Las reacciones es uno de los módulos que viene instalado por defecto en WoltLab Suite. Puedes activarlo o desactivarlo siguiendo la ruta "Panel de Administración de Control (ACP) → Configuración → Módulos → Comunidad". Una vez activado, podrás añadir nuevas reacciones en la ruta "Panel de Administración de Control (ACP) → Personalización → Reacciones → Tipos de reacciones". En este apartado podrás añadir nuevas reacciones o editar las actuales. Las emociones en WoltLab Suite son totalmente personalizables, por lo que podrás editar tanto su nombre como subir un icono o imagen personalizado.
En WoltLab Community | Revisar el resumen de reacciones en listas (en alemán)
Comments