Nachladen von CSS in Joomla

Mit dieser Methode lässt sich ein CSS-Switch erstellen.
Wichtig vor allem für Barrierefreie Webseiten. Damit kann der Kontrast mittels einem Link verändert bzw. überschrieben werden. Funktioniert evtl. nicht bei eingeschalteten System Cache .

Eine neue CSS- Datei erstellen(in meinem Fall kontrast.css) und die Bereiche die verändert werden sollen festlegen.
Zur Sicherheit die Anweisungen noch mit dem Zusatz !important auszeichnen.
z.B.

body{
 color: #fff !important; background: #000 !important;
 }

Im Body Tag oder im Head- Bereich diesen JavaScript einfügen.

<script type="text/javascript">// <![CDATA[ function cssSwitch() { var e = document.createElement("link"); e.type = "text/css"; e.rel = "stylesheet"; e.href = "<?php echo $this->baseurl ?> /templates/<?php echo $this->template ?>/css/kontrast.css"; document.getElementsByTagName("head")[0].appendChild(e); } // ]]></script>

Die Links habe ich in einem Neuen Modul integriert:
Modul: Eigene Inhalte (Leeres Modul)
In dem Modul kann man auch gleich die Style-Formatierungen festlegen.
Oder man bindet das HTML in einer Klasse oder Div und hat damit die Möglichkeiten in der CSS-Datei auf das äußere Einfluss zunehmen.

<a href=<?php echo $this->baseurl ?>"javascript:cssSwitch()">Kontrast+</a>

Sollte der HTML-Editor den HTML-Code ignorieren.
Muss man es im Plugin z.B. Editor - TinyMCE explizit erlauben.
Eine andere Möglichkeit ist das Joomla-Plugin Sourcer zu verwenden.

Um die Möglichkeit eines Reset anzubieten:

<a href=<?php echo $this->baseurl ?>"javascript:location.reload()">Reset</a>
Damit wird die Seite wieder Neu geladen.

Der Code für die formatierten Links sehen bei mir zum Beispiel so aus:

<a href=<?php echo $this->baseurl ?>"javascript:cssNachladen()"> Kontrast+</a> <a href=<?php echo $this->baseurl ?>"javascript:location.reload()">Reset</a>

Achtung! Bei Joomla 3 funktioniert das Script nicht mehr in einem Modul heraus.
In der index.php muss die absolute Pfadangabe gemacht werden.

<script type="text/javascript">
function cssNachladen() {
var e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.href = "<?php echo $this->baseurl ?>/templates/meinTemplate/<?php echo $this->
template/meinTemplate ?>/css/kontrast.css";
document.getElementsByTagName("head")[0].appendChild(e);
}
</script>

Der Link muss ebenfalls in der Index.php an gegebener Stelle integriert werden.
In meinem Fall im Website-content :
<a href=<?php echo $this->baseurl ?> "javascript:cssNachladen()"> Kontrast+</a> <a href=<?php echo $this->baseurl ?>"javascript:location.reload()">Reset</a>