CSS-Anpassung Cassiopeia Extended

    Joomla Version
    6.0.0
    PHP Version
    PHP 8.4.x
    Hoster
    Ionos
    Link (URL) zur Seite mit dem Problem
    https://spielplatz2.s0.ak-internet.de

    Hallo zusammen,

    mit dem bevorstehenden Umstieg auf Joomla 6 wollen wir auch Shaper Helix ultimate als Template-Grundlage ablösen. Deshalb habe ich versucht in einer Testseite das Design von https://muster.ak-internet.de nach zu bauen. Für meine noch nicht sehr ausgeprägten CSS-Kenntnisse bin ich ganz zu frieden, aber drei Punkte sind offen geblieben.

    1. Die Schriftart Bitter wird nicht genutzt.

    Eintrag user.css

    /*Schriftart laden*/
    "@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
    url('../fonts/bitter-v32-latin-500.woff') format('woff'),
    url('../fonts/bitter-v32-latin-500.ttf') format('truetype'), }

    /*Schriftart wählen*/
    body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Bitter', serif;}

    Hier habe ich sie abgelegt:

    /media/templates/site/cassiopeia_extended

    2. Im Modul Demnächst (aus Jevents) stehen Datum und Uhrzeit (also die Variablen) höher als die Symbole und der Text 'Uhr'

    Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.


    3. Die Texte der beiden Module im Footer stehen auf unterschiedlichen Höhen.

    Kann mir jemand helfen?

    Schonmal Danke im Voraus

    Thomas

    Zum Punkt3:

    Die Listen-Elemente haben einen Innenabstand (Padding), den könnte man am oberen Rand ausschalten, kann aber sein, dass es dann in einer mobilen Ansicht zu wenig oben "klebt".

    Oder man fügt dem Absatz im linken Modul einfach das selbe Padding (oben und unten in meinem Beispiel) hinzu. (In Footer-Modulen entferne ich immer den Außenabstand Margin nach unten, optional)

    Das wäre das Ergebnis:

    Beispiel:

    Code
    .container-footer .mod-custom p {
	padding: .5em 0em;
	margin-bottom: 0px;
}

    Wenn Du noch Fragen hast, gern. Du musst beim Footer ja auch die mobile Ansicht beachten, hier brauchst Du am linken Modul ein Padding auf der linken Seite und die Zentrierung der Listen-Elemente müsste man ausschalten. Alternativ das linke Menu in der mobilen Ansicht zentrieren. Ich will Dir hier aber nicht ungefragt den Code um die Ohren hauen.

    Was mir vorhin noch "ins Auge stach":

    • Schalte beim Modul mit der ID 128 die Option "Inhalte vorbereiten" ein. Sonst ist das E-Mail-Cloaking für die E-Mail-Adresse am oberen Seitenrand nicht aktiv.

      Das E-Mail-Cloaking-Plugin ist bei Inhalten immer aktiv (außer man schaltet es ab oder fügt eine gewisse Anweisung hinzu, aber bei Modulen nicht. Die genannte Option sorgt dafür, dass dieses (und andere - auf den Content bezogene) Plugins auch im Modul aktiv sind.
    Zitat von 89hf4edc

    Was mir vorhin noch "ins Auge stach":

    • Schalte beim Modul mit der ID 128 die Option "Inhalte vorbereiten" ein. Sonst ist das E-Mail-Cloaking für die E-Mail-Adresse am oberen Seitenrand nicht aktiv.

      Das E-Mail-Cloaking-Plugin ist bei Inhalten immer aktiv (außer man schaltet es ab oder fügt eine gewisse Anweisung hinzu, aber bei Modulen nicht. Die genannte Option sorgt dafür, dass dieses (und andere - auf den Content bezogene) Plugins auch im Modul aktiv sind.

    Danke für den Hinweis. Wieder was gelernt.

    Das hat prima funktioniert. Vielen Dank.

    Zitat von 89hf4edc

    Wenn Du noch Fragen hast, gern. Du musst beim Footer ja auch die mobile Ansicht beachten, hier brauchst Du am linken Modul ein Padding auf der linken Seite und die Zentrierung der Listen-Elemente müsste man ausschalten. Alternativ das linke Menu in der mobilen Ansicht zentrieren. Ich will Dir hier aber nicht ungefragt den Code um die Ohren hauen.

    Die mobile Ansicht der Seite habe ich noch gar nicht betrachtet. Ich war noch mit der Desktopansicht beschäftigt.

    Ich verstehe, was du meinst. Mangels bessern Wissen hätte ich das so akzeptiert.

    Also gerne deine Code-Ideen mal posten. Kann man nur durch lernen.

    Zitat von ThomasZ

    Da war ich zu optimistisch. Leider ist da immer noch ein kleiner Versatz

    Option1:

    Hast Du die Möglichkeit, ein Override für das Modul zu erstellen? Dann könntest Du das Wort "Uhr" in ein <span> setzen.

    Aktueller Code:

    Code
    <td class="mod_events_latest_first" style="border-color:#fcf80f"><span class="icon-calendar"></span> <span class="mod_events_latest_date">23.11.2025</span>     <span class="icon-clock"></span> <span class="mod_events_latest_date">10:00</span> Uhr<br>
<strong><span class="mod_events_latest_content"><a href="/index.php/termine/kalender/eventdetail/2/-/gottesdienst" target="_top">Gottesdienst</a></span></strong><br></td>

    neuer Code:

    Code
    <span class="mod_events_latest_date">10:00</span> <span class="balblabla"> Uhr</span><br>

    Dann könntest Du die CSS-Klasse "balblabla" (gib ihr nen gescheiten Namen) benutzen, um das Wort zu positionieren.

    Option2:

    Es gibt aber auch andere Wege, dann musst Du an an den bestehenden CSS-Klassen herumbasteln.

    Du könntest versuchen:

    Code
    .mod_events_latest_first {
	line-height: 1.2em;
	}

    ein besonders gutes Gefühl hab ich bei dieser Version aber nicht, in meinen Tests, auch mit Änderungen der Darstellungsgröße im browser sag es so aus:

    mobil gings auch.

    Man kann per CSS auch noch anders ansetzen...

    Zitat von 89hf4edc

    Wenn Du noch Fragen hast, gern. Du musst beim Footer ja auch die mobile Ansicht beachten, hier brauchst Du am linken Modul ein Padding auf der linken Seite und die Zentrierung der Listen-Elemente müsste man ausschalten. Alternativ das linke Menu in der mobilen Ansicht zentrieren. Ich will Dir hier aber nicht ungefragt den Code um die Ohren hauen.

    Kannst du mir noch deinen Code hierzu mitteilen?

    Zitat von ThomasZ

    Kannst du mir noch deinen Code hierzu mitteilen?

    Prinzipiell läuft das Ganze auf schmaleren Bildschirmen immer noch unsauber, beispielsweise auf Devices mit 1024er Breite (z.B. Nest Hub)

    Helfen kann:

    Code
    .footer .grid-child {    align-items: baseline; }

    Dann noch:

    Code
    .container-footer .mod-custom p {padding: 0em 1em 1em 1em;}

    Eigentlich wäre es besser, das in den CSS-Definitionen der mobilen Ansichten zu machen, aber der Einfachheit halber machs global

    Ergebnis:

    Ich würde außerdem global eine Minimal-Breite festlegen, da sich Dein Layout bei sehr schmalen Ansichten (ok, macht keiner), verschiebt. Schau mal im Debugger bei z.B. 420px Breite des Viewports.

    Ein Grund ist, dass "container-topbar" einen irren "padding-right: 600px" hat, schaltet man das aus, gibts das eben genannte Problem nicht mehr, dann kannst Du Dir auch die Minimal-Breite sparen.

    Was noch auffällt:

    Bei dem Bildern im Text würde ich mit Klassen arbeiten statt mit inline-code "style=float: right", an so einer Klasse, nennen wir Sie mal "left", kannst Du nämlich gut Außenabstände eintragen. Beim Einfügen über den vorgesehenen Dialog im Editor kann man die Klasse auch gleich eintippen.

    Dein Beispiel: https://spielplatz2.s0.ak-internet.de/index.php/unse…ben/technikteam
    Mein Beispiel: https://jdemo4.128ze.net/




    Du siehst sicher, dass der Text das Bild eleganter umfließt, als bei Dir.

    Auf der Startseite hast Du beim Artikel "Musterseite" auch ganz wilden Inline-CSS-Code mit festen Größen-Angaben, das zerballert Dir dann das mobile Layout.

    Bei Artikelbildern, die am Anfang stehen, würde ich persönlich sowieso diese immer über die "Bilder und Links"-Funktion einbauen, das ist einfach ein sehr sauberer Prozess, bei dem sowas nicht passieren kann.


    Dann würde ich in den globalen Settings bei SEO einstellen, dass der Seitenname hinten (nicht vorn) angestellt wird.

    Das ist wichtig, wenn man die Seite bookmarkt, für Google. Wenn sich beispielsweise jemand "Kontakt" bookmarkt, weiß er in 3 Monaten nicht mehr, zu welcher Seite der "Kontakt" gehört.

    Danke für deine ausführliche Antwort das mit den Bildklassen habe ich noch nicht ganz verstanden, gucke ich mir aber in Ruhe an und versuche es nachzuvollziehen.


    Zitat von 89hf4edc

    Ein Grund ist, dass "container-topbar" einen irren "padding-right: 600px" hat, schaltet man das aus, gibts das eben genannte Problem nicht mehr, dann kannst Du Dir auch die Minimal-Breite sparen.

    Das habe ich gemacht, weil ich gerne die Kontaktadresse nicht am rechten Rand, sondern ungefähr bündig mit den Modulen haben wollte. Eine andere Lösung habe ich nicht gefunden. Nutze ich statt topbar die Position below--top steht die Kontaktadresse zwar an der Stelle die ich gerne hätte, aber der dunkle Balken ist nicht durchgängig. Wenn jemand dazu eine andere Idee hat, gerne her damit.