Footer responsivo facile

[Discourse]

	Riepilogo	Easy Responsive Footer ti consentirà di creare un footer completamente responsivo utilizzando solo testo semplice.
	Anteprima	Anteprima su Discourse Theme Creator
	Link al repository	https://github.com/discourse/Discourse-easy-footer
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché questo è un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, Contribute > Bug, Contribute > UX e Contribute > Feature possono essere inviate nelle rispettive categorie qui su Meta, con l’aggiunta del tag appropriato per il componente del tema. Clicca su uno dei link sottostanti per iniziare.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Desktop

Mobile

Impostazioni

Nome	Descrizione
heading	Testo per l’intestazione nel footer - puoi utilizzare 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
small links	Link piccoli nella parte inferiore del footer come Termini di servizio e Privacy
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 nella pagina che richiede l’accesso (vale solo se il tuo sito è privato)
svg icons	Elenco di icone FontAwesome 7 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 utilizzare 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 dei link

Aggiungi sezioni di link. Il numero ideale di sezioni è sei. Un elemento per riga in questo 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 questo ordine:
Genitore, testo, URL, target, titolo
È consigliabile mantenere un numero simile di link sotto ogni sezione
Genitore: il nome della sezione genitore sotto cui appare questo link. Utilizza il valore text dall’elenco sopra
Testo: il testo che appare per questo link
URL: il percorso a cui punta questo elemento. Puoi utilizzare anche percorsi relativi.
Target: Scegli se questo elemento si aprirà in una nuova scheda o nella stessa scheda. Lascia vuoto 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. Link piccoli

Puoi aggiungere link piccoli nella parte inferiore del footer, come Termini di servizio e Privacy. Un elemento per riga in questo ordine:
Testo, URL, target
Testo: il testo che appare per il link piccolo
URL: il percorso del link
Target: Lascia vuoto 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 per il link
Target: Lascia vuoto per aprire il link in una nuova scheda e usa “self” per aprirlo nella stessa scheda

Note

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

2. Questo componente utilizzerà la palette di colori del tuo tema per generare i colori utilizzati per gli elementi al suo interno. Tuttavia, tutti gli elementi hanno classi uniche aggiunte nel caso in cui tu voglia sovrascrivere qualcosa.

3. Poiché questo componente utilizza le impostazioni del tema, significa che in futuro potrò aggiornarlo per correggere o migliorare qualcosa, e i dati che hai inserito non andranno persi

Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Pro, Business e Enterprise.

[Johani (Joe)]

Ho applicato alcune correzioni.

Principali modifiche:

• il componente ora utilizza variabili CSS, quindi è compatibile con la modalità scura

• alcune correzioni alle query media per risolvere il bug segnalato da @mbauman

• aggiunta un’impostazione che consente di controllare se il piè di pagina deve essere visualizzato nelle pagine che richiedono l’accesso

  

Easy Footer v2.3 (#7)

@rolando

Ho reso più ampia la mia classe .wrap (1200px) tramite query media, in modo che dopo una certa risoluzione il forum diventi più largo. Se attivo il piè di pagina responsivo, la classe .wrap diventa più stretta (1100px), ma solo per la “parte della bacheca” e non per .d-header .wrap né per .footer, che rimangono a 1200px. Non appena disattivo il piè di pagina responsivo, tutto torna più ampio (1200px) come previsto.

La causa qui è la specificità CSS. Il tuo CSS seleziona .wrap e funziona, ma questo componente include anche del CSS che seleziona #main-outlet e gli aggiunge alcune proprietà per mantenere il piè di pagina in basso anche nelle pagine brevi.

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

Il selettore #main-outlet ha una specificità maggiore rispetto al tuo selettore .wrap — poiché si basa su un ID — quindi sovrascrive i tuoi stili.

Puoi risolvere aggiungendo questo CSS:

#main {
  #main-outlet {
    width: 1200px; // o la larghezza che preferisci
  }
}

@Edward_Legaspi

Ciao. Esiste un modo per limitare il numero di colonne del piè di pagina a 3?

Certo, rimuovi tutte le colonne extra che non ti servono nelle impostazioni e otterrai tre colonne.

@PoojaPatel

Dopo l’aggiornamento ricevo un errore nella console di Chrome come indicato di seguito.

Non riesco a riprodurre questo problema, ma l’errore suggerisce che le tue impostazioni non sono corrette. Puoi verificare di nuovo e assicurarti di aver seguito le istruzioni sotto ogni impostazione? Se il problema persiste, puoi condividere un link al sito dove riscontri l’errore?

---

Ho fatto un po’ di pulizia e ho eliminato le risposte relative ai bug che verranno risolti non appena aggiornerai il componente. Se il tuo problema persiste, sentiti libero di pubblicare di nuovo a riguardo.

[dadberg (Interstellar)]

Mi chiedo se il testo dell’intestazione (This is a header) all’interno di [Easy Footer Theme Component by Joe] possa essere sostituito con un logo.

Ho provato a esportare il componente per modificare i file hbs, ma non sono riuscito. Credo di aver bisogno di qualche indizio.

Qualsiasi suggerimento è molto apprezzato

[dax (Daniela)]

A seconda di ciò che si desidera fare, è possibile provare semplicemente qualcosa di simile a questo:

• nelle impostazioni del tema Easy responsive footer eliminare il testo all’interno dell’impostazione Blurb. Se si desidera, è possibile eliminare anche il testo all’interno dell’impostazione Heading.

• creare un nuovo componente tema e aggiungerlo nella scheda Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*modificare le impostazioni sottostanti in base alle dimensioni del proprio logo*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

e il risultato sarà qualcosa di simile a questo:

[dadberg (Interstellar)]

Risolto!

La mia fiducia nell’ecosistema open source è stata inizialmente rafforzata da persone eccezionali come te.

[Jcava5 (John)]

Dovrebbe esserci un’opzione per personalizzare i colori dello sfondo e del testo tramite CSS. Di default, non corrisponde all’intestazione.

Altrimenti funziona benissimo! Grazie!

[thaidb]

Ciao Joe, possiamo aggiungere un altro widget qui?

[b481]

Ciò ha portato alla visualizzazione del logo nel blurb:before dei risultati di ricerca, anche dopo averlo specificato nel componente

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

Esiste un modo per assicurarsi che non appaia nei risultati di ricerca, ma rimanga visibile nel piè di pagina?

[littleviolette]

Grazie per il fantastico footer! Ho avuto problemi a mostrare l’icona di TikTok di Font Awesome. Ho provato ad aggiungere fab-tiktok, fa-tiktok, fas-tiktok e tiktok alle impostazioni delle icone SVG, ma nessuna di esse visualizza il logo di TikTok.

Grazie per il tuo aiuto!

[bekircem]

Voglio modificare il limite di 25 caratteri per il titolo. Posizionerò il titolo con CSS. Qual è il modo più semplice per farlo?

[keegan (Keegan George)]

@bekircem
Superare il limite di caratteri potrebbe causare problemi, ma puoi provare:

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

.custom-footer .first-box .heading::after {
   content: "Questo è un testo più lungo di 25 caratteri";
   visibility: visible;
   display: block;
}

Tuttavia, impostando visibility: hidden lo spazio bianco rimane. A seconda delle dimensioni del tuo titolo, puoi invece provare questa soluzione:

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

.custom-footer .first-box .heading::after {
   content: "Questo è un testo più lungo di 25 caratteri";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

È possibile aggiungere testi alle sezioni di link senza attributo href?

[IAmGav (Gavin Perch)]

Basta aggiungere un # dove va l’URL

[bekircem]

In questo caso appare comunque come un URL cliccabile. C’è un modo per aggiungerlo senza ottenere il tag a?

[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.