 |
Resumo | Banner Featured Links permite que você crie um banner de links. |
 |
Prévia | Theme Creator |
 |
Repositório | GitHub - Arkshine/discourse-banner-featured-links · GitHub |
 |
Guia de Instalação | Como instalar um tema ou componente de tema |
 |
Novo em Temas do Discourse? | Guia para iniciantes sobre o uso de Temas do Discourse |
Instale este componente de tema
Resumo
Banner Featured Links permite que você crie um banner de links.
Ele oferece uma ampla gama de opções de personalização.
É um recurso inspirado no fantástico tema Discourse “Meta Branded”.
Recursos
A aparência padrão – usa a cor do tema.
O botão pode ser estilizado separadamente:
Você pode colocar os links em vários lugares através da configuração plugin outlet.
Uma lista de locais comuns é fornecida na descrição.
Por exemplo, se você quiser imitar o tema Meta Brand, use o outlet search-banner-below-input. Isso pressupõe que você instalou o componente Search Banner.
Detalhes
O estilo atual pode ser alcançado com as seguintes configurações:
Incentivo você a tentar seu próprio estilo!
Configurações
Geral
| Nome | Descrição |
|---|---|
links |
Links de texto a serem exibidos no cabeçalho. |
show_for_members |
Exibir os links para usuários logados. |
show_for_anon |
Exibir os links para usuários anônimos. |
display_on_mobile |
Exibir os links em dispositivos móveis. |
display_on_desktop |
Exibir os links em computadores desktop. |
display on homepage |
Exibir os links na página inicial. |
url must contain |
Insira os caminhos que devem exibir o banner. Adicione * ao final do caminho como um curinga. |
plugin outlet |
O local para exibir os links.Locais Comunsabove-main-containerabove-site-headerafter-headerbefore-header-panelbefore-list-areabefore-topic-listbelow-site-headerheader-list-container-bottomtopic-above-post-streamComponente Search Banner: search-banner-below-headlinesearch-banner-below-input |
Configuração links:
| Nome | Descrição |
|---|---|
| Ícone | O ícone ou emoji do FontAwesome a ser exibido para os links.AtalhosWindows: Win + .. Mac: Cmd + Ctrl + Space ChromeOS: Launch + Shift + Space |
| Título | O título do link. |
| URL | A URL para onde o link aponta. |
| Target | Abre o documento vinculado:_blank: em uma nova janela ou aba (este é o padrão)_self: no mesmo quadro onde foi clicado_parent: no quadro pai_top: no corpo completo da janela. |
Você também pode estilizar por botão. Isso substituirá o estilo global.
| Nome | Descrição |
|---|---|
| Largura | A largura do botão. |
| Fonte | A fonte do botão. |
| Arredondamento | A quantidade de arredondamento a ser aplicada ao botão. |
| Fundo | A cor de fundo do botão. |
| Fundo ao Passar o Mouse` | A cor de fundo do botão ao passar o mouse. |
| Cor` | A cor do texto cor do botão. |
| Cor ao Passar o Mouse` | A cor do texto cor do botão ao passar o mouse. |
| Borda | A borda do botão. |
| Borda ao Passar o Mouse | A borda do botão ao passar o mouse. |
| Sombra | A sombra do botão. |
| Classe CSS | Uma classe CSS personalizada a ser aplicada ao botão. Útil se você quiser estilizar o botão de forma diferente e as configurações não forem suficientes. Você pode direcionar com .banner-featured-links__link.sua-classe {} |
Estilização Global
Personalize o espaçamento e a aparência padrão dos links.
Você pode substituir a estilização de botão para cada link individualmente.
Estilização do Contêiner de Botões
Personalize o contêiner dos links.
| Nome | Descrição |
|---|---|
buttons wrapper max width |
A largura máxima do contêiner de botões. |
buttons wrapper margin |
A margem do contêiner de botões. |
mobile buttons wrapper max width |
A largura máxima do contêiner de botões em dispositivos móveis. |
mobile buttons wrapper margin |
A margem do contêiner de botões em dispositivos móveis. |
Espaçamento dos Botões & Fonte do Texto
Personalize o espaçamento dos botões e o tamanho da fonte do texto.
| Nome | Descrição |
|---|---|
buttons justify |
Como distribuir o espaço entre e ao redor dos links. |
buttons gap |
O espaçamento entre os botões. |
buttons font |
A fonte dos botões. |
mobile buttons justify |
Como distribuir o espaço entre e ao redor dos links em dispositivos móveis. |
mobile buttons gap |
O espaçamento entre os botões em dispositivos móveis. |
mobile buttons direction |
A direção dos botões em dispositivos móveis. |
mobile buttons font |
A fonte dos botões em dispositivos móveis. |
Estilização de Botão
Personalize a aparência padrão dos botões.
| Nome | Descrição |
|---|---|
button width |
A largura do botão. |
button padding |
O preenchimento do botão. |
button rounding |
A quantidade de arredondamento a ser aplicada ao botão. |
button background |
A cor de fundo do botão. |
button background hover |
A cor de fundo do botão ao passar o mouse. |
button color |
A cor do texto cor do botão. |
button colo hover |
A cor do texto cor do botão ao passar o mouse. |
button border |
A borda do botão. |
button border hover |
A borda do botão ao passar o mouse. |
button shadow |
A sombra do botão. |
Personalização Avançada
Você pode usar o seguinte CSS para personalizar ainda mais:
.banner-featured-links {
&__wrapper {
}
&__wrapper-links {
}
&__link {
}
}
Se você fornecer uma personalização por botão, pode fornecer um nome de classe na configuração CSS Classname.
Em seguida, você pode direcionar desta forma:
.banner-featured-links {
&__link.minha-classe {
}
}
Links Úteis
- Variáveis CSS do núcleo do Discourse: discourse/app/assets/stylesheets/color_definitions.scss at main · discourse/discourse · GitHub
”,“text”:"Join our Champion Program! ",“url”:“
”, “text”=>“New Widgets”, “target”=>“_self”, “button_color_hover”=>“
.
