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 molti altri.
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 .grid-child {
flex-wrap: wrap;
}
@media (width <= 991.98px) {
.footer .grid-child {
flex-direction: unset;
}
}
.footer h3 {
font-size: 1.3rem;
}
Il piè di pagina è un elemento flex (ha la definizione display: flex; nel template) senza ulteriori specifiche. Il flusso standard su un elemento flessibile è quello di distribuire gli elementi figli in fila senza interrompersi su nuove righe (flex-flow: row nowrap; oppure flex-direction: row; flow-wrap: nowrap;). Poiché vogliamo visualizzare diversi moduli nel piè di pagina, dobbiamo assicurarci che si dispongano su più linee con la prima regola nel nostro codice. La regola all'interno della media query disimposta il cambiamento flex-direction 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: trovo la dimensione dell'header h3 troppo grande per il footer.
Footer1
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
- Creato: modulo personalizzato con testo (e un'emoji, perché in TinyMCE è possibile inserire emoji 😉)
Per tutti i moduli è necessario impostare lo stile del modulo su html5 nella Advanced Tab. 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 {
align-items: flex-start;
row-gap: 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:
footer .menu-horizontal {
flex-direction: row;
gap: 1rem;
align-items: center;
}Footer 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
- Store uno: modulo personalizzato con testo
- Store 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 {
background-color: #1d4555;
background-image: none;
}Impostare il colore di sfondo e rimuovere il gradiente definito in Cassiopea (immagine di sfondo: nessuna;). Questo è tutto 😄
Footer 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 {
background-color: #1d4555;
background-image: url('../images/the-background-image');
}e
.footer .menu-horizontal {
flex-direction: row;
gap: 1rem;
align-items: center;
}
.social {
justify-content: flex-end;
}L'immagine di sfondo può essere caricata nella cartella delle immagini all'interno del modello (media/templates/site/cassiopeia/images), che può essere fatto nel backend: System -> Site Templates -> Cassiopeia Details and Files -> New File all'interno della cartella immagini.
Ora abbiamo creato tre diverse sezioni di piè di pagina per il nostro sito web e con un po 'di creatività puoi crearne una tua.
Se vuoi aggiungere più spazio nella parte superiore del piè di pagina puoi aggiungere
.footer .grid-child {
padding-block-start: 5rem;
}Naturalmente si può giocare con le dimensioni per diversi dispositivi: 3 colonne nel desktop, 2 colonne nei tablet e 1 colonna sui cellulari. O qualunque cosa ti piaccia.
Bonus
Sai come posizionare il piè di pagina in fondo a una pagina, non importa quanti contenuti hai? In Cassiopea è già definito, ma di tanto in tanto trovo template che non sono ottimizzati per questo e in pagine con contenuti molto brevi il piè di pagina salta al centro del sito web e sembra strano.
Utilizzando flexbox è possibile spingere l'ultimo elemento verso il basso. Una versione molto semplificata della struttura di Cassiopea è:
<body>
<header></header>
<div class=”site-grid”></div>
<footer></footer>
</body>Il CSS per l'elemento corpo è:
body {
flex-direction: column;
display: flex;
min-height: 100vh;
position: relative;
} Ciò significa che l'intestazione, la griglia del sito (con il contenuto principale) e il piè di pagina verranno visualizzati uno sotto l'altro e l'altezza minima del corpo è l'altezza del display (100vh).
La "griglia del sito" ha una definizione importante:
.site-grid {
margin-bottom: auto;
}Questo in combinazione con la minima altezza del corpo spingerà sempre il piè di pagina verso il basso, non importa quanto breve sia il contenuto all'interno della griglia del sito. Lo stesso effetto può essere ottenuto con:
.footer {
margin-top: auto;
}Ulteriori approfondimenti
Tre anni fa Marc Dechèvre ha scritto un lungo articolo su Tips and Tricks per Cassiopeia. Al punto 4.4.3 descrive il modulo "Footer" e come modificarlo: https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks
Maggiori informazioni su Flexbox:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox
https://www.joshwcomeau.com/css/interactive-guide-to-flexbox
Alcuni articoli pubblicati sul Joomla Community Magazine rappresentano l'opinione personale o l'esperienza dell'Autore sul tema specifico e potrebbero non essere allineati alla posizione ufficiale del Progetto Joomla