Eigenes Modul CSS

Die Vorgehensweise findest du hier:

Erstelle ein einfaches Modul/Entwicklung eines Basismoduls – Joomla! Documentation

Die bester Vorgehensweise ist, Du erstellst im Modul einen Ordner "media" in diesem dann die Unterverzeichnisse "css" und "js" liegen. direkt im "media" Verzeichnis die Datei joomla.asset.json (siehe WebsAssetManager) https://docs.joomla.org/J4.x:Web_Assets

in der XML definierst Du dieses media-Verzeichnis:

<media folder="media" destination="name_des_modul">
    <folder>css</folder>
    <folder>js</folder>
    <file>joomla.asset.json</file>
</media>

Bei der Installation wird das dann unter Joomla in das Verzeichnis "media" kopiert und von dort aus aufgerufen.

Zitat von Wszene

Ich möchte dem Modul gern eine eigene .css Datei mitgeben

Meine Gegenfrage: aus welchem Grund?

Aus meiner Sicht wäre es viele einfacher, dem Modul über Erweitert eine Modulklasse (z.B. modulclass ) zu verpasen. Über die kannst Du dann in der user.css alle Anweisungen, die nur dieses Modul betreffen sollen, eindeutig zuordnen.

.modulclass . . .

Ich wäge da schon ab. Wenn ein Modul vielleicht recht üppig viel eigenes CSS haben soll, das Modul aber nicht auf allen Seiten angezeigt wird, dann kann es von Vorteil sein, eine eigene CSS zu laden. Auch, weil die Pflege vielleicht übersichtlicher wird.

Mich nerven immer Seiten, wo sich in user.css oder template.css zu viel Spaghetti-Zeugs befindet, was vielleicht gar nicht mehr relevant ist, weil die zugehörige Erweiterung längst nicht mehr verwendet wird,

Beschäftigung mit dem WAM lohnt sich jedenfalls, wenn man öfter mal Erweiterungen schreiben will. Damit geht so unsagbar viel. Längst nicht nur das, was in den Docs beschrieben wird. Auch bequemere Asset-Overrides für Erweiterungsnutzer zu definieren, die dann nicht in diesen unsäglich verschachtelten Ordnern liegen müssen etc. Oder Ladereihenfolgen festlegen, die dämliches !important reduzieren können. Das aber nur nebenbei. Als Motivation sozusagen

Zitat von Wszene

in welcher Datei muss ich jetzt diesen Code hinzufügen

Das kommt jetzt in die "mod_ws_test.php", wenn es für alle Template-Ausgaben (default.php) gelten soll.

Wenn man verschiedene Template-Ausgaben erstellt und zu jeder eine andere CSS / JS gilt, dann nimmt man das in dieser jeweils auf.

Du musst zuvor ja auch den WebAssetManager aufrufen. $wa gibt es an der Stelle ja noch nicht. Dann sollte das auch unterhalb von den define bzw. den Aufruf der benötigten Klassen. Auch der Aufruf des Template (ModulHelper) ist veraltet und wird bald nicht mehr funktionieren.

Du kannst Dir als Hilfe am besten aktuelle Module aus dem Core anschauen. Da kann man vieles entnehmen. Denn selbst diese Aufbau gilt schon wieder als veraltet und man geht mehr auf die Dispatcher-Methode. Das sieht man am besten an der "mod_custom". Im Modul "mod_articles_news" kann man sich den Aufruf der helper.php anschauen.

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Helper\ModuleHelper;

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->useStyle('mod_ws-test1');
$wa->useScript('mod_ws-test');

// hier der Rest

// Aufruf des Template
require ModuleHelper::getLayoutPath('mod_ws_test', $params->get('layout', 'default'));

Du musst in der XML auch das JSON-File mit angeben.

in der Modul PHP am Ende kein ?>

Aus JModuleHelper wird einfach nur ModuleHelper (ohne J)

Was noch dazu nicht passt, das sind die unterschiedlichen Schreibweisen des Moduls. Mal mit Unterstrich und im Media-Verzeichnis mit Bindestrich. Das passt nicht zusammen. Die Verzeichnisse müssen einheitlich sein und ich würde auf Bindestrich in Dateinamen / Verzeichnisse sowieso verzichten.

Ah - habe ich fast übersehen.

Eine entschiedene Zeile fehlte noch. Das JSON muss natürlich auch registriert werden, sonst findet der WA das nicht:

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->getRegistry()->addRegistryFile('media/mod_ws_test/joomla.asset.json');
$wa->useStyle('mod_ws_test');
$wa->useScript('mod_ws_test');

In der JSON habe ich den Namen einheitlich mit mod_ws_test umbenannt. Du musst da keine unterschiedlichen Namen verwenden.

"assets": [
    {
        "name": "mod_ws_test",
        "description": "Diese CSS stylt das Modul",
        "type": "style",
        "uri": "mod_ws_test/mod_ws_test.css"
    },
    {
        "name": "mod_ws_test",
        "type": "script",
        "uri": "mod_ws_test/mod_ws_test.js"
    }
]

Zitat von Re:Later

Mich nerven immer Seiten, wo sich in user.css oder template.css zu viel Spaghetti-Zeugs befindet, was vielleicht gar nicht mehr relevant ist, weil die zugehörige Erweiterung längst nicht mehr verwendet wird,

Das ist alles grundsätzlich richtig.

Wenn alter, unbenutzter Code vorhanden ist , ist das natürlich vor allem ein (schweres) Versäumnis des Entwickler. Unterschieden werden sollte allerdings zwischen Dienstleistern, die so was natürlich zu recht gar nicht mögen, und den Webseiten-"Designer" wie mich, die nur 2 Webseiten gestalten und schon aus Zeitgründen darauf achten (sollten), dass im Eigeninteresse alles "einfach - eindeutig - sicher" ist.

Vorausetzung dafür sind regelmäßige Reviews der User.css und der use .js und ausführliche Dokumentationen. Da, wo allerdings die Komponente (wie z.B. JEvents) bereits integration von CSS und JS anbieten, habe ich natürlich gerne darauf zurückgegriffen.

Was ich sagen will: letztlich entscheidet jeder selbst, welche Vorgehensweise für ihn die beste ist. Ich selbst bevorzuge wenn möglich einfache bis sehr einfache Lösungen.

Übrigens: die Modulklasse gibt mir auch die Möglichkeit bestimmte Operationen auf mehrere Module (der gleichen Klasse) ohne Zusatzaufwand anzuwenden.

Wenn man ein eigenes Modul erstellt, das installierbar ist, ist die richtige Vorgehensweise CSS und JS mitzuliefern, wie LukasHH schon beschrieben hat. Sonst müsste man in jedem Projekt, wo das Modul installiert wird, CSS und JS in user.css bzw. user.js einfügen ...

Hallo zusammen,

zum Zeitpunkt eurer Beiträge fehlte ja noch die offizielle Dokumentation, wie es gehen soll. Die gibt es jetzt unter https://manual.joomla.org. In Anlehnung an das dortige Beispiel sieht meine xml-Datei so aus:

   <files>
       <folder module="mod_ws_test">services</folder>
       <folder>src</folder>
       <folder>tmpl</folder>
       <filename>mod_ws_test.xml</filename>
   </files>
    <media destination="mod_ws_test" folder="media">
       <filename>joomla.asset.json</filename>
       <folder>css</folder>
   </media>

und die erste Ebene in der ZIP-Datei sieht so:

  <DIR> css
    411 joomla.asset.json
    944 mod_ws_test.xml
  <DIR> services
  <DIR> src
  <DIR> tmpl 

Beim Installieren wird der Ordner unter /media /mod_ws_test angelegt und darunter die Datei joomla.asset.json und der Ordner css einsortiert. Der Rest landet wie erwartet unter /modules.

Nur falls noch einmal jemand über dieses Problem stolpert!