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:

.footer .grid-child { 

flex-wrap : enveloppe; flex-direction : désamorcée; }} @media (largeur <= 991.98px) { }.footer .grid-child {

.footer h3 {

}

Le pied de page est un élément flex (a la définition

• 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 (
• ou
• ). 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.
• affichage : flex;

flex-flow : ligne nowrap;

flex-direction : ligne; enveloppe de flux: nowrap;

Pied de page 1

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

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:
• .footer .grid-child {
• aligner les points: flex-start;
• écart de ligne: 2rem;

}

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:

flex-direction : ligne;

écart: 1rem;

aligner les points: centre;

• }
• Pied de page 2
• 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: 

.footer {

couleur de fond: #1d4555;

image de fond: néant;

}

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:

.footer {

image de fond: url('../images/the-background-image'); couleur de fond: #1d4555;

}

et

.footer .menu-horizontal {