Änderung des Abstandes zwischen zwei Modulen auf der selben Position mittels custom.css

    Guten Morgen zusammen...


    Info > Joomla-Version 3.9.2, Template: Joomshaper Helix Ultimate, Modultyp: Joomla-Core - eigenes Modul

    Ich versuche gerade mittels custom.css den Abstand von zwei Elementen auf der selben Modulposition zu beeinflussen. Über die Entwicklerkonsole bin ich folgenden Weg gegangen.




    Wenn ich in der Entwicklerkonsole testweise die Anpassungen vornehme und den Wert von 50px auf -45px verändere bin ich mit dem Resultat zufrieden.




    Ich habe in der custom.css außerdem für diese Modulposition auch schon einen Style (.style-box-right) definiert der einen box-shadow hinter die Position legt und diesen im Layout-Builder eingetragen:


    Wie muss ich diese beiden Anweisungen schreiben dass sie unter dem selbst erstellten Style (.style-box-right) funktionieren?

    Mir ist außerdem aufgefallen, dass die Änderungen mit dem box-shadow nicht direkt gegriffen haben, sondern erst sichtbar waren, als ich das Frontend am nächsten Tag wieder aufgerufen habe. Liegt das am "Joomla-Internen" Cache bzw. abgelaufenen Cache? Dieser ist in der Konfiguration allerdings deaktiviert...

    Zitat von m4rt1n

    Wie muss ich diese beiden Anweisungen schreiben dass sie unter dem selbst erstellten Style (.style-box-right) funktionieren?

    Kommt darauf an wann die custom.css geladen wird. Evtl kannst Du den Selektor einfach erweitrern um eine höhere Priorität zu erlangen. M it einem Link könnten wir effektiver halfen.

    Zitat von m4rt1n

    Mir ist außerdem aufgefallen, dass die Änderungen mit dem box-shadow nicht direkt gegriffen haben, sondern erst sichtbar waren, als ich das Frontend am nächsten Tag wieder aufgerufen

    Entweder Dein Browsercache oder es gibt serverseitig vom Hoster noch einen Cache.

    Link zur Seite...

    Zitat von Luzi

    wo hast du denn die .style-box-right definiert? Im Modul?

    Hey Luzi, die .style-box-right ist im Template in den Column-Options unter Custom-CSS-Class eingetragen und ist wie oben zu sehen in der custom.css angelegt. Der Punkt vor (.)style-box-right darf ja laut JS-Doku in der Modulposition nicht angegeben sein und die Sache mit dem Box-Shadow funktioniert ja auch.




    Zitat von Indigo66

    Entweder Dein Browsercache oder es gibt serverseitig vom Hoster noch einen Cache.

    Du meinst mit dem "Cache beim Hoster" einen weiteren Cache außer dem der in der Konfiguration im Unterpunkt System aktivierbar ist?

    Welchen Zweck erfüllt oder besser gesagt, welchen Vorteil bringt dieser eigentlich generell im aktivierten Zustand?

    Deine CSS ist komptimieri und zusammenfefügt, so lässt sie das nich debugen und erkennen wer wo was überschreibt.

    Zitat von m4rt1n

    Du meinst mit dem "Cache beim Hoster" einen weiteren Cache außer dem der in der Konfiguration im Unterpunkt System aktivierbar ist?

    Ja von Hoster, habe ich schon erlebt. Vor allem bei Billighostern die tausende von Kunden auf einem Server haben und Ressourcen und Performance sparen müssen.
    Muss in einem Fall nicht unbedingt sein, daher der Tipp mit dem Browsercache der in den meisten Fällen für diesen Effekt sorgt.

    Zitat von m4rt1n

    Ist deaktiviert...

    Damit sollte auch das Cacheproblem behoben sein.


    Dein Eintrag in der custom.css wird von


    Code
    #sp-left .sp-module:first-child, #sp-right .sp-module:first-child {
    margin-top: 0;
}

    in der template.css Zeile 196 überschreiben.

    Versuche es mal mit der Erweitern des Selektors.

    .style-box-right .sp-module, .style-box-right #sp-right .sp-module {

    Zitat von Re:Later

    Nur so: Dann schalte halt das Plugin JCH-Optimize während der Arbeit ab. Schon mal eine "Suchlast" weniger.

    Verständnisfrage: Woran ist ersichtlich, dass es aktiviert ist?

    Zitat von Indigo66

    Damit sollte auch das Cacheproblem behoben sein.

    Tatsache - Läuft! Die Änderungen sind nun direkt sichtbar und der Code wie ich ihn oben in die custom.css eingetragen habe funktioniert.

    Darf ich das als allgemeinen Tipp verstehen, während der Erstellung bzw. vor Live-Schaltung das JCH-Optimize-Plugin deaktiviert zu lassen?

    Zitat von m4rt1n

    Darf ich das als allgemeinen Tipp verstehen, während der Erstellung bzw. vor Live-Schaltung das JCH-Optimize-Plugin deaktiviert zu lassen?

    Das kommt darauf an. Wenn du den JCH während der Erstellung der Website schon aktiviert hast, dann wirst du frühzeitig auf Probleme aufmerksam gemacht, die durch den JCH entstehen können. Manche Erweiterungen arbeiten nicht korrekt, wenn Ihre JS und/oder CSS Dateien vom JCH komprimiert und in einer Datei zusammengefasst werden. Es wäre nicht gut, wenn du das erst nach dem Online-Schalten merken würdest.

    Wenn du aber konkret nach einem Fehler suchst, dann würde ich ihn vorübergehend deaktivieren (und den Cache löschen). So sind nicht nur die Dateien beim Debuggen besser lesbar. Es wird auch die Fehlerquelle "Änderungen durch JCH" erst einmal ausgeschlossen.

    DOKUMENTATION: Letztendlich habe ich meine gewünschten Anpassungen mit folgendem Code in der custom.css hinbekommen. Nur mit .sp-module voraus hat sich die Änderung auch auf andere Positionen ausgewirkt.

    Vielen Dank an alle Mitdenker und den sehr hilfreichen Support! Ihr seid Spitze!