Spinto verso il basso: 3 Brillante Footer Hacks con Codifica Minima

Nel Magazine abbiamo un sacco di articoli su come modificare diversi elementi in Cassiopea:

• Intestazione: Cassiopeia, il potente modello integrato di Joomla: Come modificare l'intestazione con la griglia css
• Menu: Crea il tuo sito Joomla: Porta colore nel tuo menu
• Moduli: Creazione di moduli Joomla a tutta larghezza all'interno del contenuto

e altri ancora.

Ma abbiamo dimenticato una parte importante di un sito web: Il piè di pagina, meglio conosciuto come "Footer".

Il piè di pagina non è solo l'ultimo elemento del sito web in cui possiamo inserire le voci di menu che non avremo nel menu principale, ma può anche essere il luogo in cui inserire maggiori informazioni su di te, sui tuoi prodotti o sulla tua azienda. È inoltre possibile includere alcuni elementi per interagire con i visitatori (ad esempio la registrazione alla newsletter).

Cassiopeia ha una sola posizione del modulo nell'elemento piè di pagina, ma combinando una buona selezione di parametri, alcune classi Bootstrap e alcune righe di codice CSS nel file user.css, puoi creare un piè di pagina straordinario per il tuo sito web. Qui vi mostrerò tre esempi. Ma prima alcune righe di CSS che dobbiamo aggiungere per far funzionare bene le cose:

CSS

Nel file user.css includiamo:

.footer h3 {

} 

Il piè di pagina è un elemento flex (ha la definizione

• nel modello) senza ulteriori specifiche. Il flusso standard su un elemento flessibile è quello di distribuire gli elementi figli in fila senza rompersi su nuove linee (
• oppure
• ). Poiché vogliamo visualizzare diversi moduli nel piè di pagina, dobbiamo assicurarci che si avvolgano su più linee con la prima regola nel nostro codice. La regola all'interno della media query disimposta il cambiamento di direzione flex nei display più piccoli di 992px, perché vogliamo avere più flessibilità utilizzando le classi Bootstrap. E la terza regola non è davvero necessaria, ma inclusa per motivi estetici personali: come trovo la dimensione del h3 troppo grande per il footer.
• visualizzazione: flessione;

flusso flessibile: riga nowrap;

direzione flessuosa: riga; avvolgimento a flusso: nowrap;

Piè di pagina 1

piè di pagina 1

Schermata di un piè di pagina con quattro moduli 

In questo esempio il piè di pagina ha lo sfondo Cassiopea originale (è un gradiente lineare con due colori blu/viola).
Abbiamo quattro moduli:
Informazioni su: modulo personalizzato con testo

Collegamenti rapidi: modulo menu

Seguici: modulo menu

Per tutti i moduli è necessario impostare lo stile del modulo su html5 nella scheda Avanzate. Questo ci consente di includere le classi CSS e rendere visibile il titolo del modulo (per i tre moduli sopra, nell'ultimo nascondiamo il titolo). Ciò è necessario perché lo stile standard del modulo della posizione del piè di pagina in Cassiopea è "nessuno".

Per il modulo "Informazioni" abbiamo impostato la dimensione Bootstrap su 6. "Collegamenti rapidi" e "Seguici" otteniamo la dimensione 3 e "Creato" la dimensione 12. Il parametro Bootstrap Size aggiungerà le classi CSS corrispondenti: col-md-6, col-md-3 o col-md-12 e otteniamo i nostri moduli distribuiti in modo corrispondente sul nostro piè di pagina.

Per avere un po' di spazio tra i tre moduli di cui sopra ho aggiunto la classe "px-2" come classe di modulo nelle impostazioni avanzate. Nel modulo "Creato" ho aggiunto le classi "text-center pt-3 border-top border-light-subtle".

• Per questo esempio abbiamo anche bisogno di una linea extra di CSS su user.css:
• .footer .grid-child {
• allineare i punti: flex-start;
• scarto tra le righe: 2rem;

}

Queste regole allineano i moduli alla parte superiore in modo che tutti i titoli siano alla stessa altezza e aggiungono uno spazio tra le righe (importante per la versione mobile del piè di pagina).

Per avere il piè di pagina bello anche su display più piccoli ho aggiunto la classe "col-12" a tutti i moduli, il che fa sì che i moduli prendano l'intera larghezza su display più piccoli di 768px.

Un ultimo trucco: per visualizzare orizzontalmente le icone dei social media ho aggiunto la classe "menu-orizzontale" alla classe Menu e ho aggiunto questa regola nel file user.css:

direzione flessuosa: riga;

lacuna: 1rem;

allineare i punti: centro;

• }
• Piè di pagina 2
• piè di pagina 2
• Screenshot del piè di pagina con sfondo verde e moduli
• In questo esempio cambieremo anche il colore di sfondo del piè di pagina.
• Abbiamo di nuovo quattro moduli:

Logo: modulo personalizzato con un'immagine

Conservare uno: modulo personalizzato con testo

Negozio due: modulo personalizzato con testo

Creato: modulo personalizzato con testo (lo stesso del piè di pagina 1)

Le classi nel campo Classe modulo sono le stesse del primo esempio: "px-2 col-12". La dimensione Bootstrap è impostata su 4 per i tre moduli di cui sopra.

Abbiamo bisogno delle tre regole generali in user.css e inoltre di due righe di codice per cambiare il colore di sfondo: 

.footer {

colore di sfondo: #1d4555;

immagine di sfondo: nessuna;

}

Impostare il colore di sfondo e rimuovere il gradiente definito in Cassiopea (immagine di sfondo: nessuna;). Questo è tutto ⁇

Piè di pagina 3

Screenshot del piè di pagina con un'immagine di sfondo e moduli

Qui abbiamo alcuni moduli in più e useremo un'immagine come sfondo.

Abbiamo sei moduli:

Logo: modulo personalizzato con un'immagine o un testo 

Veicolo: modulo menu

Informazioni su: modulo menu

Per saperne di più: modulo menu

Collegamenti rapidi: modulo menu

Seguici: modulo menu

I quattro moduli nella riga superiore ottengono gli stessi parametri e classi di prima. La dimensione Bootstrap è impostata su 3.

Per gli altri due moduli utilizziamo le classi "col-12 px-2 pt-3 border-top border-light-subtle" e Bootstrap Size 6. Inoltre aggiungiamo la classe di menu "menu-horizontal" in entrambi e anche "social" in "Follow us". Quindi aggiungiamo i seguenti CSS alle regole generali:

.footer {

immagine di sfondo: url('../images/the-background-image'); colore di sfondo: #1d4555;

}

e

.footer .menu-orizzontale {