Cassiopeia, template.css Dateien

  • Hallo,

    ich arbeite mich in Joomla 4/Cassiopeia ein.

    Meine Änderungen in user.css sind wirksam.


    Aber, es gibt auch

    template.css (wie von Protostar gewohnt)

    template.min.css (vermutlich eine template.css ohne Zeilenumbruch)

    template-rtl.css

    template-rtl.min.css


    Wie muss ich diese Varianten einordnen, wenn user.css auch ohne .min und -rtl funktioniert?


    vG

  • Joomla 4 lädt automatisch die .min-Variante, wenn eine existiert.


    Ist Debug-Modus in der Konfiguration aktiv, lädt Joomla die nicht-min.


    Dabei ist es egal, welche Variante man in seinem Code "angefordert" hat.

    (Was mich ziemlich nervt manchmal.)


    rtl heißt rechts-nach-links. Diese wird also nur für rtl-Sprachen geladen.


    In der index.php findest diese Zeile:

    Code
    $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
    ...

    Die fordert also das entsprechende "preset" an, je nachdem ob rtl- oder ltr-Sprache.

    Sagen wir mal es ist rtl.


    In der joomla.asset.json des Templates findest für dieses rtl-"preset" den Block:

    Code
    {
    "name": "template.cassiopeia.rtl",
    "type": "preset",
    "dependencies": [
     "template.cassiopeia.rtl#style",
     "template.cassiopeia#script"
    ]
    }

    Die "dependencies"-Angaben sorgen dafür, dass diese beiden Blöcke verwendet werden:

    Code
    {
    "name": "template.cassiopeia.rtl",
    "description": "The css file to be used when the site is right to left (RTL).",
    "type": "style",
    "uri": "template-rtl.min.css",
    "dependencies": [
     "fontawesome"
    ]
    }

    Die user.css wird über diesen Block angesprochen:

    Code
    {
    "name": "template.user",
    "description": "A file where a user can add their own css.",
    "type": "style",
    "uri": "user.css",
    "dependencies": [
        "template.active",
        "template.active.language"
    ]
    }

    Hier sind die dependencies eher unter "verquaste Denke" einzuordnen ;-) , also was anderes als in dem "preset" oben. Normalerweise werden dependencies vor dem jeweiligen Block automatisch mitgeladen. Im obigen Beispiel wird z.B. auch immer "fontawesome" geladen.


    In der index.php findest dazu

    Code
    ->useStyle('template.user')

    Sie ist also rtl-, ltr-unabhängig.


    Wenn du entsprechende user-rtl.css usw. verwenden, musst halt die joomla.asset.json in einer Kopie des Templates anpassen. Vielleicht in den rtl-, ltr-"presets" je eine zusätzliche Dependency oder so. (Mach ich nach Lust und Laune).


    Und dann halt analog oben für beide ein "type":"style"-Block in die joomla.asset.json.


    ---- oder verzichtest und lädst sie halt old-fashioned ("joomla-3-like"). anhand

    Code
    $this->direction

    -Ermittlung.

  • Wie kommt man an diese Informationen? Alles was ich so google ist doch eher oberflächlich.
    Insbesondre, wenn es um Klassen geht, die ich in user.css verwenden will. Dann muss ich oft raten und probieren.

    Du kannst den Aufbau von Joomla (Code) und seinen Dateien analysieren. Da bedarf es dann aber einiger Kenntnisse.


    Wenn es aber nur darum geht, ein paar CSS-Formatierungen zu ändern oder zu erstellen, dann analysiert man die entsprechende Webseite mittels F12 im Browser und ermittelt die verschiedenen Klassen, die zu ändern sind. Das ist dann vom verwendeten Template oder der verwendeten Erweiterung abhängig. Das kann dann sehr individuell sein, weshalb man meist auch nichts Konkretes googeln kann. Template-Anbieter geben auf ihren Webseiten meist Tipps zu häufigen Problemen.

    Die user.css wird aber immer zum Schluss geladen, weshalb du dich um die anderen css-Dateien nicht wirklich kümmern musst.

  • Wie kommt man an diese Informationen?

    Zeit und Schweiß. Ich probiere halt rum. Aber immer nur auf bestimmte Änderungen, die ich mal probieren will, ausgerichtet. docs.joomla.org korrigiere/ergänze ich nur selten mal, aber selber nutzen tue ich sie fast gar nicht mehr ;-)


    Unser Thema hier ist auch viel zu komplex (oben reiße ich ja nur an), was einer der ersten Kritikpunkte an diesem "Zeugs" war, dass man da sinnvoll mal nebenbei ein Tutorial schreiben könnte. Entweder wird es viel zu lang, was ermüdend für Leute ist, die ja "nur mal eben"... oder es ist viel zu kurz und "wissenschaftlich", weil man das nötige Basis-Wissen schon voraussetzt.


    Nur nebenbei: Das Ganze eskaliert zusätzlich, weil ja mittlerweile pro CSS-Datei 3 Varianten vorliegen, wer genau hinschaut. Wenn man den DEBUG-Modus aktiviert, um garantiert die unminifizierte zu laden, wird zu viel zusätzlicher Kram geladen und sogar die Reihenfolge teils geändert, so, dass das nicht wirklich immer eine praktikable Lösung ist.


    Und JavaScript-Dateien bis zu 6. Einen old-fashioned Override zu erstellen, ist erst mal Forschungsarbeit. Ginge aber mit der joomla.asset.json "bequemer". Hat man nun aber ein Template, dass bei Updates die Datei wieder überschreibt ...


    Und zu Klassen finden, user.css etc. hat JoomlaWunder ja schon gesagt. Wer was ändern will, muss sich halt mit Inspektor einarbeiten oder spezifisch fragen. Ein Problem dabei ist, dass zwar vieles auf Bootstrap 5 basiert (was hervorragend dokumentiert ist), aber nicht wirklich Bootstrap 5 (wie dokumentiert) ist. Anders: die meisten BS-5-Klassen tun schon wie sie sollen, aber werden nicht immer auch im Template verwendet.


    Glück hat man, dass Cassiopaia jetzt nicht auch noch SourceMaps verwendet. Dann muss man nämlich auch noch den Browser-Inspektor umkonfigurieren ;-)


    Zu user.css allgemein: Man sollte nicht vergessen, dass das eine zusätzliche Datei ist, die geladen wird. Manchmal ist es vielleicht doch besser(?), einfacher(?) mit einer Kopie des Templates zu arbeiten und direkt in den template.css zu arbeiten (????). Zumindest, wenn man größere Änderungen macht(???).


    Cassiopaia war für mich aber eh nie ein Thema. Ich habe das nie gemocht ;-) Nur zum Kaputtmachen bei Tests und Rumprobieren ;-)