--- title: 'Joomla 4 - Cassiopeia Template - a bunch of Tips & Tricks' created_time: '2023-09-23 16:35:27' language: fr subtitle: '' --- # Joomla 4 - Cassiopeia Template - a bunch of Tips & Tricks by [Marc Dechèvre](https://www.woluweb.be/) ![woluweb](https://www.woluweb.be/images/woluweb/woluweb_mini.png) ![Marc](%URL%.images/marc_dechevre.png "100x100") This presentation was done several times at different events and in different languages
(at each session the present document has been improved and new sections have been added) - JoomlaDay France in Brussels | Session in French | 2022.05.20 - Joomla User Group Maastricht (Netherlands) | Session in Dutch | 2022.03.21 - Joomla User Group New Jersey (USA) | Session in English | 2022.01.20 Present slides https://slides.woluweb.be [video](https://www.youtube.com/watch?v=1upj5bpXrr4) (English) ### Please contribute **Help improve this presentation that will be converted to a Joomla Community Magazine article**: - if you think of other tips & tricks - if any information can be more precise - if you know of any other resource - if you spot any typo - if you see any error - ... then please get back to me! ❤️💙🧡💚 ### Preamble As you might know, with the introduction of Child Templates in J4.1 the path to the "template media folders" (`css`, `images`, `js` and `scss`) changes - from `templates/cassiopeia/` in J!4.0 - to `media/templates/site/cassiopeia/` in J!4.1+ for Cassiopeia (and similarly for all Templates which are / will be compatible with Child Templates). Good to know: if you created for example a `templates/cassiopeia/css/user.css` in J4.0, once you update to 4.1 the file will be **automagically** moved to `media/templates/site/cassiopeia/css/user.css`. So you don't have to worry about this, Joomla (Dimitris Grammatikogiannis in the present case) got you covered 😉 ## Resources *"Standing on the shoulders of giants"* The goal of this session is to try and give tips & tricks about Cassiopeia *which are not already out there*. But what if it is out there and you missed it? I always like to gather all the available sources about a topic, be it Custom Fields... or Cassiopeia 🙂 So here is all I am aware of (*and please get back to me if I have forgotten some*): - **Customize your Cassiopeia Template** by Elisa Foltyn (aka coolcat) at Joomla User Group New Jersey - Nov 2021 1. https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template 1. https://www.youtube.com/watch?v=cLOarOP5NI0 - **Child Templates in J!4.1** by Dimitris Grammatikogiannis (aka dgrammatiko) at Joomla User Group London - Dec 2021 1. https://dgrammatiko.online/talks/ 1. https://www.youtube.com/watch?v=8lX44gS9QG8 - **Joomla 4.1 insights** by Dimitris Grammatikogiannis (aka dgrammatiko) at Joomla Extensions Developers JUG on 2022.01.20 1. https://www.facebook.com/events/259747792922384 - **A tutorial on how to use the Cassiopeia template for Joomla 4** by Astrid Günther on her blog 1. https://blog.astrid-guenther.de/en/ > Cassiopeia (see the numerous subsections) - **Joomla 4: Tweak Cassiopeia with a top banner and horizontal navigation** by Astrid Günther in the Joomla Community Magazine - Sep 2021 1. https://magazine.joomla.org/all-issues/september-2021/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation - **More information about the available Classes for the Blog View** (image-left, image-right, image-bottom, image-alternate, boxed, ...) by Ciaran Walsh 1. https://issues.joomla.org/tracker/joomla-cms/18319 - **How to build accessible websites using Cassiopeia** by Christiane Maier-Stadtherr on 2021.09.21 at JUG London 1. Presentation https://docs.google.com/presentation/d/11UKdDwfhKtIKIVk0CCKE9IxrwK93uVjx4UVSJHjQHB0/edit?usp=sharing - **Joomla 4: Cassiopeia Template** by Patrick Jackson in the Joomla Community Magazine - Jan 2021 1. https://magazine.joomla.org/all-issues/january-2021/joomla-4-cassiopeia-template - **Kickstart Cassiopeia, the new Joomla frontend template Module** by Maarten Blokdijk at JoomlaDay USA 2021 1. https://jdayusa.com/sessions/sessions-2021/session-2021/april-24/kickstart-cassiopeia-the-new-joomla-frontend-template - **Cassiopeia - Templates in Joomla 4** [in German] by Viviana Menzel at JoomlaDay DACH 2021 - Sep 2021 1. Presentation https://www.dr-menzel-it.de/images/J4-Template.pdf 1. Video https://www.youtube.com/watch?v=wk19Asepo8c 1. Demo site with explanations https://cassiopeia.joomla.com/ - **Cassiopeia Template in Joomla 4** [in German] by Hagen Graf - Oct 2021 1. https://blog.novatrend.ch/2021/10/11/cassiopeia-template-in-joomla-4/ - **How to Use the Menu with Cassiopeia in Joomla 4** by LT Digital Team | Dec 9, 2021 1. https://ltheme.com/use-the-menu-with-cassiopeia/ - **A Cassiopeia user.css generator** by Elisa Foltyn | 2023 1. https://colours.joomla.com/ ## Reasons to love Cassiopeia There are many good reasons to stick to the native template Cassiopeia - it is **Accessible** (AFAIK it not the case for the classical templates/frameworks out there) - it is by design **super performant** (I was surprised to get 97% on a Lighthouse/GTMetrix for a real website even before doing the most basic optimisation like enabling gzip) - it uses the **latest techniques** (CSS Grid, CSS Variables, vanilla javascript instead of frameworks, ...)
and latest tools (Bootstrap5, Font Awesome 5, ...) - **new features** are regularly added, like the ones coming along with J4.1 (note: J4.1 RC was released on 18 January 2022: https://github.com/joomla/joomla-cms/releases) - Child Templates - Icons for Menu Items Of course, you might also have you own (good) reasons to use another template/framework. But Cassiopeia is clearly an excellent option for Joomla 4 (while for Joomla 3 I have never considered using Protostar to build a website except for *testing* purposes) ## First impression of Cassiopeia The first time I saw the Cassiopeia Template Options I thought "oh nooo, so few Options". But actually -as we see in this presentation and in the other resources mentioned- we can easily compensate for that. At the end of the day, it is even a good thing to have a default Template that is not bloated because it means - better performance - more stability - and even more creativity & flexibility since we can use/(re)discover Joomla core features to customize it according to our individual needs ## Tips & tricks around Cassiopeia ### Overriding the Favicon Cassiopeia's default favicons path can be found in the `` ```HTML ``` If you want to override them, all you need to do is to create an override of these icons, for example - `/templates/cassiopeia/images/joomla-favicon.svg` for J!4.0 - `/media/templates/site/cassiopeia/images/joomla-favicon.svg` from J!4.1 onwards Note: converting online an image to svg/ico is easy, just Google it ### Fonts #### Add Google Fonts to your template - Go to https://fonts.google.com/ - Pick the font of your choice - Simply adapt and add the following CSS to `/media/templates/site/cassiopeia/css/user.css` in J4.1+ (was `/templates/cassiopeia/css/user.css` in J4.0): ```CSS /* Import font from Google - Go to fonts.google.com, select a font and look for the import command */ @import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap'); /* Use the imported font on the page: On Google you can also find the CSS instruction for using the font. If you put this in the body element then the font will be used on the whole website. */ body { font-family: 'Georama', sans-serif; } ``` Source: https://coolcat-creations.com/en/blog/customize-your-cassiopeia-template Note: this method should be the last choice, it hurts too much the performance. See the next options #### Add Google Fonts locally to your template Because of Privacy laws (like GDPR in Europe), you might not be allowed to call a **distant** font (because it allows the provider to track your visitors). No problem! You can easily download the necessary files and add the corresponding CSS to `/media/templates/site/cassiopeia/css/user.css` in J4.1+ (was `/templates/cassiopeia/css/user.css` in J4.0) See https://google-webfonts-helper.herokuapp.com/fonts Source: https://blog.astrid-guenther.de/en/ > Cassiopeia > Options in Cassiopeia > Fonts Scheme Direct link at the moment: https://blog.astrid-guenther.de/en/cassiopeia/3cassiopeia-optionen/ #### Add any Font to your template txs to Child Template Note: this requires J4.1+ since it makes use of the new feature called *Child Template*. Txs @dgrammatiko for the feature & the tip! 1. Create a child and make it the default 2. Edit the templateDetails.xml of the child and add one more line (basically change the font names of an existing option) in the useFontScheme field 3. that's all See the screenshots: ![addlocalfont1](%URL%.images/addlocalfont1.jpg) ![addlocalfont2](%URL%.images/addlocalfont2.jpg) See this interesting discussion about adding fonts in Cassiopeia on the French Joomla forum: https://forum.joomla.fr/forum/joomla-4-x-aa/gestion-des-templates-design-css-et-bootstrap-aa/2042331-ajouter-et-utiliser-une-police-locale-dans-cassiopeia?p=2042900#post2042900 #### Use a plugin to have the fonts locally See https://github.com/joomtools/plg_system_jtaldef by https://www.joomtools.de This Plugin downloads external loaded files or fonts to the local file System and serves them from the local Domain. Currently only Google fonts are handled. Note: this works for Cassiopeia... but also for other templates btw! More explanations (and a French version of the plugin) on https://forum.joomla.fr/forum/joomla-4-x-aa/gestion-des-templates-design-css-et-bootstrap-aa/2043351-incorporer-localement-vos-polices-de-google-fonts ### Colors #### Changing the color set on the whole site Add the following CSS to `/media/templates/site/cassiopeia/css/user.css` in J4.1+ (was `/templates/cassiopeia/css/user.css` in J4.0) ```css :root { --cassiopeia-color-primary: red; --cassiopeia-color-hover: green; --cassiopeia-color-link: blue; } ``` Adapt the colors of course, this is just an example... #### Changing the color set on a given page - Go to Menu > [ your menu ] - Click on the chosen Menu Item - Select the Page Display tab - In the Page Class option add for instance `colors1` - Add the following CSS to `/media/templates/site/cassiopeia/css/user.css` in J4.1+ (was `/templates/cassiopeia/css/user.css` in J4.0) Basic example: ```css .colors1 { --website-color-1: #5e2688; --cassiopeia-color-primary: var(--website-color-1); } ``` More advanced example allowing to play with transparency (RGBA) because my initial variable is not directly expressed as a color, but as the RGB value (example: `37, 143, 167`): ```css .colors1 { --website-color-primary: 37, 143, 167; --website-color-hover: 242, 48, 48; --cassiopeia-color-primary: rgba(var(--website-color-primary),0.5); --cassiopeia-color-hover: rgb(var(--website-color-hover)); --cassiopeia-color-link: rgb(var(--website-color-primary)); } ``` #### Add new color scheme in Cassiopeia Note: requires Joomla 4.1+ The default Joomla front-end template Cassiopeia ships with two color schemes: standard and alternative. If you modify a color scheme your modification can get lost at some next update. In Joomla 4.1 you now have the possiblity to add additional color schemes: Create your own css file on the `media\site\templates\cassiopeia\css\global` folder with a name like `custom_colors_orange.css` and you can then select it in the Cassiopeia template. For more information see https://issues.joomla.org/tracker/joomla-cms/35917 #### Dark Mode There are many good reasons to have Dark Mode on your website. Thanks to the free plugin Dark Magic by Nicholas Dionysopoulos you can very easily enable and customize Dark Mode - on the back-end (only with the default Atum Template) - on the front-end (only with the default Cassiopeia Template) Note: at the moment the README.md on https://github.com/nikosdion/DarkMagic only mentions Joomla 3. But actually the plugin has two versions, one for J3 and one for J4. Simply click on Releases on the right column - v2.x is DarkMagic for Joomla 4 - v1.x is DarkMagic for Joomla 3 Of course, especially for the front-end, you will probably want to customize further some colors. Good news: Cassiopeia makes an extensive use of what is commonly called "CSS Variables" (the real name is "Custom Properties"), which makes it easy to customize ao colors: they are defined once and are then used at 100+ different places. Here is an example CSS I added to `/media/templates/site/cassiopeia/css/user.css` in J4.1+ (was `/templates/cassiopeia/css/user.css` in J4.0) in order to customize further the front-end colors in Dark Mode (to have the header, the buttons, the links etc with the official colors of the site): ```CSS :root { --website-color-1: #D95F69; --website-color-2: #F29544; } @media screen and (prefers-color-scheme: dark) { /* to override the Dark Mode Colors defined in the Dark Magic plugin */ :root { --cassiopeia-color-primary: var(--website-color-1) !important; --cassiopeia-color-link: var(--website-color-1) !important; --cassiopeia-color-hover: var(--website-color-2) !important; --cassiopeia-color-gradient-end: var(--website-color-1) !important; --cassiopeia-color-gradient-start: var(--website-color-2) !important; } .btn-primary { background-color: var(--website-color-1) !important; } .btn-primary:focus, .btn-primary:hover { background-color: var(--website-color-2) !important; } .back-to-top-link { color: white !important; } #cf_1 { /* Convert Forms also uses CSS Variables */ --background-color: rgba(0, 0, 0, 0.9) !important; } } ``` #### A CSS generator for colours by Elisa FOLTYN Beginning of 2023, Elisa FOLTYN has created a "Cassiopeia user.css generator" : https://colours.joomla.com/ ### Layout #### Know all possible Positions in Cassiopeia The most complete/accurate presentation of all available positions I have found so far is the following. Txs to its author, Pedro Olaia, for sharing it. Note: the html element and classes at the "MENU" position change according to the module inside. So if the module is actually the menu module, it will be: `