Easy Responsive Footer

[Discourse]

|||
-|-|-|
| Riepilogo | Easy Responsive Footer ti permetterà di creare un footer completamente responsive usando solo testo semplice.
| | Anteprima | Anteprima su Discourse Theme Creator |
| Link al Repository | \u003chttps://github.com/discourse/Discourse-easy-footer\u003e
|Nuovo per i Temi di Discourse? | Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

Poiché si tratta di un #componente-tema #ufficiale mantenuto dal team di Discourse, #supporto, Bug, UX e richieste di #funzionalità possono essere effettuate nelle rispettive categorie qui su Meta, e taggate con il tag appropriato del componente del tema. Clicca su un link qui sotto per avviarne uno.

\u003ckbd\u003e \u0026nbsp;Supporto \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Bug \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;UX \u003c/kbd\u003e \u003ckbd\u003e \u0026nbsp;Funzionalità\u003c/kbd\u003e

Funzionalità

Desktop

Mobile

Impostazioni

Nome	Descrizione
heading	Testo per l’intestazione nel footer - puoi usare il nome del tuo sito ad esempio - Lunghezza massima 25 caratteri
blurb	Inserisci una breve descrizione della tua community - Lunghezza massima 180 caratteri
sections	Sezioni da visualizzare nel footer
social links	Link social che desideri aggiungere al footer
show footer on login required page	Seleziona questa impostazione se desideri che il footer venga visualizzato sulla pagina di accesso richiesto (si applica solo se il tuo sito è privato)
svg icons	Elenco delle icone FontAwesome 5 utilizzate nell’impostazione dei link social sopra.

Ci sono sei impostazioni in questo componente che ti aiuteranno a configurarlo facilmente

1. Intestazione

Testo per l’intestazione nel footer - puoi usare il nome del tuo sito ad esempio - Lunghezza massima 25 caratteri

2. Descrizione

una breve descrizione della tua community - Lunghezza massima 180 caratteri

3. Sezioni di link

Aggiungi sezioni di link. Il numero ideale di sezioni è sei. Un elemento per riga in quest’ordine: Testo, titolo
Testo: ciò che appare nel footer
Titolo: il testo che appare quando si passa il mouse sull’elemento.

4. Link

Aggiungi link alle sezioni di link. Un elemento per riga in quest’ordine:
Padre, testo, URL, target, titolo
È una buona idea mantenere simile il numero di link sotto ogni sezione
Padre: il nome della sezione padre sotto cui appare questo link. Usa il valore testo dall’elenco sopra
Testo: il testo che appare per questo link
URL: il percorso a cui punta questo elemento. Puoi usare anche percorsi relativi.
Target: Scegli se questo elemento si aprirà in una nuova scheda o nella stessa scheda. Usa blank per aprire il link in una nuova scheda, o usa self per aprirlo nella stessa scheda.
Titolo: il testo che appare quando si passa il mouse sul link.

5. Piccoli link

Puoi aggiungere piccoli link in fondo al footer come Termini di Servizio e Privacy. Un elemento per riga in quest’ordine:
Testo, URL, target
Testo: Il testo che appare per il piccolo link
URL: Il percorso del link
Target: Usa blank per aprire il link in una nuova scheda e usa self per aprirlo nella stessa scheda

6. Link social

Inserisci i link social che desideri aggiungere al footer in questo formato:
provider, titolo, URL, target
Provider: è il nome del provider come Facebook o Twitter
Titolo: Il testo che appare quando si passa il mouse sul link
URL: Il percorso che desideri abbia il link
Target: Usa blank per aprire il link in una nuova scheda e usa self per aprirlo nella stessa scheda

Note

1. Ho lasciato gli elementi segnaposto come predefiniti per il componente in modo che tu possa vedere facilmente come dovrebbero apparire le tue impostazioni.

2. Questo componente utilizzerà lo schema colori del tuo tema per generare i colori utilizzati per gli elementi al suo interno, ma tutti gli elementi hanno classi univoche aggiunte nel caso in cui tu voglia sovrascrivere qualcosa.

3. Poiché questo componente utilizza le impostazioni del tema, significa che posso aggiornarlo in futuro per correggerlo o migliorarlo e i dati che inserisci non andrebbero persi

\u003cbr\u003e

\u003e:discourse2: Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani 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)]

Depending on what you want to do, you can simply try something like this:

• in the Easy responsive footer theme settings delete the text inside the Blurb setting. If you want you can delete even the text inside the Heading setting.

• create a new theme component and add in the Common > CSS tab

  .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*change the settings below based on the size of your logo*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

and the result will be something like this:

[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

C’è un modo per aggiungere senza ottenere il tag a?

Puoi aggiungere questo CSS al tuo tema da qualche parte

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

[pfaffman (Jay Pfaffman)]

Ho inviato questo:

Fix: add pluginId to modifyClass

Ciò dovrebbe correggere una deprecazione con pluginId mancante. Non l’ho testato , ma mi sembra corretto.

MODIFICA: Ma non è affatto corretto.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Se aggiungo quanto segue… “Community, Tags List, /tags, self, List of all Tags” … viene visualizzata una linea orizzontale nel frontend. Se rimuovo lo spazio tra “Tags List” e lo cambio in “TagsList”, la HR scompare.

[mkschulze (M. Schulze)]

Ciao, ho due problemi con i collegamenti social e le icone Fontawesome.

1. Tento di impostare altre icone Fontawesome 5 nell’area Social, ma non vengono visualizzate.
   Vorrei <i>

2. Ho impostato il collegamento GitHub e l’icona viene già visualizzata sulla pagina, anche se in realtà non ho aggiunto l’icona nell’elenco delle icone svg.

MODIFICA: ho risolto semplicemente usando il nome dell’icona “home”

[AquaL1te]

Quando si utilizza questo componente tematico sul mio telefono, la larghezza non è impostata sulla larghezza dello schermo. La larghezza si estende, quasi fino alle dimensioni di un monitor desktop.

Il test può essere eseguito qui: https://forum.tzm.community/

Assicurati di aprirlo su un telefono (o usa l’opzione di debug nel tuo browser, in Firefox puoi attivare il bug utilizzando il profilo Linux Galaxy Note 20).

[dax (Daniela)]

Il componente è stato corretto. Devi aggiornarlo.