Zwei Fakten waren mir bekannt – ich habe sie auch eingesetzt:
1.) Das Template kann man mit Parametern steuern und damit auch Template-Stile einfach einsetzen,
2.) css-Variablen versüßen einem das Styling, ohne einen Präprozessor einsetzen zu müssen.
Aber wie – verflixt noch einmal – kann man einen Parameter so einsetzen, dass er als css-Variable nutzbar wird? Und das möglichst ohne Programmierung. Es hat ein paar Tage gebraucht und die Hilfe von Chris Schaffrath (vielen Dank für deine Hinweise), bis die simple Lösung gefunden war. Hier das Ergebnis zum Selbermachen. Solltet ihr Probleme feststellen, die ich noch nicht erkenne, freue ich mich um ein konstruktives Feedback.
- Schritt 1 – Parameter in templateDetails.xml anlegen
- Schritt 2 – Parameter in index.php abrufen und als css-Variable hinterlegen
- Schritt 3 – Wichtig! Interne Styles mit den Variablen vor den anderen Styles laden!
- Schritt 4 – css-Variable in Stylesheets verwenden
Beispiel:
Schritt 1: Wir legen einen Colorpicker als Template-Parameter im Unterordner Erweitert (advanced) an<config>
<fields name="params"><fieldset name="advanced">
<field name="wunschfarbe" class="" type="color" default="#97aa26"
label="TPL_TPLNAME_WUNSCHFARBE"
description="TPL_TPLNAME_WUNSCHFARBE_DESC"
/>
</fieldset>
</fields>
</config>
Schritt 2: Internes Style anlegen und Parameter als css-Variable speichern<style>
:root {
--wunschfarbe: <?php echo $this->params->get('wunschfarbe'); ?>;
}
</style>
Schritt 3: Internes Style nach oben bringen<head>
<style> ... </style>
<jdoc:include type="head" />
...
</head>
Schritt 4: css-Variable in Stylesheet einsetzenh1 {color: var(--wunschfarbe);
Damit eröffnet sich ein interessantes Feld an Möglichkeiten, um dem Kunden eine flexible Auswahl an Parametern im Template zu bieten, ohne extra Programmierung.