CSS
You would like to slightly change the display of the Cassiopeia templates in Joomla? This can be achieved with the help of the file user.css
. In this article you will find code snippets for uncomplicated use cases.
Show left sidebar on small displays above main content
On a small screen (e.g. smartphone) the modules of the left sidebar are displayed below the content. With the following code snippet you can make them appear in front of the main content.
@supports (display: grid) {
.site-grid {
grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l side-l side-l side-l ." ". comp comp comp comp ." ". side-r side-r side-r side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
}
@media (min-width: 992px) {
.site-grid {
grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
}
}
}
Configure the up link in Cassiopeia so that it is always visible
Add the following code to the user.css
file if your goal is to configure the up-link
in Cassiopeia so that it is always visible and not only at the end of the page.
#back-top { position: fixed; }
Hyphenation
Normal hyphenation
Hyphenation is activated by CSS with the hyphens
property. Hyphenation uses the rules of the language specified in HTML-Language Code[^w3schools.com/tags/ref_language_codes.asp].
body {
hyphens: auto;
}
More information: hyphens[developer.mozilla.org/en-US/docs/Web/CSS/hyphens] and word-break[^developer.mozilla.org/en-US/docs/Web/CSS/word-break]
Maybe helpful:
<wbr>
Word Break: the word is wrapped without hyphen if there is not enough space. Example:dogs<wbr>leash
.­
Soft Hyphen: The word is hyphenated if there is not enough space. Example:dogs­leash
.
Non Breaking Space: If the line break between two words should be prevented, a protected space must be inserted. Example:3 cm
.
Force hyphenation
The overflow-wrap
property specifies whether the browser can wrap lines with long words if they run beyond the container. Especially in mobile view, such overhanging is not user-friendly. When swiping, the whole view shifts. With the value anywhere
a wrap is forced. More information at selfhtml.org[^wiki.selfhtml.org/wiki/CSS/properties/overflow-wrap]
body {
overflow-wrap: anywhere;
}
Display modules on positions below each other
For the module positions[^blog.astrid-guenther.de/cassiopeia-module-positionen/] in Cassiopeia display: flex
is defined. That's why the modules are placed side by side. If you insert the following code in the file /media/templates/site/cassiopeia/css/user.css
, the modules of the position bottom-b
will be displayed below each other.
.container-bottom-b {
display: block;
}
WebAssetManager
You have created a child template or a copy of Cassiopeia and want to make more extensive CSS changes?
You can find the documentation for the WebAssetManager at docs.joomla.org[^docs.joomla.org/J4.x:Web_Assets]
joomla.asset.json
You have created a child template and want to change the file templates/cassiopeia/joomla.asset.json
. You can overwrite it. If your template is called cassiopeia_child
, then the file templates/cassiopeia_child/joomla.asset.json
overwrites templates/cassiopeia/joomla.asset.json
.
Loading additional CSS files
In the child template or in a copy of Cassiopeia, you can load the file media/templates/site/cassiopeia_child/css/custom.css
with the following command. Enter the command in the file index.php
of the copied or inherited template.
$wa->registerAndUseStyle('template.custom', 'custom.css', ['weight' => '500', 'dependencies' => ['template.active','template.active.language']]);
There is a
weight
option. This is a mechanism for sorting the order of the assets. In the file/libraries/src/WebAsset/WebAssetManager.php
you will find the methodcalculateOrderOfActiveAssets()
which refers to Kahn's_algorithm
Settings
Frontend Editing
The Images and Links tab for frontend editing
Joomla 4 allows authorized users to edit articles from the frontend. But by default, you don't see the "Images and Links" tab on the frontend editing. How to reach the display?
- In the Joomla 4 administrator dashboard, go to "System" > "Setup" > "Global Configuration."
- Click on "Articles" in the left column.
- In the article options, click the "Edit Layout" tab and then click "Display".
- After saving, the "Images and Links" tab will be displayed in the frontend editing.
Webmentions