Wie verhindern, dass Module in rechter Seitenspalte bei kleinem Screen nach unten wandern?

    Es gibt Standard-Module, in die ich nicht per Editor bestimmte CSS-Klassen in deren Content einfügen kann wie z.B. die Module Newsflash, Latest, Popular usw.

    Wenn ich die in die rechte Seitenspalte positioniere, dann würden diese Module ab einer bestimmten Screenwidth aus der Spalte verschwinden und automatisch in der Hauptspalte oberhalb des Footer angezeigt.

    Mein aktuell verwendetes Template ist Protostar im Fluid-Design.


    Frage: Was muss ich tun, damit diese automatische Positionierung oberhalb des Footers unterbleibt und folglich die über diese Module dargestellten Inhalte bei schmalen Screens gar nicht mehr angezeigt werden?

    Des Weiteren kannst du auch in den Einstellungen der einzelnen Module festlegen, wie sie sich verhalten sollen und grundsätzlich das HTML aufgebaut sein muss. Schau halt die unten angegebenen Bereiche genauer an.


    Zur Modulklassensuffix gibts hier ein Tutorial. Ist schon älter, sieht heute anders aus, funktioniert aber noch genauso:

    https://www.time4joomla.de/joo…5-modulklassensuffix.html



    Vielen Dank!

    Nun hab ich eine Klasse .aside-only angelegt wie folgt:

    Code
    @media only screen and (min-width: 766px) {
    .aside-only {
        display: none;
    }
}

    ...und dies genau nach Anleitung mit Leerzeichen davor und ohne Punkt in den Modulklassensuffix eingetragen. Resultat: Das hat keine Wirkung, obwohl der Firefox-Inspektor mir klar anzeigt, dass die Klasse ".aside-only" zwar korrekt eingebunden ist. Aber "display: none" ist nicht zu finden.

    In der template.css gibt es aber betr. der Elemente, die in der Seitenspalte dargestellt werden, bereits eine @media-Definition, mi der grundsätzlich der Inhalt der rechten Spalte unterhalb von 766px screenwidth unterhalb von main bzw. oberhalb vom footer dargestellt wird.

    Versuchsweise habe ich deshalb meine eigene CSS-Datei mal mittels @import nicht zu Beginn der template.css eingefügt, sondern erst am Ende der template.css. Das hat aber auch keinen Unzterschied gemacht.

    Einen Bezeichnungs-Konflikt der Klasse "aside-only" sehe ich auch nicht.


    Was tun?

    Damit vertue ich mich auch andauernd. GRÜBEL also wirklich zurecht! :)


    Hab es ja im OP versucht, zu beschreiben:

    Das Modul Newsflash zeigt mir aus einer Kategorie in der Seitenspalte Beiträge an, falls die Screenwidth größer als z.B. 766px ist.

    Ist sie kleiner, soll Newsflash gar nicht angezeigt werden, also auch nicht (wie bis jetzt) unterhalb vom Main-content bzw. oberhalb vom Footer.


    Übrigens: Vor meinem Posting hatte ich dort max-width stehen. Das hatte aber auch nichts gebracht. Deshalb kam ich ja auf die Idee, dass die @media-Kondition evtl. vom Browser gar nicht beachtet wird. Dem widerspricht aber, dass aside-only im Firefox-Inspector angezeigt wird, aber nicht mit der @media-Kondition und nicht mit "display: none".

    Oh sorry, das mach ich natürlich! Diese experimentelle Site findest du hier:

    Beim hier verwendeten Template Protostar sind an der Bildung der Seitenspalten besonders die Klassen "well" und "aside" beteiligt. Die von mir eingefügte Klasse .aside-only wird sowohl bei well als auch bei aside mit ins div-Tag eingefügt, sofern die Seitenspalte dargestellt wird.


    Gerade habe ich eine neue Schwierigkeit entdeckt, die aber mit dem Thema hier indirekt zu tun hat:

    Die index.php des Template lässt es nicht zu, in den Seitenspalten mehr als ein Modul einzufügen. Bei meinem uralten JYAML-Template war das immer mit Leichtigkeit möglich. Ich bin überrascht.

    Entweder muss ich die index.php erneut anpassen oder mich doch noch für ein anderes Template entscheiden. Dann würde aber die ganze Bastelei wieder von vorn los gehen. grrrrrr.....

    Statt einer neuen Modulklassensuffix, brauchst du doch im

    Code
    @media only screen and (min-width: 766px)

    lediglich das "well" auszublenden:


    Code
    @media only screen and (max-width: 766px) {
    .well {
        display: none;
    }
}

    Das reicht schon. Derzeit ist das Problem, dass du zwar "aside-only" ausblendest, aber "well" eingeblendet bleibt. Zumal "aside-only" auch gar nicht in der CSS auftaucht. Hast du entweder falsch geschrieben oder falsch angeordnet.




    Axel

    Moin,


    m.E. dürfte das "Problem" sein, dass der Import Deiner viewport-width.css über die template.css nicht funktioniert.
    Wie zu sehen ist, wird nicht die template.css eingebunden sondern eine template.css?....

    Das habe ich bisher noch nie durchschaut, ABER um eigenes CSS benutzen zu können, ist eine Datei user.css zu benutzen.

    Wenn Du diese im Verzeichnis css bereitstellst, witd sie "automatisch" eingebunden, da im in der index.php eine entsprechende Abfrage vorhanden ist.

    Dort "schüttest" Du Dein CSS hinein und dann sollte es funzen.


    Christian


    Edit:

    Das mit nur einem Modul kann ich für die position-7 und position-8 nicht bestätigen. Da konnte ich zwei unterschiedliche Module anzeigen lassen.

    Zitat von chr-hl

    m.E. dürfte das "Problem" sein, dass der Import Deiner viewport-width.css über die template.css nicht funktioniert.

    funktioniert (Axels' Code) z.B. temporär ans Ende der template.css. Das Aber kommt gleich :)

    Zitat von chr-hl

    ABER um eigenes CSS benutzen zu können, ist eine Datei user.css zu benutzen.

    Genau! Also den gewünschten Code bzw. andere Ergänzungen usw. in eine user.css


    Nachstehend nur als Info:

    Zitat von chr-hl

    Wie zu sehen ist, wird nicht die template.css eingebunden sondern eine template.css?....Das habe ich bisher noch nie durchschaut, ...

    Das passt schon. Gab da sogar mal einen Issue, wo dies als "bug" gemeldet worden war. Ist aber keiner :)

    https://github.com/joomla/joomla-cms/issues/27838

    Zitat

    That „ugly code“ is a hash of the file content. It will change when the linked file is changed, causing the browser to reload that file from the server instead of using the locally cached (and now outdated) file.

    That’s not a bug, it’s a feature.

    Gaaaaaanz früher stand im Quelltext nur: /css/template.css" rel="stylesheet" type="text/css" />

    Jetzt halt: /template.css?....


    Liebe Grüße

    Christine

    Herzlichen Dank! Hab alles mal ausprobiert, Resultat in 2 Screenshots, gemäß Dateinamen mal mit voller Breite, mal mit unter 766px. Beide Screenshots mit zwei Modulen in rechter Spalte. Das Ergebnis zeigt drei Probleme:


    1.) Das als zweites in die Spalte geladene Modul wird immer unterhalb von "Main" dargestellt.


    2.) Wenn 2 Module geladen sind: Merkwürdiger Weise endet der weiß-opake Hintergrund für den gesamten Content-Bereich dort, wo das rechte Modul endet. Lässt sich evtl. mit "clearfix" beheben, das ich den Modulen im Suffix zuweisen könnte.

    Wenn nur 1 Modul geladen wird, läuft der weiß-opake Hintergrund bis ganz unten an den Seitenrand durch – wie es sein sollte.


    3.) Das Ersetzen der Klasse "aside-only" durch "well" zusammen mit der Änderung der @media-Kondition auf max-width: 766px hat leider nicht den gewünschten Erfolg gebracht. Es blieb beim bisherigen Verhalten.


    Ich habe erst später, als ich mich mit der index.php des Template beschäftigt hatte, erkannt, dass automatisch eine vorhandene user.css erkannt und eingebunden wird. Zu der Zeit hatte ich aber bereits zwei eigene CSS-Dateien definiert und erfolgreich mittels @import am Anfang der template.css eingebunden. Erfolgreich, weil die dortigen Klassen und Definitionen erkannt und angewendet werden, was ich ja auch mittels Inspektor sehen kann.

    Zudem befürchte ich bei Änderungen, die z.B. in Widerspruch / Konflikt zu bereits in der template.css stehenden Definitionen stehen, die von mir vorgenommenen Änderungen nicht wirksam werden oder schlichtweg andere Probleme auftreten. Deshalb habe ich viele Änderungen direkt in der template.css vorgenommen, dort aber sauber kommentiert.

    Da Protostar während der Restlaufzeit von Joomla 3 gewiss kein Update mehr erhalten wird, besteht IMHO auch keine Gefahr des Überschreiben.

    Nuja, ich beneide die Kolleg_innen, die mit Less umgehen können, da wäre das Ganze evtl. übersichtlicher.


    Ich kann mir aber kaum vorstellen, dass ich mit meinen drei Änderungen die index.php des Template zerstört habe. Ich hatte nur die Gridbreiten für die drei Spalten links main und rechts angepasst. Ich hänge die Datei trotzdem mal an.

    Zitat von Clemens-XS

    3.) Das Ersetzen der Klasse "aside-only" durch "well" zusammen mit der Änderung der @media-Kondition auf max-width: 766px hat leider nicht den gewünschten Erfolg gebracht. Es blieb beim bisherigen Verhalten.

    Du hast den Code in die viewport-width.css reingegeben. Funktioniert deshalb nicht, weil

    Code
    @media only screen and (min-width: 970) {
    .pic-510 {display: none;}
    .pic-660 {display: none;}
    .pic-975 {display: none;}
    .pic-1260 {display: inline-block;
    .vid-270 {display: none;}
    .vid-360 {display: none;}
    .vid-540 {display: none;}
    .vid-720 {display: inline-block;}
}

    in der Zeile 65 > .pic-1260 {display: inline-block; das hier fehlt: }


    Nachfolgende Segmente, verlieren dadurch die Wirksamkeit.


    Liebe Grüße

    Christine

    Liebe Christine!

    Herzlichen Dank dir. Genau das war's! – Jetzt erfolgt keine Darstellung der Inhalte der rechten Spalte mehr unterhalb des Main-containers, wenn die Seite schmaler als 766px dargestellt wird. Und auch der weiß-opake Hintergrund ist wieder so, wie es sein sollte.


    Und damit ist auch gleich ein zweites Problem gelöst:


    Von w3schools.com hatte ich ein Codebeispiel übernommen, bei dem das Layout von ein- auf zweispaltig wechselt, sobald eine bestimmte Breite überschritten wird – einfach weil die Zeilenlänge sonst schwer lesbar ist. Dieser Wechsel zu zweispaltiger Darstellung funktioniert jetzt endlich ebenfalls einwandfrei!


    Auch dies ist wichtig für meine weiteren Design-Entscheidungen: Evtl. verzichte ich doch noch auf die rechte Spalte und lasse alles einspaltig in Main laufen und schalte innerhalb von Main auf zweispaltigen Text um, sobald die Zeilenlänge der Beiträge zu lang wird.

    Im Einleitungstext darf es ja wegen evtl. vorhandener Bilder durchaus längere Zeilen geben.


    Schade, dass ich dir keine zwei Herzchen vergeben kann! Ich freue mich sehr, dass du mir weiter geholfen hast!


    Übrig geblieben ist jetzt noch die Sache, dass nach wie vor nur ein einziges Modul in der Spalte 7 platziert werden kann. Werden zwei Module platziert, so wird eines in der Spalte dargestellt und der Rest unterahlb vom Main-container.

    Mist! – Ich hab nicht aufgepasst!


    Die Idee, die Klasse "well" oberhalb einer bestimmten Screenwidth auszublenden, um die Darstellung unterhalb des Main-Containers zu verhindern, ist leider zu pauschal:


    Ich hab ein oder zwei Custom-Module, deren Inhalt ausnahmsweise doch unterhalb des Main-Container dargestellt werden sollen.

    Wenn ich die Klasse "well" auf "display: none" setze, wird der gesamte in den Seitenleisten platzierte Inhalt daran gehindert, unterhalb des Main-Content platziert zu werden.


    Im Sinne eines Tipps für andere Interessierte hier:

    Ich habe jetzt doch die selbst angelegte Klasse "aside" zum gezielten Ausblenden einzelner Module genutzt. Diese Definition wird in den Modul-Suffix des Moduls eingetragen werden, das ausgeblendet werden soll. Andere ohne diesen Suffix positionierte Module werden weiterhin angezeigt – auch unterhalb des Main-Containers.


    Der im letzten Absatz meines vorigen Posting ist hinfällig. Der oftmals schlecht zu leerende Browsercache hat mir was vorgegaukelt. – Alles funzt jetzt prima!


    Herzlichen Dank an alle, die mir hier geholfen haben!!!

    Zu früh gefreut! – Die auf Desktop-Browsern jetzt einwandfrei laufende Lösung (funzt auch mit alternativen user-agent-Einstellungen im FF) bringt bei allen Browsern gemäß Punkt 1 andere Ergebnisse auf meinem Android (Galaxy S5), welches einen Screen von 1080 x 1920 hat.


    1.) Grundsätzlich wird beim Querformat 1920 x 1080 px bei allen Mobilbrowsern (ich habe 8 Stück zum Testen auf Android) die @media-Kondition nicht beachtet, nach der ab 766px Breite die rechte Spalte eingeblendet werden sollte.


    2.) Bei 7 von 9 getesteten Android-Mobilbrowsern erscheinen die Module betr. Seitenleisten-Position und Main-Content-Position wie beim Desktop. Zwei andere Browser zeigen nach wie vor alle Module aus der Seitenleiste grundsätzlich unterhalb vom Main-Content.


    3.) Bei den beiden Browsern, die bei Punkt 2 negativ auffallen, funktioniert auch die von einer minimalen Screenwidth von ca. 550 px abhängige Darstellung von Text innerhalb eines Beitrags in zweispaltigem Layout nicht. (Midori zeigt es richtig an.)


    Folgende 7 Browser zeigen richtig an:

    IceCat, Midori, FOSS-Browser, Privatsphären-Browser, mBrowser, Lightning, DuckDuckGo.


    Folgende 2 Browser machen Probleme (der erstgenannte ist aktuell):

    LineageOS-Browser, Android-Standard-Browser


    Mir ist klar, dass es wohl keine Website gibt, die immer auf allen erdenklichen Geräteklassen, Browsern und Betriebssystemen gleich angezeigt wird. Aber bei wie vielen moderneren Geräten und Browsern störende Abweichungen auftreten, das sollte ich schon wissen und möglichst Gegenmaßnahmen treffen.


    Nur zur Information: Das Custom-Modul mit "Termine? / Adresse" habe ich zwei mal angelegt. Das eine ist mit "aside-only" auf die Seitenleiste begrenzt. Das zweite erscheint nur ab 766px unterhalb vom Main-Content.


    Ich bitte darum, sowohl auf neueren Androids und iPhones mal meine Testsite zu besuchen und mir die drei folgenden Ja / Nein-Fragen zu beantworten. Nur die Homepage anschauen reicht aus:


    1. Wird bei Querformat und Screenwidth > 766px die Seitenspalte eingeblendet?


    2. Wird bei einspaltiger Darstellung + Querformat das Adress-Anzeige unterhalb des Main-Content zweispaltig dargestellt?


    3. Werden zwischen Footer und Adress-Anzeige auch noch "Buchtipps" angezeigt?