Pi footer responsive

[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)]

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.