Templatestile-Bearbeitung: CSS, JS nachladen (JForm-Feld) (Stand: Joomla 3.4.8)

Wenn man ein eigenes Template entwickelt hat, will man vielleicht in den Einstellungen für die Templatestile im Backend die Optik etwas aufpeppen, um sich von anderen Templates abzusetzen, oder braucht einen JavaScript-Schnipsel für dieses oder jenes. Wie man das Nachladen von (nicht nur) CSS und JS mit einem eigenen JForm-Formularfeld einfach hinkriegt, zeigt dieses Crash-Tutorial.

Bild in größter Auflösung öffnen (Popup)

Vorbereitung

Mein Testobjekt ist das Protostar-Template im Joomla-Verzeichnis /templates/protostar/.

Ich lege im /protostar/-Template-Ordner einen Unterordner /backend/ an. Die folgenden Ordner- und Datei-Benennungen sind nicht verpflichtend, denke mir nur, dass ein Benutzer des Templates dann bessere Orientierung hat, wenn sprechend und human-readable benannt.

Folgende Dateien lege ich an

/templates/protostar/backend/backend.css

ul.nav.nav-tabs > li > a{
 background-color: yellow;
}
ul.nav.nav-tabs > li.active > a{
 background-color: blue;
 color: white;
}
ul.nav.nav-tabs > li > a[href="#details"]{
 border: 2px solid green;
}
ul.nav.nav-tabs > li > a[href="#attrib-advanced"]{
 border: 2px solid gold;
}
ul.nav.nav-tabs > li > a[href="#assignment"]{
 border: 2px solid orange;
}

/templates/protostar/backend/backend.js

alert("backend.js geladen");

Das Formularfeld vom eigenen Typ protostarbe

Ich lege einen weiteren Ordner und PHP-Datei an. Bei der Benennung von Dateien für eigene JForm-Felder sollte man den Namen in Kleinschrift halten. Ich verwende nur ASCII-Zeichen a bis z. Dann geht verlässlich nichts schief.

/templates/protostar/backend/fields/protostarbe.php

Beachten Sie Zeilen 3 und 5, in denen explizit der Name, besser Typ, bei mir protostarbe, des Feldes genannt werden muss. Der Dateiname muss ebenso lauten. Beim Klassennamen und auch beim $type darf man bzgl. Groß-Kleinschrift spielen.

<?php
defined('JPATH_PLATFORM') or die;
class JFormFieldProtostarBe extends JFormField
{
 protected $type = 'protostarbe';
 protected function getInput()
 {
  $doc = JFactory::getDocument();
  $doc->addStyleSheet(JUri::root(true) . '/templates/protostar/backend/backend.css');
  $doc->addScript(JUri::root(true) . '/templates/protostar/backend/backend.js');
  return '';
 }
}

Anpassung in existierender Datei /templates/protostar/templateDetails.xml

Ich füge addfieldpath dem <fields-Tag hinzu, um Joomla mitzuteilen, wo es die Formularfelder des Templates findet. Sollte dort schon ein Pfad eingetragen sein, können Sie ihn auch in einem anderen Tag hinterlegen, auch im FIELD selbst oder einem anderen. Es reicht, ihn 1x (fast) irgendwo in der XML-Datei zu haben

<fields name="params" addfieldpath="templates/protostar/backend/fields">

Innerhalb des <fieldset-Tag namens basic füge ich mein neues Formularfeld als Parameter ein bzw. hinzu, falls dieses FIELDSET schon existieren sollte. Das hidden="true" sorgt dafür, dass das Feld tatsächlich komplett unsichtbar ist. Ohne das hidden würden wenigstens leere DIV-Container im Formular erzeugt, die zu unschönen Abständen und Einrückungen etc. führen können.

 <fieldset name="basic">
   
  <field
   type="protostarbe"
   name="protostarbeName"
   label=""
   description=""
   hidden="true"
  />
   
 </fieldset>

Backend-Test

Ich rufe den Templatestil des Protostar-Templates in der Joomlaadministration auf und werde von einem JavaScript-Alert begrüßt. Datei backend.js wurde also korrekt geladen.

Bild in größter Auflösung öffnen

Nachdem ich die Alert-Box weggeklickt habe, ist alles so schön bunt hier. Die Datei backend.css wurde also auch geladen.

Bild in größter Auflösung öffnen

Noch ein Blick in den Seitenquelltext meiner XAMPP-Testumgebung. Alles gut.

...
<link rel="stylesheet" href="/joomla/templates/protostar/backend/backend.css" type="text/css" />
...
<script src="/joomla/templates/protostar/backend/backend.js" type="text/javascript"></script>
...