Componente Nav Button Highlighter - agora funcionando

Drew-ART · Novembro 18, 2025, 1:14pm

Tive que reconstruí-lo como um componente puramente CSS, pois tive problemas para estabilizar a seção de administração da versão em Javascript, o que significa que você precisa editar os seletores CSS diretamente para que funcione no seu site.

O objetivo do componente é ajudar você a destacar um caminho que deseja especificamente que os usuários sigam.

Link: https://github.com/focallocal/nav-buttons-highlighter

Aqui está instalado e destacando o plugin do quadro Kanban que a maioria dos usuários da minha plataforma não saberia onde encontrar após serem membros por meses, especialmente aqueles que usam mais o celular.

Desktop:

Mobile:

Destaque de Botões de Navegação (Nav Buttons Highlighter)

Um componente de tema do Discourse que destaca botões de navegação para guiar os usuários em direção a caminhos ou funções específicas que você deseja que eles sigam, e torna o menu suspenso (dropdown) do celular mais claro e visível.

Propósito

Este componente ajuda você a:

Guiar usuários destacando links de navegação importantes (por exemplo, seu quadro de tarefas, documentação ou categorias principais)
Melhorar a experiência do usuário (UX) no celular tornando o botão de navegação suspenso mais visível
Criar hierarquia visual na sua barra de navegação

Funcionalidades

Estilização de botão limpa com cores sólidas e efeitos de passagem do mouse (hover)
Configurável pelo administrador - nenhuma edição de CSS necessária
Suporte para até 3 botões de navegação personalizados
Responsivo para celular - inclui destaque do botão suspenso do celular
Pré-configurado para o plugin Kanban do Discourse por padrão
Suporte a seletor de cores para fácil personalização

Configuração Padrão

Por padrão, este componente está configurado para destacar o plugin Discourse Kanban (link) em AZUL (#4285F4).

Instalação

No console de Administração do Discourse, vá para Personalizar → Temas → Componentes e clique em Instalar

Copie o link do repositório Git e cole:

https://github.com/focallocal/nav-buttons-highlighter

Após a instalação, adicione o componente ao seu tema ativo.

Como Personalizar

Painel de Configurações do Administrador

Toda a configuração é feita através de configurações simples do administrador - nenhuma edição de CSS necessária!

Para configurar:

Vá para Admin → Personalizar → Temas
Clique no seu tema ativo
Encontre Nav Buttons Highlighter na seção Componentes Incluídos
Clique em Configurações

Configurações Disponíveis:

Botão 1 - Kanban (Padrão):

Destacar Kanban: Alternar ligado/desligado (padrão: ligado)
Cor do Kanban: Seletor de cor (padrão: azul #4285F4)
Seletor do Kanban: Seletor CSS (padrão: a.kanban-nav)

Botão 2 - Personalizado:

Destacar Botão 2: Habilitar o segundo botão (padrão: desligado)
Cor do Botão 2: Seletor de cor (padrão: verde #4CAF50)
Seletor do Botão 2: Insira seu seletor CSS (ex: a[href='/page'])

Botão 3 - Personalizado:

Destacar Botão 3: Habilitar o terceiro botão (padrão: desligado)
Cor do Botão 3: Seletor de cor (padrão: laranja #FF5722)
Seletor do Botão 3: Insira seu seletor CSS

Celular:

Destacar Dropdown do Celular: Alternar o dropdown “Mais Recentes” do celular (padrão: ligado)
Cor do Dropdown do Celular: Seletor de cor (padrão: azul #4285F4)

Encontrando Seletores CSS:

Para destacar diferentes links de navegação, você precisa do seu seletor CSS:

Abra seu fórum em um navegador
Clique com o botão direito no link que deseja destacar
Selecione “Inspecionar Elemento”
Procure pela tag <a> e observe:
- Nomes de classe: class="kanban-nav" → use: a.kanban-nav
- Valor do Href: href="/c/support" → use: a[href="/c/support"]

Exemplos Comuns:

Plugin Kanban: a.kanban-nav
Categoria de Suporte: a[href="/c/support"]
Tag de Documentação: a[href="/tags/documentation"]
Página personalizada: a[href="/my-page"]
Segundo botão de navegação: #navigation-bar > li:nth-child(2) > a

Seleção de Cores:

Use códigos de cores hexadecimais (ex: #4285F4 para azul). O componente gera automaticamente:

Tom mais claro para o topo do gradiente
Tom mais escuro para a parte inferior/sombra
Cores de estado de passagem do mouse (hover) e ativo

Cores Populares:

Azul: #4285F4 (padrão)
Verde: #4CAF50
Vermelho: #F44336
Laranja: #FF9800
Roxo: #9C27B0

Versão Apenas CSS Estável

Se você prefere a edição direta de CSS, a versão anterior (2.0.1) está disponível:

Instalar a versão apenas CSS:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

Consulte o README desse branch para obter instruções de edição de CSS.

Desenvolvimento

Este repositório contém:

common/common.scss — Toda a estilização dos botões e guia detalhada de personalização
assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Inicializador mínimo (necessário para o Discourse)
about.json — Metadados do componente

Solução de Problemas

P: As alterações não estão aparecendo
R: Após a edição, clique em “Salvar” e atualize a página do seu fórum forçadamente (Ctrl+F5 ou Cmd+Shift+R).

P: Quero destacar vários botões
R: Copie todo o bloco de CSS do botão e cole-o abaixo da regra CSS existente, depois altere o seletor e, opcionalmente, as cores.

Licença

MIT — Movimento de Felicidade Pública

merefield · Novembro 18, 2025, 1:25pm

o que há com toda essa marcação estranha?

você sinalizou para movê-lo para Theme component?

Drew-ART · Novembro 18, 2025, 1:33pm

Obrigado. Eu copiei e colei diretamente do README do Github. Tenho atualizado desde que cliquei em postar.

você sinalizou para movê-lo para Componente de tema?

Não, queria obter feedback e verificar se estava tudo bem primeiro.

Drew-ART · Novembro 18, 2025, 1:47pm

Tive um problema bizarro em que o Discourse armazenou em cache um arquivo, acho que foi o arquivo about.json, e toda edição que fiz nele falhou em atualizar ou reinstalar. Demorou muito para descobrir por que eu não conseguia fazer nenhuma alteração ser compilada.

Existe uma maneira melhor de testar um componente do que em um site ativo?

NateDhaliwal · Novembro 19, 2025, 2:44am

@Drew-ART Você já olhou para Objects type for theme setting? Talvez então possa ser usado para adicionar muitas regras CSS, talvez usando aninhamento para adicionar coisas como cor de fundo e preenchimento a cada regra. SCSS tem um loop each que você pode ser capaz de usar.

Talvez isso possa ajudar?

github.com/Arkshine/discourse-banner-featured-links

scss/functions.scss

ce190f66a


      
            @return $result;
          }
          
          /**
           * Parses a string of ruby-like key-value pairs into a map.
           * Format: [{"key1"=>"value1", "key2"=>"value2"}, {"key1"=>"value1","key2"=>"value2"}]
           *
           * @param {String} $string - The string of key-value pairs.
           * @return {Map} - The map of key-value pairs.
           */
          @function parseObjectSettings($string) {
            $string: str-slice($string, 2, -2);
            $items: str-split($string, "}, {");
          
            $parsedItems: ();
          
            @each $item in $items {
              $item: str-replace($item, "{", "");
              $item: str-replace($item, "}", "");
              $item: str-trim($item);

Drew-ART · Novembro 19, 2025, 12:47pm

Agradeço ao @NateDhaliwal. Essa foi minha abordagem original, mas encontrei o erro 500 acima e não consegui superá-lo por um bom tempo, então voltei para uma abordagem apenas com CSS.

Eu poderia reverter para aquela tentativa abandonada e ver se carrega agora que acho que tenho controle sobre o erro 500. Vou tentar.

Drew-ART · Novembro 19, 2025, 1:28pm

Não, não consigo fazer isso funcionar de jeito nenhum.

Eu configurei com as configurações de administrador e voltando para CSS se elas não carregarem corretamente, mas algo que não consigo identificar impede que funcione totalmente.

Drew-ART · Novembro 20, 2025, 12:36am

Ok, consegui fazer a seção de administração funcionar usando configurações simples de texto/booleano.

Achei difícil fazer funcionar o tipo Objetos com análise SCSS e gostaria que alguém explicasse por que o branch acima não funcionou, mas quem quiser usá-lo agora pode personalizar suas configurações na seção de administração do componente.

Drew-ART · Novembro 20, 2025, 8:54pm

Ok, acho que encontrei o problema do SCSS.

Encontrei isto no componente de carrossel do @NateDhaliwal:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Configurações (settings.yml):


pagination_button_color:
  type: string
  default: ""

Para qualquer outra pessoa com dificuldades:

injetar em propriedades personalizadas do CSS usando a sintaxe #{$var}
Em seguida, usar essas variáveis CSS em outros lugares para que a biblioteca Swiper as leia

Isso funciona porque:

As variáveis de configurações podem ser interpoladas com #{}
As propriedades personalizadas de CSS aceitam valores de string
O estilo real usa as variáveis CSS, não as funções SCSS

Atualizarei este plugin com a versão mais moderna em breve.

Tópico		Respostas	Visualizações
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	11 de Novembro de 2025
Highlighter Composer Button Theme component	22	1301	5 de Setembro de 2023
Fast Highlight Dev	49	2304	30 de Setembro de 2023
MD Composer extras Theme component	70	8697	8 de Julho de 2025
Discourse Button Styles Theme component	40	10498	18 de Setembro de 2025