Cassiopeia - Menü soll immer als Mobil-Menü angezeigt werden

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.

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?

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.

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.

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?

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.

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:

• Der Hamburger-Button ist innen schwarz. Er sollte auch etwas größer.
• Die Artikel in Newsflash-Darstellung werden zu schmal bei schmalem Screen und die Intro-Texte dort zu lang. Mit extrem kurzem Text kann ich aber nicht das nötige Interesse wecken, den Artikel zu lesen.
  Immerhin: Für große Screens ist das Layout ja OK.
• Bei 4 Artikeln kommt es zu einer großen Lücke, wenn bei entsprechender Screenbreite in der oberen Reihe drei und darunter nur ein Artikel gezeigt werden.
• Öffne ich einen Artikel (weiterlesen), so hat der bei großem Screen extreme Text-Zeilenlängen. Hier brauche ich mehrere Textspalten, wie bei einer Zeitung, damit es noch lesefreundlich bleibt. Und der Text müsste sich automatisch auf halbwegs gleich lange Spalten verteilen und die Anzahl der Textspalten müsste abhängig von der Screenwidth sein.
• Ich möchte den Frostglas-Effekt auf die einzelnen Artikel begrenzen, sodass alle Artikel voneinander durch "ungefrostete" Abstände voneinander getrennt sind.

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.

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:

CSS columns: Spaltensatz

CSS columns – Spaltensatz mit CSS – lässt Text automatisch von einer Spalte in die nächste laufen und gleicht die Höhe der Spalten aneinander an.

www.mediaevent.de

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.