### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [18 Noviembre, 2025 13:14 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/1 "2025-11-18T13:14:04Z")
Tuve que reconstruirlo como un componente puramente CSS ya que tuve problemas para estabilizar la sección de administración de la versión de Javascript, lo que significa que tienes que editar los selectores CSS directamente para que funcione en tu sitio.
El objetivo del componente es ayudarte a resaltar una ruta que deseas específicamente que tomen los usuarios.
> **[GitHub - focallocal/nav-buttons-highlighter: A discourse plugin to highlight the nav buttons...](https://github.com/focallocal/nav-buttons-highlighter)**
>
> A discourse plugin to highlight the nav buttons for those who want to make them more visible to their members
Enlace: [https://github.com/focallocal/nav-buttons-highlighter](https://github.com/focallocal/nav-buttons-highlighter)
Aquí está instalado y resaltando el complemento del tablero Kanban que la mayoría de los usuarios de mi plataforma no sabrían dónde encontrar después de ser miembros durante meses, especialmente aquellos que usan principalmente dispositivos móviles.
## Escritorio:
# Móvil:
# Resaltador de Botones de Navegación (Nav Buttons Highlighter)
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 (UX) móvil** haciendo que el botón de navegación desplegable destaque
- **Crear jerarquía visual** en tu barra de navegación
## Características
- Estilo de botón limpio con colores sólidos y efectos de pasar el ratón (hover)
- Configurable por el administrador: no se requiere edición de CSS
- Soporte para hasta 3 botones de navegación personalizados
- Adaptable a dispositivos móviles: incluye resaltado del botón de menú desplegable móvil
- Preconfigurado para el complemento Kanban de Discourse por defecto
- Soporte para selector de color para una fácil personalización
## Configuración Predeterminada
Por defecto, este componente está configurado para resaltar el complemento **Discourse Kanban** ([enlace](https://meta.discourse.org/t/kanban-board/)) en **AZUL** (#4285F4).
## Instalación
1. En la consola de administración de Discourse, ve a **Personalizar → Temas → Componentes** y haz clic en **Instalar**
2. Copia el enlace del repositorio Git y pégalo:
```plaintext
https://github.com/focallocal/nav-buttons-highlighter
```
3. Una vez instalado, añade el componente a tu tema activo.
## Cómo Personalizar
### Panel de Configuración del Administrador
Toda la configuración se realiza a través de sencillos ajustes de administrador: ¡no se requiere edición de CSS!
**Para configurar:**
1. Ve a **Administrador → Personalizar → Temas**
2. Haz clic en tu tema activo
3. Busca **Nav Buttons Highlighter** en la sección Componentes Incluidos
4. Haz clic en **Configuración**
**Configuraciones Disponibles:**
**Botón 1 - Kanban (Predeterminado):**
- **Resaltar Kanban** : Activar/desactivar (predeterminado: activado)
- **Color Kanban** : Selector de color (predeterminado: azul #4285F4)
- **Selector Kanban** : Selector CSS (predeterminado: `a.kanban-nav`)
**Botón 2 - Personalizado:**
- **Resaltar Botón 2** : Habilitar el segundo botón (predeterminado: desactivado)
- **Color Botón 2** : Selector de color (predeterminado: verde #4CAF50)
- **Selector Botón 2** : Introduce tu selector CSS (ejemplo: `a[href='/page']`)
**Botón 3 - Personalizado:**
- **Resaltar Botón 3** : Habilitar el tercer botón (predeterminado: desactivado)
- **Color Botón 3** : Selector de color (predeterminado: naranja #FF5722)
- **Selector Botón 3** : Introduce tu selector CSS
**Móvil:**
- **Resaltar Desplegable Móvil** : Activar/desactivar el desplegable “Más Reciente” móvil (predeterminado: activado)
- **Color Desplegable Móvil** : Selector de color (predeterminado: azul #4285F4)
**Encontrar Selectores CSS:**
Para resaltar diferentes enlaces de navegación, necesitas su selector CSS:
1. Abre tu foro en un navegador
2. Haz clic derecho en el enlace que deseas resaltar
3. Selecciona “Inspeccionar Elemento”
4. Busca la etiqueta `` y anota:
- Nombres de clase: `class="kanban-nav"` → usa: `a.kanban-nav`
- Valor de Href: `href="/c/support"` → usa: `a[href="/c/support"]`
**Ejemplos Comunes:**
- Complemento Kanban: `a.kanban-nav`
- Categoría de Soporte: `a[href="/c/support"]`
- Etiqueta de Documentación: `a[href="/tags/documentation"]`
- Página personalizada: `a[href="/my-page"]`
- Segundo botón de navegación: `#navigation-bar > li:nth-child(2) > a`
**Selección de Color:**
Usa códigos de color hexadecimales (ejemplo: `#4285F4` para azul). El componente genera automáticamente:
- Tono más claro para la parte superior del degradado
- Tono más oscuro para la parte inferior/sombra
- Colores de estado al pasar el ratón y activo
**Colores Populares:**
- Azul: `#4285F4` (predeterminado)
- Verde: `#4CAF50`
- Rojo: `#F44336`
- Naranja: `#FF9800`
- Púrpura: `#9C27B0`
### Versión CSS-Solo Estable
Si prefieres la edición directa de CSS, la versión anterior (2.0.1) está disponible:
**Instalar la versión solo CSS:**
```plaintext
https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1
```
Consulta el README de esa rama para obtener instrucciones de edición de CSS.
## Desarrollo
Este repositorio contiene:
- `common/common.scss` — Todo el estilo de los botones y guía de personalización detallada
- `assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js` — Inicializador mínimo (requerido para Discourse)
- `about.json` — Metadatos 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 — Movimiento de Felicidad Pública
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [18 Noviembre, 2025 13:25 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/2 "2025-11-18T13:25:10Z")
Bien.
¿Pero qué pasa con todo ese Markdown extraño?
¿Lo has marcado para moverlo a #customización:componente-tema?
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [18 Noviembre, 2025 13:33 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/3 "2025-11-18T13:33:49Z")
Gracias. Lo copié y pegué directamente del archivo Léame de Github. Lo he estado actualizando desde que hice clic en publicar.
> ¿Lo has marcado para moverlo a [Componente temático](https://meta.discourse.org/c/theme-component/120)?
No, quería recibir comentarios y asegurarme de que todo estuviera bien primero.
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [18 Noviembre, 2025 13:47 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/4 "2025-11-18T13:47:19Z")
Tuve un problema extraño en el que Discourse almacenó en caché un archivo, creo que fue el archivo about.json, y cada edición que hice en él no se actualizó ni se reinstaló. Me llevó mucho tiempo averiguar por qué no podía hacer que ningún cambio se compilara en absoluto.
¿Hay una mejor manera de probar un componente que no sea en un sitio en vivo?
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [19 Noviembre, 2025 02:44 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/5 "2025-11-19T02:44:25Z")
@Drew-ART ¿Has mirado [Objects type for theme setting](https://meta.discourse.org/t/objects-type-for-theme-setting/305009)? Quizás entonces se pueda usar para añadir muchas reglas CSS, quizás usando anidamiento para añadir cosas como el color de fondo y el relleno a cada regla. SCSS tiene un [bucle each](https://sass-lang.com/documentation/at-rules/control/each/) que podrías ser capaz de usar.
¿Quizás esto pueda ayudar?
>
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [19 Noviembre, 2025 12:47 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/6 "2025-11-19T12:47:04Z")
Gracias @NateDhaliwal. Ese fue mi enfoque original, pero me encontré con el error 500 anterior y no pude superarlo durante mucho tiempo, así que volví a un enfoque solo con CSS.
Creo que podría volver a ese intento abandonado y ver si carga ahora que creo tener controlado el error 500. Lo intentaré.
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [19 Noviembre, 2025 13:28 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/7 "2025-11-19T13:28:56Z")
No, no puedo hacer que eso funcione en absoluto.
Lo configuré con la configuración de administrador y recurriendo a CSS si no se cargan correctamente, pero algo que no puedo atrapar impide que funcione por completo.
> **[GitHub - focallocal/nav-buttons-highlighter at experimental-admin-settings](https://github.com/focallocal/nav-buttons-highlighter/tree/experimental-admin-settings)**
>
> experimental-admin-settings
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [20 Noviembre, 2025 00:36 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/9 "2025-11-20T00:36:21Z")
De acuerdo, logré que la sección de administración funcionara usando configuraciones simples de texto/booleano.
Me resultó difícil hacer funcionar el tipo de Objeto con el análisis SCSS y me gustaría saber si alguien puede explicar por qué la rama anterior no funcionó, pero cualquiera que quiera usarlo ahora puede personalizar su configuración en la sección de administración del componente.
---
### Author:  [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### Post date: [20 Noviembre, 2025 20:54 UTC](https://meta.discourse.org/t/nav-button-highlighter-component-now-working/388818/10 "2025-11-20T20:54:57Z")
Ok, creo que encontré el problema de SCSS.
Encontré esto en el componente de carrusel de @NateDhaliwal:
SCSS (common.scss):
```plaintext
@if $pagination-button-color != "" {
--swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}
```
Configuración (settings.yml):
```plaintext
pagination_button_color:
type: string
default: ""
```
Para cualquiera que esté luchando:
- inyectar en las propiedades personalizadas de CSS usando la sintaxis `#{$var}`
- Luego usar esas variables CSS en otros lugares para que la biblioteca Swiper las lea
Esto funciona porque:
1. Las variables de configuración se pueden interpolar con `#{}`
2. Las propiedades personalizadas de CSS aceptan valores de cadena
3. El estilo real utiliza las variables CSS, no las funciones SCSS
Actualizaré este complemento con la versión más moderna pronto.