Templatefehler durch CSS im TPL

Warum stört Inline-CSS die Templatekompilierung?

Die WoltLab Suite verwendet die leistungsstarke Template-Engine Smarty (bzw. ein darauf basierendes eigenes System), um HTML-Inhalte dynamisch zu verarbeiten und zu kompilieren. Die Engine sucht im Template-Code nach geschweiften Klammern ({ und }), um Template-Logik, Variablen oder Sprachvariablen (z. B. {lang}wcf.global.button.save{/lang}) zu identifizieren.

Wenn du nun klassischen CSS-Code innerhalb eines <style>-Tags direkt im Admin-Control-Panel (ACP) Template platzierst, nutzt CSS exakt dieselben geschweiften Klammern für Selektoren (z. B. .myAdminBox { color: red; }). Die Template-Engine versucht fälschlicherweise, diesen CSS-Block als Template-Befehl zu interpretieren. Das Resultat ist ein Kompilierungsfehler (Template compilation error), und die betroffene Seite im ACP bleibt weiß oder bricht mit einer Fehlermeldung ab.

Antipattern (Negativbeispiel):

So sollte ein ACP-Template nicht aussehen, da es den Kompilierungsfehler provoziert:

<!-- Schlechtes Beispiel: Führt zum Absturz des Templates -->
<style>
    .acpSpecialBadBox {
        background: #fff; /* Die Engine stolpert über diese Klammern */
        padding: 10px;
    }
</style>
<div class="acpSpecialBadBox">Inhalt</div>

Die saubere Lösung: CSS auslagern und einbinden

Um den Fehler zu vermeiden und den Coding-Standards von WoltLab zu entsprechen, sollte CSS niemals hart in ein Template geschrieben werden. Stattdessen wird der Stil ausgelagert und über das Pluginsystem sauber registriert.

Schritt-für-Schritt-Lösung über Template-Listener

Der eleganteste Weg für ACP-Komponenten läuft über einen Event- bzw. Template-Listener:

SCSS/CSS-Datei erstellen: Erstelle eine eigene Styling-Datei (z. B. acpMyPlugin.scss) und packe sie in den Dateistamm deines Plugins (unter style/acp/).
Template-Listener registrieren: Registriere in deiner templateListener.xml einen Listener, der deine Stile gezielt in den Header des ACPs lädt.

Beispiel für die templateListener.xml:

<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/vortex/templateListener.xsd">
    <import>
        <templatelistener name="acpMyPluginStyles">
            <environment>admin</environment>
            <targettemplate>headInclude</targettemplate>
            <eventname>stylesheets</eventname>
            <templatecode><![CDATA[<link rel="stylesheet" type="text/css" href="{@$__wcf->getPath('wcf')}style/acp/acpMyPlugin.css" />]]></templatecode>
        </templatelistener>
    </import>
</data>

💡 Schneller Workaround: Das {literal}-Tag

Falls es sich um eine winzige Anpassung handelt und das Auslagern kurzfristig zu aufwendig ist, kannst du die Template-Engine mithilfe des {literal}-Tags anweisen, den eingeschlossenen Bereich zu ignorieren. Das löst das Problem direkt im Template, gilt architektonisch jedoch als unschön:

{literal}
<style>
    .acpWorkaroundBox { display: none; }
</style>
{/literal}

Schlagwörter