mobile Ansicht optimieren

    Joomla Version
    4.4.2
    PHP Version
    PHP 8.1.x
    Hoster
    Alfahosting
    Link (URL) zur Seite mit dem Problem
    www.sgcessen.de

    Hallo zusammen!


    Ich habe eine schlichte Seite (4.4.2) mit dem Template J51_scarlett: http://www.sgcessen.de

    Ich möchte gerne die mobile Ansicht der Seite verbessern. Die Darstellung der Artikel ist nicht besonders gut, ich hätte gerne weniger padding, Schriftgrößen optimieren, Texte sollen nicht abgeschnitten werden etc. und der Umgang mit Bildern sollte auch anders werden.


    Ich kenne Joomla zwar schon seit über 10 Jahren, hab' aber noch nie wirklich tiefgreifend an einem Template gearbeitet. Natürlich kenne ich etliche HTML-Befehle/Attribute etc. aber ich komme zu selten damit in Berührung, um wirkliches Fachwissen aufzubauen. Es ist immer eher ein Trial-and-Error bis das Ergebnis einigermaßen passt.


    Im Moment weiß ich leider gar nicht so recht, wo ich anfangen soll und welche Dateien ich überhaupt anpassen muss.


    Ich wäre glücklich, wenn ihr mir ein Tipps geben könntet.

    Nun ja, das kommt ja auch darauf an, was dein J51 Scarlet Template in Sachen responsiv Display anbietet.

    Ich kenne das Template nicht und wir arbeiten schon lange mit den Templates und Modulen von Joomlaplates.

    Joomla 4 Templates und Joomla 3 Themes - Joomlaplates

    Basis ist hierbei das Astroid Framework, mit dem du sehr viele Gestaltungsmöglichkeiten hast.

    Es gibt für Astroid auch kostenlose Templates:

    Home

    Nicht nur Joomlaplates baut gute Templates, auch die Templates von Joomla51 haben eine sehr hohe Qualität.

    Ich kenne jetzt J51_Scarlett nicht, sondern nur ein anderes Template von Joomla51. Hier gibt es in den Template-Einstellungen die Möglichkeit, CSS für die Mobilansicht einzufügen (unter General - Responsive Options); ich weiß allerdings nicht, ob das beim älteren Scarlett auch geht.

    Was für die Mobilansicht manchmal hilft, ist das Einschalten der Silbentrennung, das in allen modernen Browsern wirkt. Das geht in der custom.css mit:

    Code
    body {
    hyphens: auto;
}

    Wenn Du mehr Kontrolle über die Silbentrennung haben willst, kannst Du diese Erweiterung verwenden.


    Wenn Du die Thumbnails in der Bildergalerie ein wenig verschönern willst, kannst Du das in den Erweiterten Einstellungen des Content-Plugins von sigplus machen, z.B. so:

    Vielen Dank für die schnelle und multiple Hilfe! :)


    WM-Loose

    Wenn es demnächst einen größeren Relaunch der Seite geben soll, werde ich mir Joomlaplates mal ansehen. Aber für jetzt muss ich damit klar kommen, was J51 Scarlet anbietet.


    chr-hl, Dautrich

    Es gibt mehrere Punkte, die ich verändern möchte. Ich werde dazu sicher ein bisschen experimentieren müssen. Ja, an eigenes CSS habe ich auch schon gedacht. Die Angabe von einzelnen CSS-Attributen sollte nicht das Problem sein. Es ist viel mehr das gesamte CSS-Konstrukt, womit ich Schwierigkeiten habe.

    (wie verwende ich Klassen korrekt? Wo genau muss ich CSS-Attribute verändern, damit der gewünschte Effekt eintritt? etc.)

    Über die Webentwickler-Tools kann ich ja im Browser die Mobilansicht einstellen. Gleichzeitig kann ich CSS live modifzieren und dadurch prüfen, welche Einstellungen im Code modifiziert werden müssen.

    Wenn ich dort bspw. das Padding in der Mobilansicht verändere und dann wieder zur Desktop-Ansicht wechsle, greift der veränderte Wert auch dort. Bedeutet das, dass ich für die Mobilansicht eine separate Klasse anlegen muss?

    (ich hoffe, ich konnte das verständlich erklären)


    Dautrich

    "hyphens: auto;" kannte ich noch nicht! Werde ich ausprobieren.

    Ich muss allerdings erstmal die Stelle finden, wo ich das einsetzen muss.

    Im Joomla-Backend sehe ich eine Vielzahl von Dateien, aber wie finde ich jetzt die richtige Stelle wo ich was einfügen soll?


    Kenne mich mit dem Template auch nicht aus.

    Aber du verwendest ja bereits eine custom.css dort:


    https://www.sgcessen.de/templates/j51_scarlett/css/custom.css


    und kannst diese Datei um entsprechende CSS-Styles ergänzen.


    Kannst alternativ auch mal eine custom.css Datei in

    media/templates/site/j51_scarlett/css/custom.css

    erstellen und testen ob die enstsprechenden CSS-Styles in dieser Datei dann auch verwendet werden.

    Zitat von Frallowitsch

    Ich muss allerdings erstmal die Stelle finden, wo ich das einsetzen muss.

    Im Joomla-Backend sehe ich eine Vielzahl von Dateien, aber wie finde ich jetzt die richtige Stelle wo ich was einfügen soll?

    Du solltest niemals die Dateien des Templates direkt ändern. Bei den Templates von Joomla51 musst Du eine custom.css in der unteren Struktur unter "css" erstellen. Dort kommen Deine Anpassungen rein, z.B. mein Code oben für die Silbentrennung.

    Wenn Du in den Entwicklertools des Browsers eine neue CSS-Regel erstellt und getestet hast, kannst Du die per Rechtsklick kopieren und in Deine custom.css einfügen. Dann Cache löschen (ich nutze den Cache Cleaner von Regularlabs) und das Frontend mit STRG-F5 neu laden.

    Ich verstehe nicht so ganz, warum Du in Mobil- und Desktop-Ansicht unterschiedliches Padding verwenden willst. Für welche Elemente?

    Es gibt wohl auch die Möglichkeit die enstsprechenden CSS-Styles in den Template-Stil einzutragen oder das verwenden der custom.css einzuschalten was derzeit wohl auch der Fall ist:

    aus:

    www.sgcessen.de/templates/j51_scarlett/templateDetails.xml

    Zitat von Sieger66

    Es gibt wohl auch die Möglichkeit die enstsprechenden CSS-Styles in den Template-Stil einzutragen

    Genau. Bei J51 Template geht man im Backen unter: SYSTEM -> SITE TEMPLAE STILE -> DEIN verwendeter STIL-> auf den REITER: CUSTOM CSS

    dort kann man seine Änderung eintragen und es ist update sicher...
    Für den Responisve Mode gibt es auch noch mal ein extra bereich wo man css eintragen kann (GERNERAL / Responisve Option)

    eumel1602

    Genau diesen Bereich hatte ich gestern bereits entdeckt und dort auch die separaten Felder "Tablet (Portrait), Phone (scape/Portrait)" für Custom CSS. Das ist genau das wonach ich gesucht hatte. Hätte dann doch nicht gedacht, dass es so einfach ist.



    Danke für Eure Hilfe! Alles klar, verstanden Dautrich, Dateien des Templates werde ich nicht (niemals) ändern 🫡
    Ist auch logisch, bei einem Update würde das ja auch wieder überschrieben werden.