Show banner in Cassiopeia
Recommended positions for a banner
Basically, banners can be positioned anywhere. Some module positions are particularly suitable for this.
Module position "topbar"
This module position is at the very top and extends over the entire width of the screen.
Module position "below-top"
This module position is located directly below the "topbar" position and above the logo or the alternative text. The banner there fills the container to the maximum and does not extend over the entire width of the screen. If "fluid" was set as the template layout, then the difference between the positions "below-top" and "topbar" is not so important. On the other hand, it is different if "static" has been selected as the template layout. Then the difference is considerable, especially with large screens.
Tip: If you have a logo that is not suitable for display in the logo area due to its size or shape, you can ideally place it in the "below-top" position! You should set the option "Brand" to "No" in the template settings so that the standard logo (with the Cassiopeia text) is not also displayed instead of the logo or alternative text.
Moduleposition "banner"
This module position is below the logo area and the horizontal menu (module position "menu"). The banner can be displayed over the entire width of the screen. Instead of a banner, you can also use text with a background image and an automatic overlay effect.
Create banner module on position "below-top"
A module of the type "Custom", which you first have to create, is suitable as a banner module:
- Go to "Content" -> "Site Modules" in the module manager!
- Click on "New" and select the module type "Custom"! The new module can now be edited.
1. Editing the banner module
1. Choose a suitable name for the module, e.g. "Banner"!
2. Disable the display of the module name!
3. Put the banner module in the position "below-top"!
4. In order to be able to style the module later, go to the "Advanced" tab and make the following two settings!
5. Enter the following as the CSS class (module): my-banner
6. Change the module style from "inherited" to "Cassiopeia card"! Otherwise the module class cannot be used.
7. Go back to the "Module" tab and insert the image you want to use as a banner! There are usually several options for doing this. You can use the TinyMCE editor to open the media manager (CMS content -> media) and then upload, select and insert images. It works in a similar way with other editors such as the JCE and the image manager.
8.Finally save the module!
The result looks like this:
2. Style the banner module
Depending on the width of the screen, the banner may not cover the entire width of the container.
To avoid this, you can specify a minimum size of 100% for the banner. To do this, add the previously entered class "my-banner" to the banner and then create a CSS instruction for this class in user.css. The following steps must be carried out:
- Switch to the code view of the editor, e.g. via the button "Toggle Editor" in TinyMCE or via the TAB "Code" in JCE!
- Add the class "my-banner" in the HTML element:
<p><img class="my-banner" src=images/banner.png width="300" height="150" loading="lazy" /></p>
- Save the module!
- Now the class only needs to be entered in user.css and the CSS statement added. The user.css is located in the following folder:
templates/cassiopeia/css/user.css
The user.css can be edited directly with a suitable editor (e.g. Notepad ++, PSPAD, etc.) or via the template manager:
"System" -> "Templates: Site Templates" -> "Cassiopeia"
Enter the following code in the user.css:.my-banner {
min-width: 100%;
}
- Finally save the user.css!
Tip: If a user.css does not exist, you can create it directly via FTP access or the template manager.
In the latter case you will find instructions on the following page: Basics (Cassiopeia)!
Now the banner always fills the entire width of the container, regardless of the screen size.
Create banner module on position "below-top"
In the module position "banner" you can use the module of the type "custom" again as a banner module. As described above, you can insert an image in the tab "Module" that you want to use as a banner.
But there is an interesting alternative:
Instead of a banner/image, you can also use text with a background image and an automatic overlay effect.
Find out how to do this now!
Text with background image and overlay effect
A module of the type "custom" is again suitable as a banner module, which must first be created:
- Go to "Content" -> "Site Modules" in the module manager!
- Click on "New" and select the module type "Custom"! The new module can now be edited.
1. Choose a suitable name for the module, e.g. "Banner-Overlay"!
2. Disable the display of the module name!
3. Put the banner module in the position "banner"!
4. Enter the text in the editor that should be displayed in the module!
5. Then go to the tab "Options" tab and select the background image you want! Pay attention to the resolution so that the background image looks good on the various devices.
6. To set the pre-made override for the overlay effect, go to the tab "Advanced" and simply select "banner" as the layout!
7. Finally save the module!
How can I change the height of the banner?
The banner is displayed across the entire width and the height is set to 100% by default. If you want to change the height, it is advisable to overwrite the value with an entry in user.css. If you want to set the banner height to 50% of the viewport, for example, add the following lines:.container-banner .banner-overlay {
height: 50vh;
}
The result looks like this:
Tip: These classes can also be used to make other formatting in the banner area, for example the text color:
.container-banner .banner-overlay {
height: 50vh;
color: #fff;
}
