Tuve que reconstruirlo como un componente puramente CSS ya que no pude conseguir que la versión de Javascript fuera estable. El objetivo es ayudarte a resaltar un camino que deseas específicamente que los usuarios tomen.
Enlace: https://github.com/focallocal/nav-buttons-highlighter
Aquí está instalado y resaltando el plugin del tablero Kanban, que la mayoría de los usuarios en mi plataforma no sabrían dónde encontrar después de ser miembros durante meses, especialmente aquellos que usan principalmente el móvil.
Escritorio:
Móvil:
Resaltador de Botones de Navegación
Un componente de tema de Discourse que resalta los botones de navegación para guiar a los usuarios hacia rutas o funciones específicas que deseas que sigan, y hace que el menú desplegable móvil sea más claro y visible.
Propósito
Este componente te ayuda a:
- Guiar a los usuarios resaltando enlaces de navegación importantes (por ejemplo, tu tablero de tareas, documentación o categorías clave).
- Mejorar la experiencia de usuario móvil haciendo que el botón del menú desplegable de navegación destaque.
- Crear jerarquía visual en tu barra de navegación.
Características
- Estilo de botón 3D con gradientes, sombras y efectos de pasar el ratón.
- Responsivo para móviles: resalta el botón de alternancia del menú desplegable “Más reciente” en móviles para que los usuarios tengan más claro que pueden/deben hacer clic en él.
- Preconfigurado para el plugin Discourse Kanban por defecto.
- Implementación solo con CSS: fiable y ligero.
- Fácil de personalizar.
Configuración Predeterminada
Por defecto, este componente está configurado para resaltar el plugin Discourse Kanban [enlace](https://meta.discourse.org/t/kanban-board/) en AZUL. Sin embargo, se puede cambiar fácilmente para resaltar cualquier enlace de navegación que elijas en cualquier color.
Instalación
-
En la consola de administración de Discourse, ve a Personalizar → Temas → Componentes y haz clic en Instalar.
-
Copia el enlace del repositorio de Git y pégalo:
https://github.com/focallocal/nav-buttons-highlighter -
Una vez instalado, añade el componente a tu tema activo.
**
Cómo Personalizar**
**
Encontrar el Archivo CSS**
NO HAY un panel de configuración de administrador para este componente - toda la personalización se realiza editando el archivo CSS directamente en tu repositorio.
El archivo CSS se encuentra en:
common/common.scss
Cómo editarlo:
Opción 1: Editar en GitHub (la más fácil)
- Haz un fork de una versión de este repositorio e instálalo.
- Navega a
common/common.scss. - Haz clic en el icono del lápiz para editar.
- Realiza tus cambios y confirma.
- En Administración de Discourse → Personalizar → Componentes, haz clic en “Buscar actualizaciones” en el componente Nav Buttons Highlighter.
**
Opción 2: Editar localmente**
- Clona el repositorio a tu ordenador.
- Edita
common/common.scssen cualquier editor de texto. - Confirma y sube tus cambios.
- En Administración de Discourse → Personalizar → Componentes, haz clic en “Buscar actualizaciones”.
Notas:
- Este componente funciona en TODOS los temas donde esté habilitado (no está atado a un tema específico).
- El archivo CSS tiene comentarios detallados en línea que explican exactamente qué cambiar.
- Los cambios requieren actualizar el componente en la administración de Discourse después de editar.
Los comentarios del archivo CSS explican:
- Qué selector cambiar (por ejemplo,
a.kanban-nav) para resaltar diferentes enlaces. - Qué valores de color actualizar para diferentes colores.
- Cómo añadir/eliminar el resaltado del menú desplegable móvil.
**
Ejemplos**
Cambiar el Color de Azul a Verde
El botón utiliza tres tonos de azul para crear un efecto degradado:
- Azul claro:
#5ca3ff(parte superior del degradado) - Azul medio:
#4285F4(centro del degradado) - Azul oscuro:
#3a75e4(parte inferior/sombra)
Para cambiar a verde, busca y reemplaza estos valores en common/common.scss:
| Azul Actual | Reemplazar con Verde |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
Resaltar un Enlace de Navegación Diferente
Reemplaza el selector a.kanban-nav con tu enlace de destino:
Ejemplos:
a[href=“/c/nombre-de-categoria”]- Resaltar una categoría específicaa[href=“/tags/nombre-de-etiqueta”]- Resaltar una etiqueta específicaa[href=“/mi-pagina-personalizada”]- Resaltar cualquier enlace personalizado#navigation-bar > li:nth-child(2) > a- Resaltar el segundo botón de navegación
Cómo encontrar el selector:
- Abre tu foro en un navegador.
- Haz clic derecho en el enlace que deseas resaltar.
- Selecciona “Inspeccionar elemento”.
- Busca nombres de clase (por ejemplo,
class=“kanban-nav”) o valores href en el HTML.
**
Desactivar el Resaltado del Menú Desplegable Móvil**
Busca la sección etiquetada /* Latest dropdown button on mobile */ y haz una de las siguientes:
- Elimina toda la sección, O
- Coméntala envolviéndola en
/* … */
**
Resaltar Enlaces Dentro del Menú Desplegable Móvil**
Añade este bloque CSS después de los estilos existentes:
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
Reemplaza a.kanban-nav con tu selector deseado.
**
Desarrollo**
Este repositorio contiene:
common/common.scssToda la guía de estilo de botones y personalización detallada.assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.jsInicializador mínimo (requerido para Discourse).about.jsonMetadatos del componente.
Solución de Problemas
**P: Los cambios no aparecen**
R: Después de editar, haz clic en “Guardar” y actualiza forzadamente la página de tu foro (Ctrl+F5 o Cmd+Shift+R).
**P: Quiero resaltar varios botones**
R: Copia todo el bloque CSS del botón y pégalo debajo de la regla CSS existente, luego cambia el selector y opcionalmente los colores.
**
Licencia**
MIT Public Happiness Movement