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 
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&view=article&id=6:your-template&catid=8:blog&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.
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)?
Hamburger Position und Größe hab ich jetzt anpassen können, sodass beides von Screenwidth abhängig ist.
Es fängt an mir zu gefallen.
Herzlichen Dank für die Tipps!
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.
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.
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.
Komme jetzt erst wieder dazu....
Das Einfügen in die user.css von
.navbar-toggler {
width: 65px;
height: 45px;
background-color: #b94800;
}hat keine Wirkung. Durch Ausprobieren fand ich, dass die Klassen-Verknüpfung hier einen Streich spielt und es heißen muss:
.container-header .navbar-toggler {
width: 65px;
height: 45px;
background-color: #b94800;
}So finde ich den Button jetzt OK bei größerer Screenwidth. Ab ca. 600px screenwidth beginnt der Hamburger das Signet zu überlappen und er wirkt dann auch übermächtig, sodass ich nun zusätzlich mindestens eine media-condition einfügen werde.
Herzlichen Dank für die guten Tipps hier!
Habs versucht, leider keine Wirkung. Habs auch versucht, auf .navbar zu begrenzen:
.navbar img, svg {
height: 35;
width: 30;
}geht auch nicht.
Aber danke für den Tipp und dein Engagement.
Übrigens werde ich jetzt die bisher nebeneinander angeordneten NewsFlash-Artikel untereinander anordnen, jeweils Bild / Text im Wechsel links rechts, wenn die Screenwidth kleiner und die Spalten zu lang werden.
Für den Text in gleich langen Spalten und sogar mit Silbentrennung fand ich hier eine Lösung:
Das muss ich aber noch in Ruhe ausprobieren.
Abgesehen davon hat die jetzige Site zu viel maximale Breite. 1200px müsste auch noch heutzutage ausreichen. Muss mal schauen, wo ich das begrenzen kann. Habe statisches Layout gewählt.
Herzlichen Dank! Wieder ein Stückchen weiter bin ich nun gekommen.
Aber schon geht es weiter mit den nächsten Schwierigkeiten. Und ich kann ja wohl schlecht erwarten, dass ich mir hier durch das freundliche Engagement der Forenteilnehmer letztlich meine Website kostenlos gestalten lasse. Da hab ich kein gutes Gefühl mit!
Beispiele für aktuelle Unklarheiten und auch konzeptionelle Fragen:
Für solche Dinge würde ich gerne jemanden beauftragen, den Rest der Site aber selbst machen, damit es finanziell passt. Für solche Teilaufgaben findet sich aber bisher niemand. Erstaunlich viele Webprogrammierer lehnen auch Joomla ab und wollen nur WordPress anfassen und auch das nur als Komplett-Aufrag für alles.
Liebe firstlady – Abgesehen von meinem Spleen betr. des MobileMenü gehe ich ja schon in die Richtung, den Rest des Templates nur hinsichtlich Fonts und Farben anzupassen. Leider gelingt mir nicht mal dies, obwohl ich die zahlreichen sehr guten Anregungen von Astrid Günther versuche zu befolgen.
Wenn ich Änderungen gemäß Astrid vornehme wie z.B. das Hintergrundbild mit
.body.site {
background: transparent;
background-image: url(../../../../../images/bg/bg-pastell-kachel.jpg)
background-repeat: repeat;
background-attachment:fixed;
}dann ändert sich schlichtweg nix. Dann suchte ich in der template.css nach diesen Klassen und finde sie nicht. Also ist die Empfehlung von Astrid hier möglicher Weise nicht zutreffend.
Ich möchte Fonts definieren, finde aber keine passenden Klassen. In der template.css werden die Fonts durch Ausdrücke wie
var(--cassiopeia-font-weight-normal, 400);definiert und nicht, wie ich es bisher kenne. Und mit den Farben ist es ähnlich. Deshalb funktioniert das Überschreiben mit user.css wohl nur zufällig.
Auch Firefox mit seinem Inspektor ist bei diesen Verhältnissen nur eine beschränkte Hilfe für mich.
Für meine Verhältnisse ist es ja schon ein kleines Wunder, wenn ich das mit dem Menü wenigstens so weit hinbekommen habe, wie es jetzt ist (HamburgerButton rechts mit Abstand vom rechten Rand in Abhängigkeit von Screenwidth und einem FlyOut-Menü, das von rechts nach links öffnet und das nur so breit ist, wie für den Text der Menüpunkte benötigt wird und zudem einen neutralgrauen teiltransparenten Hintergrund hat. Das allein hat mich ca. 2 Tage gekostet.
Ich schaff es wohl doch nicht alleine. Ich habe mehrere Monate Entwicklung in ein Joomla 3.x gesteckt, das zu einem nach meinem Empfinden relativ guten Ergebnis geführt hatte: https://idcreativ.de/index.php
Diese Arbeit beruhte auf dem mittlerweile steinalten JYAML-Template und als Menü habe ich "TheGrueMenu" verwendet, welches aber noch angepasst wurde, speziell was die Positionierung des Sandwich-Buttons betrifft.
Im Herbst 2020 war die Arbeit beendet, aber ich hatte dann nicht mehr die Zeit, die Inhalte und Videos dafür zu erstellen. Und dann kam Corona, ich verliebte mich und zog um. Inzwischen ist Joomla 4,x so erwachsen, dass es Verschwendung wäre, in die alte Site noch Arbeit zu investieren.
Ich habe sie halt noch behalten, um mit wenig Aufwand beschreiben zu können, wie ich mir die neue Joomla-4 Site vorstelle.
Inzwischen hat sich in der Weiterentwicklung von CSS so viel getan, dass ich den Anschluss verloren habe. Und ich habe wieder nicht die Zeit, mich dort einzuarbeiten, denn mein eigentlicher Beruf ist ja ein völlig anderer!
Und nach den Umsatzeinbrüchen und den Umzugkosten ist kaum Budget vorhanden, das Ganze komplett in Auftrag zu geben.
Ich hatte schon im Frühjahr versucht, die nur wichtigsten Dinge, die mir hier jetzt Probleme machen, in Auftrag zu geben. Aber solch einen Auftrag nimmt anscheinend niemand an.
Was tun?
Hab gerade entdeckt, dass die Reihenfolge, in der die Module in der "below-top"-Position angezeigt werden, der ID der Module entspricht.
Ich hab einfach ein neues Menü-Modul angelegt, das somit eine höhere ID erhielt, als mein Modul mit dem Signet.
Mit der Positionierung habe ich auch schon Ansätze gefunden und auch die Transition des flex-containers.
Vielleicht schaffe ich jetzt den Rest auch alleine.
Liebe Christine, dass ich die Reihenfolge der Anzeige durch Verändern der Modulreihenfolge beeinflussen könnte, hatte ich auch schon bedacht und ausprobiert. Das brachte leider nicht den gewünschten Erfolg.
Und wenn es ihn gebracht hätte, ist noch die Frage, ob das Menu-Modul dann den Sandwich-Button wirklich an den rechten Rand gebracht hätte, statt ihn z.B. direkt an das Ende vom SIgnet anzuhängen.
Danke Ihnen drmenzelit für Ihre Klarstellung.
Es sieht aktuell danach aus, dass ich mit einem modifizierten Cassiopeia Template weiter mache, einfach weil es mir dort bisher mehr gelungen ist, meine Vorstellungen zu verwirklichen, als mit dem Template "Nature".
Das Signet hat jetzt 700px Breite und zusätzlich width 85%. Folglich müsste eigentlich immer genug Platz rechts vom Signet sein, das Sandwich-Menü zu platzieren.
Ich erinnere, dass ich als "Workaround" für die Positionierung von Signet und Sandwich-Menü-Icon die Position "Menu" und die Position "Search" benutzt habe. Leider springt das auf Search positionierte Icon bei schmaler werdendem Screen unter das Signet.
Also habe ich versucht, das Signet und den SandwichButton in topbar unterzubringen, was aber nicht gelingt, weil unabhängig von Screenwidth offensichtlich immer alles, was dort positioniert wird, untereinander angeordnet wird.
Wenn ich das KnowHow hätte, könnte ich vermutlich die index.php für das modifizierte Cassiopeia verändern und evtl. sogar neue Positionen definieren und dann auch in die XML-Datei des Templates schreiben, damit eine Anzeige der Positionen über URL/index.php?tpl=1 möglich ist.
Positioniere ich beide Module (Signet und Menü) in below-top, so werden beide zwar unabhängig von screenwidth immer nebeneinander angezeigt. Aber aus irgendwelchen Gründen steht immer der Sandwich-Button VOR dem Signet und nicht rechts vom Signet am rechten Rand der Webseite.
Meine Frage: Wie müsste ich also die index.php des Template verändern, damit z.B. auf der Position topbar die Inhalte von zwei dort platzierten Modulen unabhängig von screenwidth immer nebeneinander angezeigt werden?
Alternativ: Was müsste ich ändern, dass in der Position "below-top" der Sandwich-Button auf gleicher vertikaler Höhe wie das Signet, jedoch am rechten Rand der Seite angezeigt wird?
Uuuups, ja das stimmt, liebe Christine. Manchmal kommt man / ich nicht auf das Naheliegendste. 
Herzlichen Dank dir!
So wie auf https://j4.dr-menzel-it.de/ zu sehen, würde mir das Menü ja bereits gefallen. Allerdings ist mein Signet viel länger – max. ca. 700px. Je nach Screenwidth soll so viel Platz bleiben, dass das Sandwich-Icon rechts neben des Signet passt, allerdings rechts am Rand der Webseite.
Die Hintergrundfarbe und deren Opazität des ausgeklappten Menüs lässt sich ja sicher anpassen.
Aber ich müsste das erst mal genau so zum Laufen bringen! Das ist mir bisher jedenfalls nicht gelungen.
Aus einem Kurzurlaub zurück, habe ich mich seit 2 Tagen intensiv dran gesetzt, meinen Wunsch aus dem Anfangspost zu verwirklichen. Dazu habe ich das Nature Template von drmenzelit installiert, davon ein Child angelegt.
Dann habe ich die user.css eingefügt und die beiden "offcanvas-metismenu.php" sowie "offcanvas.php" in das Verzeichnis mod_menu eingefügt.
Mein Signet habe ich auf die Position Logo gesetzt und das Menü auf die Navigation. Außerdem habe ich nach "navbar-expand-lg" gesucht, um immer das Mobile-Menü zu erhalten, aber diese Klasse habe ich in keiner CSS des Templates gefunden.
Im MenüModul habe ich "offcanvas-metismenu" ausgewählt.
Die Ergebnisse in Abhängigkeit von Screenwidth sind im Anhang in den Dateien Nature-mod_*** zu sehen und leider unbrauchbar. Daran änderte auch kein so so intensives Herumprobieren an verschiedenen Einstellungsmöglichkeiten.
Dann habe ich die Anregungen von drmenzelit hinsichtlich Cassiopeia befolgt. Auch hier habe ich user.css und die beiden offcanvas-PHP-Dateien angelegt und zusätzlich in template.css von Cassiopeia alle Definitinen von "navbar-expand-md" deaktiviert, um das Mobile-Menu immer angezeigt zu erhalten. Und ich habe in den Klassen ".container-header .mod-menu" die vorhandenen "flex"-Definitionen ersetzt durch "flex-direction: column !important;"
Das Signet habe ich auf die Position "Menü" gelegt und das Menü auf die Position "Search". Anders konnte ich nicht erreichen, dass das Signet nach links und das Menü nach rechts positioniert sind.
Die Ergebnisse in Abhängigkeit von Screenwidth sind im Anhang in den Dateien Cassiopeia-mod_*** zu finden. Das sieht schon etwas brauchbarer aus - zumindest von der Funktion her.
Da das das einzig sinnvolle Ergebnis war, was ich erreichen konnte, ist es hier zu sehen:
Mir ist aufgefallen, dass meine Definitionen für die Breite des Signet nicht richtig funktioniert. Ich wollte erreichen, dass das Signet nie breiter als 700px wird, aber ansonsten 85% der Screenwidth breit sein sollte. Dann müsste eigentlich immer genug Platz nach rechts für das Sandwich-Menü bleiben.... Eigentlich! – Tut es aber wieder nicht!
Und ehe ich hier den Rest der Woche auch noch verbrate, finde ich es sinnvoll, dass ich mich nun wieder vertrauensvoll an den erlauchten Kreis der Wissenden hier wende.
Bin gerade beim Ausprobieren aber finde den Link zum Github von drmenzelit nicht mehr.
Nach dem Doppelpunkt im Beitrag 6 steht nix mehr
ZitatEventuell ist mein Offcanvas alternatives Layout nützlich:
WM-Loose Es ist sogar wahrscheinlich, dass ich mit irgendeinem dieser Frameworks meine Wünsche umgesetzt bekomme. Aber dann ist meine Joomla-Site eben nicht so schlank und einfach / übersichtlich / weniger anfällig bei Updates, als wenn ich das Standard-Template mit so wenig Erweiterungen wie möglich zusammen nutze.
Ich kam jetzt auf die Idee, meinen Wunsch mittels "Modul in Modul" zu verwirklichen:
Ich erstelle ein benutzerdefiniertes Modul, in dem ich das Signet platziere und neben das Signet, wie gewünscht, ein weiteres Modul lade, eben das Mobile-Menü. Dann kann ich dieses Modul-Set beliebig auf gewünschte Template-Positionen bringen wie eben z.B. topbar oder belowtop oder banner oder top-a usw.
Aus der Joomla 3.x-Zeit fand ich zum Thema "Modul in Modul laden" diesen Thread hier:
wobei darin auf zwei weitere Diskussionen verwiesen wird.
Und hier noch ein Thread dazu: Modul in Modul laden
Vielleicht lassen sich die dort beschriebenen Lösungsansätze auch in Joomla 4.x in Cassiopeia anwenden? – Wenn ja, hätte ich auch da wieder die Schwierigkeit, dass es mich technisch an meine Grenzen bringt. Aber vielleicht regt der o.g. Thread jemanden hier an, mir einen Tipp zur Umsetzung in Cassiopeia zu geben?
Tja, da haben echte Fachleute geantwortet und ich verstehe nur "Bahnhof".
Ich möchte lediglich in eine "Zeile", wie z.B. topbar oder banner das Signet am linken Rand beginnend veröffentlichen und am rechten Rand ein Sandwich-Menü platzieren.
Und falls das nicht ohne großen Aufwand geht, könnte ich das Menü-Modul evtl. mit Z-Achse und CSS-Positionierung an die von mir gewünschte Position bekommen. Das Signet setze ich dann auf width 80% sodass immer Platz für das Sandwich-Menü bleibt.
Eine andere Idee wäre, z.B. das MobileMenüCK einzusetzen. Hier fand ich aber heraus, dass es sich sozusagen mit dem vorhandenen Menü-Modul "verbindet" und so zusätzliche Einstellungen zulässt, die im MetisMenü nicht möglich sind. Die von mir gewünschte Positionierung ist damit ebenfalls ungeklärt.
Auf jeden Fall möchte ich so wenig zusätzliche Erweiterungen installieren, wie möglich.
Was tun?
