In the Magazine we have a lot of articles about tweaking different elements in Cassiopeia: 

• Header: Cassiopeia, Joomla’s powerful built-in template: how to modify the header with css grid
• Menu: Style your Joomla website: Bring color to your menu
• Modules: Creating full width Joomla modules inside content

and some more.

But we have forgotten an important part of a website: the footer.

The footer is not only the last element of the website where we can put the menu items we won’t have in the main menu, it can also be the place to put more information about you, your products or your company. You can also include some elements to engage with the visitors (e.g. newsletter registration).

Cassiopeia has only one module position in the footer element, but combining a good selection of parameters, some Bootstrap classes and a few lines of CSS code in your user.css file, you can create an amazing footer for your website. Here I will show you three examples. But first some lines of CSS we need to add to get things working well:

CSS

In the user.css file we include:

.footer .grid-child {
  flex-wrap: wrap;
}
@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: unset;
  }
}
.footer h3 {
  font-size: 1.3rem;
}

The footer is a flex element (has the definition display: flex; in the template) without further specifications. The standard flow on a flex element is to distribute the child elements in a row without breaking on new lines (flex-flow: row nowrap; or flex-direction: row; flow-wrap: nowrap;). Since we want to display several modules in the footer, we need to make sure they wrap on multiple lines with the first rule in our code. The rule inside the media query unsets the change of flex-direction in displays smaller than 992px, because we want to have more flexibility using Bootstrap classes. And the third rule is not really necessary, but included for personal cosmetic reasons: as I find the size of the h3 too big for the footer.

Footer 1

In this example the footer has the original Cassiopeia background (it is a linear gradient with two blue/violet colors). 

We have four modules:

• About: custom module with text
• Quick links: menu module
• Follow us: menu module
• Created: custom module with text (and an emoji, because in TinyMCE it is possible to insert emojis 😉)

For all modules we need to set the Module Style to html5 in the Advanced tab. This allows us to include CSS classes and make the title of the module visible (for the three modules above, in the last one we hide the title). That is necessary because the standard module style of the footer position in Cassiopeia is “none”.

For the module “About” we set the Bootstrap Size to 6. “Quick links” and “Follow us” get the size 3 and “Created” the size 12. The parameter Bootstrap Size will add the corresponding CSS classes: col-md-6, col-md-3 or col-md-12 and we get our modules correspondingly distributed on our footer.

In order to have some space between the three modules above I added the class “px-2” as Module Class in the Advanced settings. In the “Created” module I added the classes “text-center pt-3 border-top border-light-subtle”.

For this example we also need an extra line of CSS on the user.css:

.footer .grid-child {
  align-items: flex-start;
  row-gap: 2rem;
}

These rules align the modules to the top so all titles are at the same height and adds a gap between the rows (important for the mobile version of the footer).

To have the footer also looking nice on smaller displays I added the class “col-12” to all modules, that makes the modules take the whole width on displays smaller than 768px.

One last trick: to get the social media icons displayed horizontally I added the class “menu-horizontal” to the Menu Class and added this rule in the user.css:

footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

Footer 2

In this example we will also change the background color of the footer.

We have again four modules:

• Logo: custom module with an image
• Store One: custom module with text
• Store Two: custom module with text
• Created: custom module with text (the same as in Footer 1)

The classes in the Module Class field are the same as in the first example: “px-2 col-12”. The Bootstrap Size is set to 4 for the three modules above.

We need the three general rules in the user.css and additionally two lines of code to change the background color:

.footer {
  background-color: #1d4555;
  background-image: none;
}

We set the background color and remove the gradient defined in Cassiopeia (background-image: none;). That is all 😄

Footer 3

Here we have some more modules and we will use an image as background.

We have six modules:

• Logo: custom module with an image or a text
• Vehicle: menu module
• About: menu module
• Learn more: menu module
• Quick links: menu module
• Follow us: menu module

The four modules on the top row get the same parameters and classes as before. The Bootstrap Size is set to 3.

For the other two modules we use the classes “col-12 px-2 pt-3 border-top border-light-subtle” and the Bootstrap Size 6. Additionally we add the Menu Class “menu-horizontal” in both and also “social” in “Follow us”.

Then we add the following CSS to the general rules:

.footer {
  background-color: #1d4555;
  background-image: url('../images/the-background-image');
}

and

.footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.social {
  justify-content: flex-end;
}

The background image can be uploaded in the images folder inside the template (media/templates/site/cassiopeia/images), which can be done in the backend: System -> Site Templates -> Cassiopeia Details and Files -> New File inside the images folder.

Now we have created three different footer sections for our website and with some creativity you can make your own.

If you want to add more space on the top of the footer you can add

.footer .grid-child {
  padding-block-start: 5rem;
}

Of course you can play with the sizes for different devices: 3 columns in desktop, 2 columns in tablets and 1 column on mobiles. Or whatever you like.

Bonus

Do you know how to push the footer to the very bottom of a page no matter how much content you have? In Cassiopeia it is already defined, but from time to time I find templates that are not optimized for that and in pages with very short content the footer jumps to the middle of the website and looks weird.

Using flexbox it is possible to push the last element to the bottom. A very simplified version of the structure from Cassiopeia is:

<body>
  <header></header>
  <div class=”site-grid”></div>
  <footer></footer>
</body>

The CSS for the body element is:

body {
  flex-direction: column;
  display: flex;
  min-height: 100vh;
  position: relative;
} 

That means header, site-grid (with the main content) and footer will be displayed one below the other and the minimum height of the body is the height of your display (100vh).

The “site-grid” has an important definition: 

.site-grid {
  margin-bottom: auto;
}

This in combination with the min-height of the body will always push the footer to the bottom no matter how short the content inside site-grid is. The same effect can be achieved with:

.footer {
  margin-top: auto;
}

Further reads

Three years ago Marc Dechèvre wrote a long article about Tips and Tricks for Cassiopeia. On point 4.4.3 he describes the module “Footer” and how to modify it: https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks

More about 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