Control de visibilidad de avisos de publicación

Componente temático
,
1
:information_source: Resumen Personaliza la visibilidad y el estilo de los avisos de publicaciones por tipo y antigüedad
:hammer_and_wrench: Repositorio GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Este componente te permite controlar cómo aparece cada tipo de aviso de publicación (usuario nuevo, usuario recurrente y oficial) en publicaciones nuevas y antiguas. Puedes elegir si se resaltan, son visibles o se ocultan, y establecer colores de resaltado personalizados de forma independiente para cada tipo.

Las capturas de pantalla muestran ejemplos de cómo pueden verse los diferentes tipos en publicaciones nuevas (izquierda) y antiguas (derecha):

A la izquierda se puede ver un aviso oficial con fondo rojo, un aviso de usuario nuevo con fondo verde y un aviso de usuario recurrente con fondo gris. A la derecha, el aviso oficial todavía tiene fondo rojo, el aviso de usuario nuevo no tiene fondo y el aviso de usuario recurrente no es visible
A la izquierda se puede ver un aviso oficial con fondo rojo, un aviso de usuario nuevo con fondo verde y un aviso de usuario recurrente con fondo gris. A la derecha, el aviso oficial todavía tiene fondo rojo, el aviso de usuario nuevo no tiene fondo y el aviso de usuario recurrente no es visible1372×746 39.7 KB

Ejemplo de configuración 1 
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

A la izquierda se puede ver un aviso oficial con fondo dorado, un aviso de usuario nuevo sin fondo y un aviso de usuario recurrente sin fondo. A la derecha, el aviso oficial no tiene fondo, el aviso de usuario nuevo y el aviso de usuario recurrente no son visibles
A la izquierda se puede ver un aviso oficial con fondo dorado, un aviso de usuario nuevo sin fondo y un aviso de usuario recurrente sin fondo. A la derecha, el aviso oficial no tiene fondo, el aviso de usuario nuevo y el aviso de usuario recurrente no son visibles1372×746 42 KB

Ejemplo de configuración 2 
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

Para cada combinación de tipo de aviso y antigüedad, puedes elegir si el aviso debe estar resaltado, visible (sin resaltado) u oculto. Si eliges “resaltado”, puedes definir opcionalmente un color de fondo personalizado.

Recomiendo usar una variable de color como var(--quaternary-low). Estas variables hacen referencia a los colores de la paleta de colores activa, por lo que se adaptan automáticamente cuando un usuario cambia entre diferentes paletas (por ejemplo, modo claro y oscuro). Esto las convierte en una opción más flexible que los colores codificados. Si bien la mayoría de las paletas de colores muestran solo unos pocos colores base, Discourse genera tonos de estos colores que también puedes usar. Puedes explorar muchas de las variables de color disponibles usando la guía de estilo, que puedes habilitar a través del ajuste del sitio styleguide enabled. Alternativamente, puedes inspeccionar tu sitio en el navegador: abre las herramientas de desarrollador, ve a la pestaña Estilos y desplázate hasta el final para ver todas las variables de color disponibles.

También puedes usar valores hexadecimales como #EE8888, valores RGB como rgb(255, 200, 200) o colores con nombre como red.

Si no se proporciona ningún color, el componente recurre a var(--tertiary-low). La configuración predeterminada del componente replica el comportamiento estándar de Discourse, por lo que simplemente habilitarlo no cambiará nada hasta que lo configures.

El número de días después de los cuales un aviso de publicación se considera “antiguo” se define mediante el ajuste del sitio old post notice days. Esto se aplica a los tres tipos de avisos.
:warning: Importante: La antigüedad se basa en cuándo se creó la publicación, no en cuándo se añadió el aviso.
Puedes establecer temporalmente el valor en 0 para previsualizar fácilmente cómo aparecerán los avisos en su estado “antiguo”.

12 Me gusta
2

Los avisos de publicaciones antiguas ya no se renderizan en la última versión de Discourse, lo que significa que no se pueden estilizar a través de CSS. Como resultado, todas las configuraciones _old ya no tienen ningún efecto.

3

Con las últimas actualizaciones de Discourse, la clase old, que el componente solía aplicar a diferentes estilos para avisos nuevos y antiguos, ha sido eliminada. Los avisos de publicaciones para usuarios nuevos y recurrentes ahora se eliminarán automáticamente después de la configuración de días de aviso de publicación antiguos, mientras que los avisos oficiales permanecen visibles permanentemente y resaltados.

Como resultado, este componente se ha vuelto en gran medida obsoleto. Las únicas opciones de personalización restantes están relacionadas con la configuración general de color para los avisos de publicaciones. Estos se pueden ajustar fácilmente a través de CSS, como se muestra a continuación:

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

Si desea eliminar el resaltado de fondo para un tipo de aviso específico, simplemente use background-color: unset;

2 Me gusta