Aufteilung sidebar (links) und main abhängig vom Inhalt

    Joomla! 3.9.10

    Template abgewandelt von Protostar

    Fluid Layout Static

    Projekt läuft noch lokal


    In meinem Projekt habe ich in die Sidebar ein zusätzliches Menü (Produksortiment) gelegt. Dieses Menü soll aber nur auf den Seiten des Menüpunktes Start angezeigt werden. Bei großen Viewports ist die Darstellung: Sidebar + 3-spaltig Inhalt, der je Beitrag nur aus einem Bild oder ganz kurzem Text besteht (Bild 1). Bei kleineren und mittleren Viewports soll die Sidebar (das Menü) nach oben wandern und horizontal angezeigt werden. Das habe ich bereits so eingerichtet (Bild 2 ff).

    Die 3-spaltige Main nimmt jetzt aber nicht mehr die volle Breite ein sondern nur noch ca. 75%.


    Wie erreiche ich es, dass Main die volle Breite 3-spaltig verwendet, aber nur im Menüpunkt Start? Ab Viewportgröße 480 sollen die Beiträge/Bilder dann nur noch einspaltig untereinander und in formatfüllender Breite dargestellt werden.


    Muss ich mir dafür ein weiteres Template anlegen, das sich nur in der Formatierung für die Startseite unterscheidet oder gibt es einen einfacheren / effektiveren Weg?


    Danke und Gruß


    axl


    Viele Grüße aus der sonnigen Pfalz


    Alexander

    DIV #content hat eine Breite von 75% (.span9). Diese wird vom Template automatisch erzeugt, wenn ein Modul auf eines der Seiten integriert wird.


    Ohne direkt ans Template zu gehen, würde ich in der user.css ab dem Breakpoint (978px) wo die linke Spalte nach oben geht #content auf 100% setzten.


    Ab Viewport 480 wird der Beitrag auch füllend angeziegt, aber da das Bild nur 200px breit und links gefloatet ist, sieht es nicht so aus.

    Danke für die Hilfe.


    Zuerst mal zum letzten Punkt. Für die Viewportbreite 480 habe ich noch nicht die Lösung. Die Bilder sind aus der bisherigen Seite übernommen und müssen noch angepasst werden.


    Das was du zu DIV #content ausführst leuchtet mir ein, das wäre auch noch eine Möglichkeit. Ich wollte sie aber möglichst vermeiden, da diese scheinbar vierspaltige Ausführung der Startseite bei Viewports >979 eben nur auf der Startseite vorkommen wird. Und ich bin mir da nicht sicher, welche Auswirkungen die Änderung auf 100% auf andere Seiten haben wird.


    Gruß


    axl

    Viele Grüße aus der sonnigen Pfalz


    Alexander

    Zitat von axl-g

    Für die Viewportbreite 480 habe ich noch nicht die Lösung.

    Ist auch nicht nötig, da der Inhalt dort 100% ist.



    Zitat von axl-g

    da diese scheinbar vierspaltige Ausführung der Startseite bei Viewports >979 eben nur auf der Startseite vorkommen wird.

    Es ist ja nur pseudo-4-spaltig, da Du die Modulposition nicht als Spalte sehen darfst.
    Im Prinzip ist Dein Content nur 3-spaltig.
    Wenn Du mit einem Page-Class-Suffix im Menüpunkt arbeitest, kannst Du eine eigene Ober-Klasse für die Startseite generieren und den DIV #content mit der neuen Oberklasse separieren, so dass sie nur für HOME gilt.

    Bei der 480 Breite meinte ich nur, dass ich noch nicht die passenden Bilder habe. Ansonsten hab ich das im Griff.


    Das mit dem Page-Class-Suffix habe ich schon ausprobiert: _start wird dann zu blog-featured_start. Aber das liegt unterhalb von main (div content) und wirkt sich darum nicht mehr auf die Breite dieses Containers aus.


    Ich habe schon überlegt, das mit Java-Script ab zu fragen, aber das erscheint mir ein bisschen als Krampflösung, zumal ich aus dem Stand auch nicht so genau wüsste wie das geht.


    Gruß


    axl

    Viele Grüße aus der sonnigen Pfalz


    Alexander