Cassiopeia - Artikel-Layout abhängig von Screenwidth darstellen

Ich möchte bei größerer screenwidth meine Artikel in der Übersicht des Blogstils so darstellen, dass abwechselnd mal links, mal rechts ein Bild steht und im Raum neben dem Bild der Einleitungstext zentriert angezeigt wird, umgeben von einem großzügigen Weißraum.

Bei schmalerer Screenwidth sollen die Artikel alle untereinander gereiht sein, wobei die Bilder natürlich am Kopf des Artikels stehen und der Einleitungstext darunter (wie beim Standard-Layout von Cassiopeia).

Wenn man den Weiterlesen-Button klickt, soll der Artikel in voller Breite der Screenwidth erscheinen und der Text soll abhängig von der jeweiligen Screenwidth auf gut lesbare Spaltenbreite aufgeteilt werden, wobei die Spaltenanzahl sich ebenfalls anpasst.

Für den Spaltensatz hatte ich bereits eine CSS-Lösung entdeckt, die aber natürlich nicht alles abdeckt, was ich mir hier wünsche: https://www.mediaevent.de/css/text-columns.html

Generell sollen alle auf dem feststehenden Hintergrundbild erscheinenden Artikel, Module usw. – nicht aber das Signet, der Hamburger-Button – einen "Frostglas-Effekt" mit leichtem Schattenwurf als Hintergrund bekommen. Die CSS-Lösung für den Effekt habe ich, aber ich habe noch nicht entdeckt, wie ich dafür sorgen kann, dass er einzeln auf jeden Artikel und jedes platzierte Modul angewendet wird.

CSS für den Blur-Frostglas-Effekt:

    -webkit-backdrop-filter: blur(5px);  /* Safari 9+ */
    backdrop-filter: blur(5px); /* Chrome and Opera */
    box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
    background-color: rgb(228 228 228 / 15%); 

Meine bisherigen Versuche, mit Hilfe des Firefox Inspektors die nötigen Klassen zu finden und dann entsprechende Einträge in der user.css vorzunehmen, brachten nicht die gewünschten Ergebnisse.

Naja, ich habe halt den Frostglas-Effekt einfach mal ausprobieren wollen. So habe ich den Effekt einfach mal auf die Klasse .site-grid angewendet. Daher ist der Effekt zurzeit kaum sichtbar, weil er sich über die gesamte Fläche erstreckt statt nur auf den Darstellungsbereich eines Artikels.

Und ja, es ist sehr viel unstimmig im aktuellen Zustand der Webseite. Erst gestern Abend bemerkte ich, dass das Hintergrundbild auf Mobilgeräten nicht angezeigt wird. Und schon zuvor bemerkte ich, dass die Artikel in dieser Ansicht nicht vom Hintergrundbild unterlegt sind – im Gegensatz zur Homepage.

Das hat mich stark weiter gebracht, liebe Christine. Herzlichen Dank!

Ich musste den Frostglas-Effekt noch zusätzlich definieren für die Klassen:

.no-card .newsflash-horiz li
.com-content-article
.container-banner

...wobei in "Banner" meine Breadcrumbs liegen.

Kann sein, dass ich noch weitere Klassen mit dem Frostglas-Effekt hinzu fügen muss.

Nun muss ich noch die Artikel-Layout-Anpassung vornehmen.

Nach Beratung mit einer Designerin habe ich mich dazu entschlossen, den Hintergrund sowie den Frostglas-Effekt wieder raus zu nehmen. Viel wichtiger ist mir, dass in der Blog-Übersicht, in der z.B. 5 oder 10 Blog-Artikel mit Bild und Einleitungstext gezeigt werden, mehr Variation möglich ist, so wie z.B. auf der Website meiner Kollegin Dami Charf: https://traumaheilung.de/

Mir gefällt, dass zu jeder Artikelvorschau abwechselnd links oder rechts Bilder und daneben in relativ großem Weißraum etwas Text steht. Aber wenn man weiter scrollt, so sind dort auch Abschnitte zu sehen, die ich mit einer Artikelvorschau in Joomla nicht hinbekomme, wie z.B. ein über die ganze Breite laufendes Hintergrundbild, über dem dann etwas Text liegt, ähnlich wie bei dem Banner in Cassiopeia. Zwischendrin in der Artikelvorschau gibt es wieder bis zu drei Spalten mit Artikeln oder eben Angeboten.

Wie kann ich so etwas mit Cassiopeia verwirklichen? Und wenn das nicht möglich wäre, welches Template würdet Ihr mir dazu empfehlen? Oder ist sogar ein Pagebuilder erforderlich (bloß um dieses Detail verwirklichen zu können)?

Joes Liste ist mir bekannt. Meine Frage zielte darauf ab, ein möglichst wenig aufwendiges Template zu finden, das mir aber eine Gestaltung gestattet, wie ich verlinkt hatte.

Noch wichtiger ist mi aber die Frage, ob diese Gestaltung nicht bereits mit dem Cassiopeia-Template realisierbar ist.

Ich habe dazu gerade einen Artikel mit folgendem Code verändert:

<div style="background: transparent url('/images/headers/Arek-Socha_free_hd-wallpaper-3698073.jpg') repeat scroll 0% 0% / 100% 300px; text-shadow: black 0px 4px 4px; border: 2px solid black;">
<div class="display-6" style="height: 250px; text-align: center; vertical-align: middle; color: #ffff99;">
<p>templates control the look and feel of your website.</p>
<p>This blog is installed with the Cassiopeia template.</p>
<p>You can edit the options by selecting the "Pümpel" on Your Site,</p>
</div>
</div>

Auf meiner Entwicklungssite findet sich das Ergebnis, wenn man die Homepage etwas herunter scrollt, der erste Artikel unterhalb von "Home".

Einziger Schönheitsfehler jetzt: Der Button "Weiterlesen" steht außerhalb bzw. unterhalb des Hintergrund-Bilds. Ersatzweise füge ich im Textbereich einen Extra-Link zur Artikel-URL ein, mit dem Nachteil, dass andere Artikel einen Button haben.

OK, auch das ist geschafft:

<p><a href="index.php?option=com_content&amp;view=article&amp;id=6:your-template&amp;catid=8:blog&amp;Itemid=102" title="Alles über T2LT-Antennen" target="_self"><span style="color: #ffff99;"><strong>Erfahren Sie mehr dazu…</strong></span></a></p>
</div>
<div style="display: none;"><hr id="system-readmore" /></div>
<h2>L2TL-Antennen</h2>
<p>Eine extrem kostengünstige.....

So geht es im Code weiter nach dem </div> aus Zeile 7 im vorigen Beitrag. Das Readmore behält seine trennende Funktion, wird aber nicht mehr als Button dargestellt.

Stef Ich mache ja schon, was mir mit meinen begrenzten Fähigkeiten möglich ist. Und wenn ich eine Lösung finde, wie jetzt gerade, teile ich sie ja hier auch gerne mit. Könnte ja sein, dass es gebraucht wird.

Zitat von Stef

Trotzdem ist es wichtig das man sich schon die Gestaltung vorher überlegt und plant bevor man beginnt.

Tja, es hat was gedauert bis ich begriffen habe, dass das damalige Hintergrundbild nicht nur die Gestaltungsmöglichkeiten arg einschränkt, sondern auch ein zeitgemäßes Layout nicht mehr zulässt. ....Erkenntnisprozesse eben