Tive que reconstruí-lo como um componente puramente CSS, pois não consegui tornar a versão Javascript estável. O objetivo é ajudá-lo a destacar um caminho que você deseja especificamente que os usuários sigam.
Link: https://github.com/focallocal/nav-buttons-highlighter
Aqui está instalado e destacando o plugin Kanban, que a maioria dos usuários da minha plataforma não saberia onde encontrar, mesmo após meses como membros, especialmente aqueles que usam principalmente o celular.
Desktop:
Mobile:
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 móvel 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 móvel tornando o botão de navegação suspenso mais proeminente
- Criar hierarquia visual na sua barra de navegação
Recursos
- Estilo de botão 3D com gradientes, sombras e efeitos de passagem do mouse
- Responsivo para dispositivos móveis - destaca o botão de alternância do menu suspenso “Mais recentes” no celular para que os usuários tenham mais clareza de que podem/devem clicar nele
- Pré-configurado para o plugin Discourse Kanban por padrão
- Implementação apenas com CSS - confiável e leve
- Fácil de personalizar
Configuração Padrão
Por padrão, este componente está configurado para destacar o plugin Discourse Kanban [link](https://meta.discourse.org/t/kanban-board/) em AZUL. No entanto, ele pode ser facilmente alterado para destacar qualquer link de navegação que você escolher em qualquer cor.
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
Encontrando o Arquivo CSS
NÃO HÁ painel de configurações de administrador para este componente - toda a personalização é feita editando o arquivo CSS diretamente no seu repositório.
O arquivo CSS está localizado em:
common/common.scss
Como editá-lo:
Opção 1: Editar no GitHub (mais fácil)
- Faça um fork de uma versão deste repositório e instale
- Navegue até
common/common.scss - Clique no ícone de lápis para editar
- Faça suas alterações e confirme
- Em Administração do Discourse → Personalizar → Componentes, clique em “Verificar Atualizações” no componente Nav Buttons Highlighter
Opção 2: Editar localmente
- Clone o repositório para o seu computador
- Edite
common/common.scssem qualquer editor de texto - Confirme e envie suas alterações
- Em Administração do Discourse → Personalizar → Componentes, clique em “Verificar Atualizações”
Notas:
- Este componente funciona em TODOS os temas onde está habilitado (não está vinculado a um tema específico)
- O arquivo CSS tem comentários inline detalhados explicando exatamente o que mudar
- Alterações exigem a atualização do componente no admin do Discourse após a edição
Os comentários do arquivo CSS explicam:
- Qual seletor mudar (por exemplo,
a.kanban-nav) para destacar links diferentes - Quais valores de cor atualizar para cores diferentes
- Como adicionar/remover destaque do menu suspenso móvel
Exemplos
Mudar a Cor de Azul para Verde
O botão usa três tons de azul para criar um efeito de gradiente:
- Azul claro:
#5ca3ff(topo do gradiente) - Azul médio:
#4285F4(meio do gradiente) - Azul escuro:
#3a75e4(inferior/sombra)
Para mudar para verde, encontre e substitua esses valores em common/common.scss:
| Azul Atual | Substituir por Verde |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
Destacando um Link de Navegação Diferente
Substitua o seletor a.kanban-nav pelo seu link de destino:
Exemplos:
a[href=“/c/nome-da-categoria”]- Destacar uma categoria específicaa[href=“/tags/nome-da-tag”]- Destacar uma tag específicaa[href=“/minha-pagina-personalizada”]- Destacar qualquer link personalizado#navigation-bar > li:nth-child(2) > a- Destacar o 2º botão de navegação
Como encontrar o seletor:
- Abra seu fórum em um navegador
- Clique com o botão direito no link que você deseja destacar
- Selecione “Inspecionar Elemento”
- Procure por nomes de classe (por exemplo,
class=“kanban-nav”) ou valores de href no HTML
Desativar o Destaque do Menu Suspenso Móvel
Encontre a seção rotulada /* Latest dropdown button on mobile */ e:
- Exclua a seção inteira, OU
- Comente-a envolvendo-a em
/* … */
Destacando Links Dentro do Menu Suspenso Móvel
Adicione este bloco CSS após os 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;
}
Substitua a.kanban-nav pelo seu seletor desejado.
Desenvolvimento
Este repositório contém:
common/common.scssTodos os estilos de botão e guia detalhado de personalizaçãoassets/javascripts/discourse/api-initializers/nav-buttons-highlighter.jsInicializador mínimo (necessário para Discourse)about.jsonMetadados do componente
Solução de Problemas
P: As alterações não estão aparecendo
R: Após editar, clique em “Salvar” e atualize forçadamente sua página do fórum (Ctrl+F5 ou Cmd+Shift+R).
P: Quero destacar vários botões
R: Copie todo o bloco de estilo do botão e cole-o abaixo da regra CSS existente, depois altere o seletor e, opcionalmente, as cores.
Licença
MIT Public Happiness Movement