All tech notes

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 Site Modules
• Add a Custom module to your site. (scroll to find it or use search).
• In the Module tab, add a meaningful Title
• Then turn off Title and set the module position to topbar
• In the Options tab 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.

Add a Custom module type

Enter details in the Module tab,

Add a meaningful Title, turn off Title display in the front end template and set the module position to topbar.

Select a background image in the Options tab

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.

See also:

• Bootstrap documentation – https://getbootstrap.com/docs/4.0/content/typography/
• A sample implementation of Cassiopeia – https://cassiopeia.joomla.com/