Customising the topbar in the Cassiopeia template for Joomla 4
Cassiopeia is the new default site template for Joomla 4. It has some simple but brilliant capabilities.
This site has a banner above the site logo and menu. This is achieved using a Site Module. To create it:
- Log in to Site administration
- Navigate to
- Add a
Custommodule to your site. (scroll to find it or use search).
- In the
Moduletab, add a meaningful Title
- Then turn off Title and set the module position to
- In the
Optionstab add the banner image you wish to use
- Save the Custom module.
- Refresh your site and if the template is set to fluid it will fill the browser width and resize as you resize it.
Custom module type
Enter details in the
Add a meaningful Title, turn off Title display in the front end template and set the module position to
Select a background image in the
Add the banner image you wish to use, save the module, and refresh your site view to see the changes.
Completed Site Module
The completed module appears in the Site Modules list in the Administration site.
This is a small change from using the banner position and looks better to my eyes. Joomla augments its support for Bootstrap 4 with powerful control over module positions and individual module look and feel. These are features that Joomla has always had but somehow they seem more useful now in Joomla 4.
- Bootstrap documentation – https://getbootstrap.com/docs/4.0/content/typography/
- A sample implementation of Cassiopeia – https://cassiopeia.joomla.com/