Personalize o cabeçalho com links, ícones ou menus

[Discourse]

Este guia foi elaborado para usuários que desejam aprimorar o cabeçalho de seu site adicionando links, ícones ou menus. Quer você esteja usando componentes de tema simples ou optando por personalizações mais intrincadas, este manual fornece instruções claras, passo a passo, para ajudá-lo a fazer as alterações desejadas, independentemente do seu nível de conhecimento técnico.

Nível de usuário exigido: Administrador

O jeito fácil (Componentes de Tema)

Cada componente de tema é diferente, portanto, leia os tópicos relacionados aos vários componentes antes de escolher aquele que melhor se adapta ao seu site.

1. Custom Header Links cria um menu dentro do cabeçalho, ao lado da lupa
   

   

2. Custom Header Links (icons) cria ícones clicáveis ao lado da lupa
   

   

3. Brand Header cria um menu acima do cabeçalho
   

   

4. Header Submenus cria um menu acima do cabeçalho com submenus
   

   

Cada componente pode ser personalizado ainda mais em uma folha de estilos separada, de modo que, quando os componentes forem atualizados, suas alterações não serão substituídas. Tudo o que você precisa saber é um pouco de CSS e poderá estilizar seu cabeçalho como preferir.

A vantagem dessas soluções é que todos esses componentes são gerenciados, mantidos e atualizados pela equipe do Discourse e já funcionam para dispositivos móveis.

O jeito difícil

Crie suas próprias personalizações.

Para fazer isso, você precisará ler pelo menos o Beginner's guide to using Discourse Themes e o Developing Discourse Themes & Theme Components.

Depois de se familiarizar com os temas do Discourse, você pode começar a construir o seu.

Experimente

Selecione a aba common e adicione seu HTML personalizado na aba Before Header. As abas desktop e mobile também estão disponíveis no seletor “Show Advanced” (Mostrar Avançado) se você precisar de personalizações específicas da plataforma, mas common é recomendado como ponto de partida.

Como exemplo, você pode começar a adicionar a parte HTML do seu menu na aba Before Header

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com">Home</a>
     <a href="http://example.com/about/">About</a>
     <a href="http://example.com/news/">News</a>
     <a href="http://example.com/products/">Products</a>
     <a href="http://blog.example.com/blog">Blog</a>
     <a href="http://forums.example.com/">Forums</a> 
   </span>
 </div>

Isso criará seu menu básico:

Agora você pode adicionar o CSS apropriado para estilizar o cabeçalho.

Adicione seu CSS na aba CSS, por exemplo

//Alinhe o menu ao logotipo do site
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //Você pode mover o menu para a esquerda, para o centro ou para a direita
    text-align: center; 
}

E comece a personalizar seu menu:

#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //e assim por diante
}

Dicas e truques

Exibir seu menu apenas para visitantes (ou apenas para usuários logados)

Você pode exibir o menu apenas para visitantes não registrados e ocultá-lo para seus usuários logados. Basta adicionar este display: none; dentro do seu CSS

#top-navbar {
    [...]
    display: none;
}

e adicionar uma nova regra:

.anon #top-navbar {
    display: block;
}

Você pode fazer o oposto invertendo as regras da propriedade display:

#top-navbar {
    [...]
    display: block;
}

.anon #top-navbar {
    display: none;
}

Dessa forma, apenas os usuários que já estão logados verão o menu

Exibir seu menu apenas para membros de um grupo

Isso funcionará apenas para grupos primários!

body:not(.primary-group-GROUP-NAME) #top-navbar {
  display: none;
}

Mude GROUP-NAME pelo nome do grupo que poderá ver o menu.

Abrir links em uma nova aba

No seu código HTML adicione a propriedade

target="_blank"

Por exemplo:

 <div>
   <span id="top-navbar-links">
     <a href="http://example.com" target="_blank">Home</a>
     [...]
   </span>
 </div>

Lembre-se de que links internos são permitidos (mesmo usando caminhos relativos) e que eles também podem ser abertos em abas externas.

 <div>
   <span id="top-navbar-links">
     [...]
     <a href="/c/site-feedback" target="_blank">Forums</a> 
   </span>
 </div>

---

Tópicos relacionados:

• Add a custom header with a dropdown menu