Poussé au fond: 3 Brilliant Footer Hacks avec un codage minimal

Dans le magazine, nous avons beaucoup d'articles sur la modification des différents éléments de Cassiopée:

• En-tête: Cassiopeia, le puissant modèle intégré de Joomla: Comment modifier l'en-tête avec la grille css
• Menu : Créez votre site web Joomla: Apportez de la couleur à votre menu
• Modules : Création de modules Joomla en pleine largeur à l'intérieur du contenu

et un peu plus.

Mais nous avons oublié une partie importante d'un site web: le pied de page.

Le pied de page n’est pas seulement le dernier élément du site web où nous pouvons mettre les éléments de menu que nous n’aurons pas dans le menu principal, il peut également être l’endroit où mettre plus d’informations sur vous, vos produits ou votre entreprise. Vous pouvez également inclure certains éléments pour interagir avec les visiteurs (par exemple, l'inscription à la newsletter).

Cassiopeia n'a qu'une seule position de module dans l'élément footer, mais en combinant une bonne sélection de paramètres, quelques classes Bootstrap et quelques lignes de code CSS dans votre fichier user.css, vous pouvez créer un pied de page incroyable pour votre site Web. Ici, je vais vous montrer trois exemples. Mais d'abord quelques lignes de CSS que nous devons ajouter pour que les choses fonctionnent bien:

CSS

Dans le fichier user.css, nous incluons:

Le pied de page est un élément flex (a la définition affichage : flex; dans le modèle) sans autres spécifications. Le flux standard sur un élément flex consiste à répartir les éléments enfants dans une rangée sans casser sur de nouvelles lignes (flex-flow : ligne nowrap; ou flex-direction : ligne; enveloppe de flux: nowrap;). Puisque nous voulons afficher plusieurs modules dans le pied de page, nous devons nous assurer qu'ils s'enroulent sur plusieurs lignes avec la première règle de notre code. La règle à l'intérieur de la requête média désactive le changement de direction flexible dans les écrans inférieurs à 992px, car nous voulons avoir plus de flexibilité à l'aide des classes Bootstrap. Et la troisième règle n'est pas vraiment nécessaire, mais incluse pour des raisons cosmétiques personnelles: car je trouve la taille du h3 trop grande pour le pied de page.

Pied de page 1

Capture d'écran d'un pied de page avec quatre modules

Dans cet exemple, le pied de page a l'arrière-plan Cassiopée d'origine (il s'agit d'un gradient linéaire avec deux couleurs bleu / violet).

Nous avons quatre modules:

• À propos de: module personnalisé avec texte
• Liens rapides: module de menu
• Suivez-nous: module de menu
• Créée: module personnalisé avec du texte (et un emoji, car dans TinyMCE il est possible d'insérer des emojis ⁇ )

Pour tous les modules, nous devons définir le style du module sur html5 dans l’onglet Avancé, ce qui nous permet d’inclure des classes CSS et de rendre visible le titre du module (pour les trois modules ci-dessus, dans le dernier, nous masquons le titre). Cela est nécessaire parce que le style de module standard de la position du pied de page dans Cassiopeia est «aucun».

Pour le module «À propos», nous définissons la taille Bootstrap sur 6. «Liens rapides» et «Suivez-nous» obtenez la taille 3 et «Créez» la taille 12. Le paramètre Bootstrap Size ajoutera les classes CSS correspondantes: col-md-6, col-md-3 ou col-md-12 et nous obtenons nos modules répartis en conséquence sur notre pied de page.

Afin d’avoir un peu d’espace entre les trois modules ci-dessus, j’ai ajouté la classe «px-2» en tant que classe de module dans les paramètres avancés. Dans le module «Créé», j’ai ajouté les classes «text-center pt-3 border-top border-light-subtle».

Pour cet exemple, nous avons également besoin d'une ligne supplémentaire de CSS sur user.css:

Ces règles alignent les modules vers le haut de sorte que tous les titres sont à la même hauteur et ajoute un écart entre les lignes (important pour la version mobile du pied de page).
Pour que le pied de page soit également beau sur les écrans plus petits, j’ai ajouté la classe «col-12» à tous les modules, ce qui fait que les modules prennent toute la largeur sur les écrans plus petits que 768px.
Une dernière astuce: pour afficher horizontalement les icônes des médias sociaux, j’ai ajouté la classe «menu-horizontal» à la classe Menu et j’ai ajouté cette règle dans user.css:

Pied de page 2

Capture d'écran du pied de page avec fond vert et modules

Dans cet exemple, nous allons également changer la couleur d'arrière-plan du pied de page.

Nous avons à nouveau quatre modules:

• Logo : module personnalisé avec une image
• Magasin 1 : module personnalisé avec texte
• Magasin deux: module personnalisé avec texte
• Créée: module personnalisé avec texte (le même que dans le pied de page 1)

Les classes dans le champ Classe de module sont les mêmes que dans le premier exemple: «px-2 col-12». La taille Bootstrap est définie sur 4 pour les trois modules ci-dessus.
Nous avons besoin des trois règles générales dans user.css et de deux lignes de code supplémentaires pour changer la couleur de l'arrière-plan:

Nous définissons la couleur d'arrière-plan et supprimons le gradient défini dans Cassiopeia (image de fond: aucune ;). C'est tout ⁇

Pied de page 3

Capture d'écran du pied de page avec une image de fond et des modules

Ici, nous avons d'autres modules et nous allons utiliser une image comme arrière-plan.

Nous avons six modules:

• Logo : module personnalisé avec une image ou un texte
• Véhicule : module de menu
• À propos de: module de menu
• En savoir plus: module de menu
• Liens rapides: module de menu
• Suivez-nous: module de menu

Les quatre modules de la rangée supérieure obtiennent les mêmes paramètres et classes qu'auparavant. La taille Bootstrap est définie sur 3.

Pour les deux autres modules, nous utilisons les classes «col-12 px-2 pt-3 border-top border-light-subtle» et la taille Bootstrap 6. En outre, nous ajoutons la classe de menu «menu-horizontal» dans les deux et aussi «social» dans «Suivez-nous».

Ensuite, nous ajoutons les CSS suivants aux règles générales:

et

L'image d'arrière-plan peut être téléchargée dans le dossier images à l'intérieur du modèle (media/templates/site/cassiopeia/images), ce qui peut être fait dans le backend: Système -> Modèles de site -> Détails et fichiers Cassiopeia -> Nouveau fichier dans le dossier images.

Maintenant, nous avons créé trois sections de pied de page différentes pour notre site Web et avec un peu de créativité, vous pouvez créer le vôtre.

Si vous souhaitez ajouter plus d'espace en haut du pied de page, vous pouvez ajouter

Bien sûr, vous pouvez jouer avec les tailles pour différents appareils: 3 colonnes dans le bureau, 2 colonnes dans les tablettes et 1 colonne sur les mobiles. Ou ce que tu veux.

Bonus

Savez-vous comment pousser le pied de page au bas d'une page, peu importe la quantité de contenu que vous avez? Dans Cassiopeia, il est déjà défini, mais de temps en temps, je trouve des modèles qui ne sont pas optimisés pour cela et dans les pages avec un contenu très court, le pied de page saute au milieu du site et semble bizarre.

En utilisant flexbox, il est possible de pousser le dernier élément vers le bas. Une version très simplifiée de la structure de Cassiopée est:

Le CSS pour l'élément body est:

Cela signifie que l'en-tête, le site-grid (avec le contenu principal) et le pied de page seront affichés l'un en dessous de l'autre et que la hauteur minimale du corps est la hauteur de votre écran (100vh).

Le «site-grid» a une définition importante:

Ceci en combinaison avec la hauteur minimale du corps poussera toujours le pied de page vers le bas, peu importe à quel point le contenu à l'intérieur du site-grid est court. Le même effet peut être obtenu avec:

Autres lectures

Il y a trois ans, Marc Dechèvre a écrit un long article sur Trucs et Astuces pour Cassiopée. En ce qui concerne le point 4.4.3, il décrit le module «Footer» et la manière de le modifier: https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks

En savoir plus sur 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

Certains articles publiés sur le Joomla Community Magazine représentent l'opinion personnelle ou l'expérience de l'auteur sur le sujet spécifique et peuvent ne pas être alignés sur la position officielle du projet Joomla.