Beiträge von Clemens-XS

    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?

    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!!!

    Naja, notfalls kann ich ja wieder Regular Labs Slider verwenden. Mir war bloß der Codeaufwand zu groß, sowohl Backend als auch in der ausgelieferten Seite incl. Inline-Script. Zudem scheint sich die Funktionalität der freien Version mit ca. jedem zweiten Release ständig weiter zu verringern. :(


    Mit JS lässt sich das "auto-collapse" anscheinend zuverlässiger lösen, als mit reinem CSS.

    Vielleicht kommt mir ja noch eine bessere Accordion-Lösung unter?

    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.

    Mir fällt zu dem Ganzen noch ein Gesichtspunkt ein, nämlich die sogenannte Garantenhaftung. Die kenne ich vom Klettersport her: Sobald ich der erfahrene oder besser ausgebildete Kletterer bin, befinde ich mich automatisch gegenüber dem weniger gut ausgebildeten oder erfahrenen Kletterpartner in der Garantenstellung und hafte bereits, wenn aufgrund schon einfacher Fahrlässigkeit etwas passiert.


    Analog dazu würde ich bei ehrenamtlicher Website-Erstellung schriftlich festhalten, dass der Auftraggeber weiß, dass ich ein Laie bin und daher keine Garantenstellung entstehen kann - einfach weil der Auftraggeber keine „fachgemäße Ausführung nach den Regeln der Kunst“ von dir erwarten kann. – Ob das rechtlich Bestand haben würde, weiß ich nicht --> Rechtsberatung --> Anwalt. Aber immerhin hast du mit dem Stíchwort Garantenhaftung ein wichtiges Thema für den RA.

    Dass du allerdings Grundlagen wie Urheber- und Nutzungsrechte für Bilder, Texte und andere Creativ-Güter beachten musst, davon wird dich sicher niemand befreien können, weil dieser Haftung unterliegt auch Lieschen Müller, die ein geschütztes Foto hochlädt.


    Und vom Verfassen von Impressum- und Datenschutz-Texten würde ich die Finger lassen.


    Im Zweifel würde aber die Gegenseite aber immer damit argumentieren, dass alleine dadurch, dass du den Auftrag angenommen hast, du den Anschein erweckt hast, du hättest ein dem Auftraggeber gegenüber überlegenes Wissen und Fähigkeiten (=Garantenstellung).


    Und wenn mich jemand fragen würde betr. ehrenamtlich / Website: Ich würd es nicht machen, weil früher oder später der Ärger vorprogrammiert ist – wenn nicht rechtlich, dann zumindest durch die Auftraggeber-Mentalität, den Leistungsumfang im Nachhinein immer weiter aufzubohren, zuweilen auch mit emotionaler Erpressung / Manipulation.

    Herzlichen Dank, dass du dich für mein Anliegen so engagiert hast und ich verstehe, dass deine Zeit dafür begrenzt ist.

    Die von mir gewünschte "Automatik" bezieht sich aber nicht auf das collapse in, sondern auf das Schließen noch geöffneter Abschnitte, sobald ein neuer geöffnet wird. Aber vielleicht meintest du das ja.


    Interessant ist höchstens, ob unter Joomla-4 ebenfalls die Demo funktioniert und die Umsetzung auf Joomla nicht.

    Wie ich schon schrieb, hatte ich vor Einfügen der Accordion-Funktion nebst CSS-Definitionen auch geprüft, ob es Konflikte mit KLassen aus dem Template.css gibt. Das ist nicht der Fall.

    Aber wenn ich die vollständige bootstrap.css oder bootstrap.min.css per @import in die template.css mit hinein nehme, dann crasht die ganze Website und es wird nix mehr angezeigt. Die Ursache hab ich nicht finden können, weil mein Wissen nicht ausreicht.

    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.

    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.....

    OK, dann bleibt als Erklärung nur übrig, dass das genutzte JS unterschiedlich ist.


    Bei der Demo von w3schools.com wird das JS stets aktuell über CDNs eingebunden, bei meiner Website nutze ich das JS, was mit Joomla ausgeliefert wird.


    Mir fehlen geeignete Tools, mit denen ich ein frisch herunter geladenes JQuery vergleichen könnte mit dem in Joomla enthaltenen.


    Andererseits hatte ich den Eindruck, dass hier gar kein JS benutzt wird, sondern dass es sich um eine rein CSS-basierte Lösung handelt. Aber... ich sehe mich eher als Laie! :)

    Ich danke dir herzlich für's intensive Nachschauen (und nachzählen).


    Auf dieser Testsite ist eh manches merkwürdig, was ich mir nicht erklären kann. Beispiel:

    Ich habe viele Bilder mit Inline-CSS auf "float: left" gesetzt. Keine Reaktion! Erst nachdem ich eine eigene Klasse für ein "float: left" gesetzt hatte und die im HTML mit

    Code
    <img class="img-cl" src="..." 

    eingesetzt habe, funktionierte das float. Dabei habe ich die template.css genau nach Konflikten abgesucht, aber nix gefunden.


    Auf der Demo-Site von w3schools funktioniert's ja auch. Verstehe ich nicht!

    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".

    Bei w3schools.com fand ich ein rein CSS-basiertes Accordion, bei dem sich jeder zuvor geöffnete Inhalt automatisch wieder schließt, sobald ein weiterer Inhaltsabschnitt geöffnet wird. So weit die Theorie.


    Ich hab das Dingens in meine Experimentier-Website eingebaut und die einfache Collapse-Funktion geht auch auf Anhieb. Aber die mir wichtige vorbeschriebene Automatik des Schließen geht nicht. – Den Code habe ich zig mal auf Tippfehler sowohl CSS-seitig als auch HTML-seitig geprüft, auch auf evtl. Konflikte bei den Klassenbezeichnungen im vorhandenen Template: Alles OK.


    Hier der Link zu meiner aktuellen Experimentier-Site, dort unter "Collapse" schauen:

    Hier die von mir kommentierte Quelle bei w3schools.com

    Zuletzt hatte ich noch, so weit wie möglich, das Ganze mit dem Firefox-Inspektor geprüft, aber leider auch nix Auffälliges gefunden.


    Wie krieg ich die "Schließen-Automatik" ans Laufen, bzw. finde den Fehler?

    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?

    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?

    Zusatzfrage: Aktuell experimentiere ich wieder mit dem Protostar Standard-Profile. Es hat ein Grid mit 12 Spalten. Die Spaltenbreiten sind per CSS definiert. Die rechte Spalte ist mit lediglich 23% Breite definiert (span3). Ich benötige "span4" mit knapp 32%.

    In der index.php des Template werden die Breiten-Angaben den beiden Randspalten zugewiesen. Aber offensichtlich nicht nur dort. Denn wenn ich dort "span3" einfach gegen "span4" austausche, bleibt die Randspalte leer und auch dort platzierte Module werden nicht angezeigt.

    Da auch andere CSS-grid-basierte Templates ähnlich arbeiten, müsste es möglich sein, dass ich hier Tipps für Anpassungen erhalte.


    Oder bin ich etwa mit dem Angang meines vorigen Postings schon im Forum „in Ungnade gefallen“???

    Zitat

    Ich verlege meine Kabel auch lieber selber, weil die Elektrofirmen glauben es besser zu können.

    Alle Dienstleistungen, deren Zukauf ich mir nicht leisten kann oder auch nicht leisten möchte, versuche ich, durch eigene Leistungen zu ersetzen – ganz besonders, wenn mir das auch noch Freude bereitet. Deshalb gibt es ja Heimwerker, die qualifizierte Arbeiten als Tischler, Schweißer, Glaser, Elektriker, Maurer usw. durchführen. Was soll daran verwerflich sein?


    Zudem geht es mir hier darum, nicht Geld zu sparen, sondern meine Zeit zu sparen. Mir wären die Joomla-Arbeiten maximal 2.000 Euro wert gewesen. Aber die Anbieter wollten ja nicht meine Wünsche erfüllen, sondern ihr eigenes Ding durchziehen! Ich aber lasse es nicht zu, dass der Schwanz mit dem Hund wedelt.


    Nun wieder zum Thema:

    Bisher hatte ich immer die breit dargestellten Blog-Beiträge (main id="content") und wenn ich über Module einen Content anzeigen lassen wollte wie z.B. eine Menüleiste oder Kurzinformationen, so liegen die rechts davon am Rand (z.B. mit div id="aside"). Unterhalb einer bestimmten screenwidth habe ich diese entweder ausgeblendet oder aber unterhalb der Blog-Beiträge, also oberhalb des Footer angezeigt.


    Dies funktionierte prima bei "Eigenes Modul", wo ich die Anzeige des Inhalts einfach durch eine @media-Regel bestimmt hatte. War die nicht erfüllt, erschien der Inhalt des Moduls nicht, die Spalte blieb also frei von Content und somit nahm der Hauptbeitrag dann die ganze Breite ein.

    Aber wie kann ich dies bei den Modulen "Newsflash", "Beliebte" und "Neueste" erreichen?


    Frage im Detail: Was muss ich tun, damit das Modul Newsflash bei Unterschreiten einer screenwidth seine Position wechselt von "rechter Rand" zu "oberhalb Footer"?

    Und falls ein Positionswechsel per CSS-Anweisung nicht möglich ist, muss ich das Newsflash-Modul eben zwei mal anlegen, je Position ein Mal.

    Aber wo und wie definiere ich die @media screenwidth-Regel? Kann ich dies evtl. unter Modul/Erweitert/Modulklassensuffix eintragen?

    Habe doch noch etwas herum probiert: Pagebuilder usw. möchte ich nun nicht mehr einsetzen. U.a. denke ich, je komplexer ein System wird, desto störanfälliger.


    Mittlerweile habe ich eine dreiseitige Projektbeschreibung erstellt mit Links zu meinen Musterseiten, sodass Vieles, was nicht so einfach per Text definiert werden kann, nun auch anschaulich und zum Teil auch bereits funktional nachvollzogen werden kann. Fünf Joomla-Dienstleister habe ich damit angefragt. Fast alle haben so reagiert, wie ich es z.B. noch nie in Zeiten meiner Elektronikfirma erlebt habe: Sie haben mir Dinge angeboten, die ich nicht angefragt hatte, versuchten, mir meine Layoutvorstellungen auszureden und durch ihre eigenen zu ersetzen (Mehraufwand natürlich zu meinen Lasten) usw. usw.

    Es reicht mir jetzt! Ich werde meine Site doch lieber selbst verwirklichen.



    Daher frage ich hier jetzt, ob die Haupt-Aufgabe betreffend Template, nämlich den screenwidth-abhängigen Wechsel der Darstellung von einem einspaltigen zu einem zweispaltigen Layout (1/3 zu 2/3-Teilung) rein per CSS erledigt werden kann oder ob z.B. ein Eingriff in die index.php des jeweiligen Template erforderlich ist.

    Oder entsteht die verringerte Breite des Hauptbeitrags bereits automatisch dadurch, dass ich die in der rechten 1/3-Spalte platzierten Module per CSS auf width = 30% screenwidth begrenze?


    Ihr merkt sicher, dass ich bisher keine Ahnung von CSS-Grid-Systemen usw. habe, obwohl das bisher schon jahrelang von mir verwendete JYAML-Template durchaus mit einem CSS-Grid gearbeitet hat.

    Nun habe ich doch noch einige Fragen:

    • Welche Erfahrungen habt Ihr mit den sogenannten Joomla-Sitebuilder oder Pagebuilder oder Templatebuilder?
    • Wäre es voraussichtlich damit möglich, mein im ersten Beitrag beschriebenes Vorhaben evtl. auch ohne Joomla-Dienstleister umzusetzen? – oder würde ein Joomla-Dienstleister mir die Entwicklung günstiger anbieten können, wenn ein solcher "Builder" zum Einsatz käme?
    • Neigen diese "Builder" dazu, den Code der resultierenden Website aufzublähen (lange Ladezeiten)?


    Aktuell sind mir folgende "Builder" bekannt:

    • das schon genannte Gantry-5 Framework von RocketTheme
    • von Joomshaper der PageBuilder
    • der Kiolezo von digireg.com

    Gibt es Empfehlungen für einen bestimmten Builder? Dann sollten alle mir wichtigen Extensions bereits darin enthalten sein, nämlich:

    • MobileMenue
    • Modalbox / Lightbox (incl. Audio-Video-Abspielfunktion in der Box auf mögl. allen Geräteklassen)
    • Accordion
    • CSS-/JS-Kompression und SlowLoading von Bildern