Easy Responsive Footer

[Discourse]

|||
-|-|-|
| Resumo | O Rodapé Responsivo Fácil permitirá que você crie um rodapé totalmente responsivo usando apenas texto simples.
| | Pré-visualização | Pré-visualizar no Criador de Temas do Discourse |
| Link do Repositório | https://github.com/discourse/Discourse-easy-footer
|Novo em Temas do Discourse? | Guia para iniciantes sobre como usar Temas do Discourse

Instalar este componente de tema

Como este é um componente de tema #oficial mantido pela equipe do Discourse, #suporte, Bug, UX e solicitações de Feature podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar um.

 Suporte  Bug  UX  Recurso

Recursos

Desktop

Mobile

Configurações

Nome	Descrição
heading	Texto para o título no rodapé - você pode usar o nome do seu site, por exemplo - Comprimento máximo de 25 caracteres
blurb	Insira um breve resumo sobre sua comunidade - Comprimento máximo de 180 caracteres
sections	Seções a serem exibidas no rodapé
social links	Links sociais que você gostaria de adicionar ao rodapé
show footer on login required page	Marque esta configuração se quiser que o rodapé seja exibido na página de login obrigatório (aplica-se apenas se o seu site for privado)
svg icons	Lista de ícones FontAwesome 5 usados na configuração de links sociais acima.

Existem seis configurações neste componente que ajudarão a configurá-lo facilmente

1. Título

Texto para o título no rodapé - você pode usar o nome do seu site, por exemplo - Comprimento máximo de 25 caracteres

2. Resumo

um breve resumo sobre sua comunidade - Comprimento máximo de 180 caracteres

3. Seções de Links

Adicione seções de links. O número ideal de seções é seis. Um item por linha nesta ordem: Texto, título
Texto: o que aparece no rodapé
Título: o texto que aparece quando o item é passado o mouse.

4. Links

Adicione links às seções de links. Um item por linha nesta ordem:
Pai, texto, URL, destino, título
É uma boa ideia manter o número de links sob cada seção semelhante
Pai: o nome da seção pai sob a qual este link é exibido. Use o valor texto da lista acima
Texto: o texto que aparece para este link
URL: o caminho para o qual este item se vincula. Você também pode usar caminhos relativos.
Destino: Escolha se este item será aberto em uma nova aba ou na mesma aba. Use blank para abrir o link em uma nova aba, ou use self para abri-lo na mesma aba.
Título: o texto que aparece quando o link é passado o mouse.

5. Pequenos Links

Você pode adicionar pequenos links na parte inferior do rodapé, como Termos de Serviço e Privacidade. Um item por linha nesta ordem:
Texto, URL, destino
Texto: O texto que aparece para o pequeno link
URL: O caminho do link
Destino: Use blank para abrir o link em uma nova aba e use self para abri-lo na mesma aba

6. Links Sociais

Insira os links sociais que você gostaria de adicionar ao rodapé neste formato:
provedor, título, URL, destino
Provedor: é o nome do provedor como Facebook ou Twitter
Título: O texto que aparece quando o link é passado o mouse
URL: O caminho que você gostaria que o link tivesse
Destino: Use blank para abrir o link em uma nova aba e use self para abri-lo na mesma aba

Notas

1. Deixei os itens de espaço reservado como padrão para o componente para que você possa ver facilmente como suas configurações devem parecer.

2. Este componente usará o esquema de cores do seu tema para gerar as cores usadas para os elementos nele, mas todos os elementos têm classes exclusivas adicionadas a eles caso você queira substituir algo.

3. Como este componente usa configurações de tema, isso significa que posso atualizá-lo no futuro para corrigir ou melhorar e os dados que você inserir não serão perdidos

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.

[Johani (Joe)]

I pushed some fixes.

Key changes:

• the component now uses CSS variables, so it’s dark-mode compatible

• some fixes to media queries to fix the bug @mbauman reported

• added a setting that allows you to control whether or not the footer is displayed on login-required pages

  

Easy Footer v2.3 (#7)

@rolando

i have made my .wrap wider (1200px) with media queries so that after a certain resolution it makes the forum wider. if i enable the responsive footer it makes the .wrap narrower (1100px) but only the “board part” and not the .d-header .wrap nor the .footer which stay at (1200px). as soon as i disable the responsive footer everything looks wider (1200px) as intended.

The cause here is CSS specificity. Your CSS targets .wrap, and it works, but this component also has some CSS that targets #main-outlet and adds some properties to it to keep the footer at the bottom even on short pages.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

The #main-outlet selector is more specific than your .wrap selector - because it’s id-based, so it overrides your styles.

You can fix this by adding this CSS

#main {
  #main-outlet {
    width: 1200px; // or whatever width you want to use
  }
}

@Edward_Legaspi

Hi. Is there a way to limit the number of footer columns to 3?

Sure, remove all the extra columns that you don’t need in the settings, and you’ll get three columns.

@PoojaPatel

After update getting error in chrome console that as below.

I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that you’ve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?

---

I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.

[dadberg (Interstellar)]

I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.

I’ve tried exporting the component to alter hbs files, but I’ve failed, I think I need some hints.

Any insight is much appreciated

[dax (Daniela)]

Dependendo do que você deseja fazer, você pode simplesmente tentar algo como isto:

• nas configurações do tema Easy responsive footer, exclua o texto dentro da configuração Blurb. Se desejar, você pode até excluir o texto dentro da configuração Heading.

• crie um novo componente de tema e adicione na aba Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*altere as configurações abaixo com base no tamanho do seu logotipo*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

e o resultado será algo como isto:

[dadberg (Interstellar)]

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

[Jcava5 (John)]

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

[huynhthai824 (Sora &\)]

hello Joe, can weadd more widget same here

[b481]

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

[littleviolette]

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

[bekircem]

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

[keegan (Keegan George)]

@bekircem
Going beyond the character limit may break some things, but you can try:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

Is that possible to add texts to link sections without href attribute?

[IAmGav (Gavin Perch)]

Just add an # where the url goes

[bekircem]

In this case it still appears as a clickable url. Is there a way to add without getting the a tag?

[Johani (Joe)]

@bekircem

Existe uma maneira de adicionar sem obter a tag a?

Você pode adicionar este CSS ao seu tema em algum lugar

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

Eu submeti isto:

Fix: add pluginId to modifyClass

Isso deve corrigir uma depreciação com pluginId ausente. Eu não testei , mas parece certo para mim.

EDIT: Mas não está certo de forma alguma.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Se eu adicionar o seguinte… “Community, Tags List, /tags, self, List of all Tags”… uma linha horizontal é exibida no frontend. Se eu remover o [espaço] entre “Tags List” e alterá-lo para “TagsList”, o HR desaparece.

[mkschulze (M. Schulze)]

Olá, tenho dois problemas com os links sociais e os ícones Fontawesome.

1. Tento configurar outros ícones Fontawesome 5 na área Social, mas eles não aparecem.
   Quero <i></i>

2. Configurei o link do GitHub e ele já mostra o ícone na página, embora eu realmente não tenha adicionado o ícone na lista de ícones svg.

EDIT: Resolvi apenas usando o nome do ícone “home”

[AquaL1te]

Ao usar este componente de tema no meu telefone, a largura não está definida para a largura da tela. A largura se estende, quase ao tamanho de um monitor de desktop.

O teste pode ser feito aqui: https://forum.tzm.community/

Certifique-se de abri-lo em um telefone (ou use a opção de depuração em seu navegador, no Firefox você pode acionar o bug usando o perfil Linux do Galaxy Note 20).

[dax (Daniela)]

O componente foi corrigido. Você precisa atualizá-lo.