Basics
Cassiopeia is Joomla's own template for Joomla 4. It is the further development of the space themes (Solarflare in Joomla 1.0, Milkyway in Joomla 1.5 and Protostar in Joomla 3.0). Since it is already included in the Joomla core, no installation is required.
The Cassiopeia is a modern responsive template and looks good on all types of devices (desktop, tablet, smartphone...). Furthermore, it is easy to use and very functional. Due to a large number of well-arranged module positions, it offers a good basis for an individual design. It is based on Bootstrap 5.
Many settings in the Cassiopeia template are made directly in the template style. It is possible to create several template styles for one template. Thus, for example, a different style can be selected for each menu item.
Create multiple template styles
To create a new template style, proceed as follows:
- Go to System -> "Templates: Site Template Styles" in the backend!
- Select the template style to be copied and click on the button "Duplicate"!
- The template style has now been duplicated. If you want to change its name, open the style, enter a new name and save the style!
Important: With every update of Joomla, the template files could also be overwritten by the Cassiopeia. It is therefore advisable to work with a copy of the Cassiopeia template. You can find out how to create a template copy at the bottom of this page. Please do not confuse the template copy with the copy of a template style!
Style editing view
Brand
Select "Yes" if you would like to use your own logo, an alternative title or the standard logo (with the text "Cassiopeia")!
Note: These elements are not displayed across the full width. If you want to use a larger banner, it can make sense to set "Brand" to "No" and use the banner in a module position.
Adding a logo
Here you can define your own logo from the Joomla image directory for your website. This can also be uploaded from your computer. Joomla will automatically display the logo in the designated logo position (link at the top of the website). A link to the homepage is automatically generated for the logo.
Titel (alternative to logo)
If you are not using a logo, you can enter a title (alternative text) here, which will be displayed in place of the logo. If neither a logo nor a title is given, Cassiopeia automatically uses the following image file from the core, which simply shows the text "Cassiopeia": /templates/cassiopeia/images/logo.svg
The order of priority is consequently: Own logo -> titel -> standard logo (with text "Cassiopeia")
A link to the homepage is automatically generated for the logo, title and SVG file.
Tagline
Enter a description for the website here! Cassiopeia places this under its own logo or the title or the standard logo.
Fonts scheme
You have several options for defining the fonts on your website.
None
The default font of the website visitor's browser is used for display.
The disadvantage is that the website looks different in every browser. If, on the other hand, a uniform display is desired, it is better to specify a specific font.
Roboto (local)
The Roboto font is used. Since this font is already integrated in the Cassiopeia template, it is available online directly from the website. The website always looks uniform. Since the font is hosted locally, there are also no problems with data protection regulations. This could be the case in some countries if you had to load the font from an external source.
Fire Sans / Roboto + Noto Sans (web)
Another option is to choose the web fonts Fire Sans or Roboto + Noto Sans. Here, too, the presentation of the website is always uniform. Web fonts are loaded from external sources. Since popular web fonts are usually used by many websites, there is a high probability that they are already present in the browser cache. This shortens the loading time.
However, loading web fonts from external sources also has some disadvantages:
If a provider no longer makes a used web font available, the font will no longer be displayed. There may even be an error message on the website. Loading fonts from external sources can also violate data protection regulations in some countries. Because as a rule, personal data such as the IP address is forwarded when communicating with an external server.
Tip: In this case, it is best to install the fonts locally. You can find out how to install and use web fonts locally in Joomla 4 here:
Colour Theme
The Cassiopeia template contains the color schemes "Standard" and "Alternative".
Standard: In this scheme, the colors are already optimized so that everything is barrier-free
Alternative: With this scheme, the preset colors can be overwritten. The changes are entered in the user.css. You can find out how to create a user.css further down on this page.
Tip: Further color schemes can be created for the template color.
Choosing between a static or fluid layout
The two responsive layouts "Static" and "Fluid" determine how your website is displayed in the frontend. The static layout shows the website content within a container in the front end. With the fluid layout, the container is removed and the website extends over the entire width of the browser. When reducing the size of the viewing window, the content and the side columns decrease as a percentage.
Set Sticky Header
If you activate the "Sticky Header", the header area (logo, menu ...) of the website always remains visible at the top of the screen when you scroll down the page. As soon as you deactivate the "Sticky header", the header area of the website scrolls with it.
Set "Back to top" - Link
You can insert a link (arrow icon) at the bottom right of the page. If this is clicked, the page automatically scrolls to the top.
Create a custom css file (user.css)
Important: With the Cassiopeia template, the user-defined file is called user.css and not custom.css, as is the case with many other templates!
Changes to the css files could in principle be made directly in the Cassiopeia css files. However, if these files are overwritten during a Joomla update, the changes would have to be carried out again. To avoid this, there is a more sensible alternative. A user.css is created in which all changes are written. This user.css will not be overwritten during a Joomla update.
To create the user.css, proceed as follows:
- Go to System -> "Templates: Site Templates" in the backend!
- Open Cassiopeia (or a copy of Cassiopeia) by clicking on "Cassiopeia - Details and Files"!
- Click the "New File" Button"!
- Select the directory "css" in the opened modal window!
- Enter user in the "File name field"!
- Choose the file type css below!
- Click the "Create" Button!
Joomla has now created the following css file: templates/cassiopeia/css/user.css
Important: Since Joomla 4.1.0 the user.css is in the following directory: media/templates/site/cassiopeia/css
Every time a page is called, Joomla checks whether there is a user.css and then calls it up as the last css file. Only the css changes are written to user.css. Under no circumstances should the entire content of template.css be copied into user.css!
An editor such as Notepad ++, PSPad or similar can be used for editing. Editing in the backend (template manager) is also possible.
Changes are not displayed in the frontend
Did you make changes to your website, but your browser is still showing the old version? Then this is very likely due to the cache problem.
So that web pages can be displayed faster, they are usually cached. The cache of the server, the Joomla cache and the cache of the browser used or all of them can be used simultaneously. When a page is displayed, the cache is checked first and, if this page is available, it is then loaded directly from the cache. The changes are not yet included on this page.
If you change a website and the change is not displayed, you have to ensure that the caches are emptied so that the new page is loaded into the caches.
It is usually sufficient to empty the browser cache and the Joomla cache:
1. Clear Joomla cache: Go to System -> "Maintenance: Cache leeren" in the backend and empty the Joomla cache! Alternatively, you can also call up "Empty cache" via the "Dashboard"!
2. Clear Browser cache: How you empty the browser cache depends on the browser and device used (computer, tablet, smartphone ...). Usually you can find the cache options a bit hidden under the settings!
3. OPCache, APC, XCache or similr: Since these caches only affect the execution of PHP scripts, manual emptying is in principle not necessary, which is why it will not be discussed in more detail at this point.
Tip: When designing a website or when making major changes, it is advisable to deactivate the caches in order to save yourself the permanent emptying!
Work with copy of Cassiopeia (template copy)
(Important change: From Joomla 4.1.0 there are the so-called child templates. Details will follow later.)
With every update of Joomla, the template files could also be overwritten by the Cassiopeia. It is therefore advisable to work with a copy of the Cassiopeia template right from the start.
Important: Please note that this is a template copy and not a copy of a style within a template.
To make a copy of the template, proceed as follows:
- Go to System -> "Templates: Site Templates" in the backend!
- Select the template to be copied and click on the "Copy Template" button!
- Enter a name for the template copy and click on the "Copy Template" button!
- After the new template has been created, click the "Close" button!
The new template is now displayed in the template list. You can use it just like the original template. However, it will not be overwritten during a Joomla update.
Tip: You cannot delete a template in the template manager! However, a template can be deactivated or uninstalled. Go to System -> "Manage: Extensions", mark the template there and carry out the desired action!
