CSS Templates


Die zweite Art an XenForo-Vorlagen ist für die Verwendung von CSS 3 entwickelt.

 

Diese Vorlagen steuern das Aussehen der XenForo-Schnittstelle. Des gibt dem Web-Browser entsprechend die Anweisungen, wie das in den HTML-Templates definierte Markup-Gerüst auszusehen hat.

Normalerweise werden diese CSS-Vorlagen aus den HTML-Templates heraus mit dem der Funktion
<xen:require css = "" /> der xen:template-Syntax aufgerufen.

Verweise auf Style-Eigenschaften

Auf Style-Eigenschaften können ganz bzw. teilweise in den CSS-Templates verswiesen werden.

Es ist möglich, eine ganze Style-Eigenschaft zu laden und entsprechend als Regel oder lediglich den Wert auszugeben, indem die Syntax @property "eigenschaftName" verwendet wird:

.bbCodeBlock
{
@ Property "bbCodeBlock";
margin: 1em 1em 140px 0;
border: 1px solid # d7edfc;
border-radius: 5px;
@ Property "/ bbCodeBlock";
}

Wenn so auf ein eine Style-Eigenschaft verwiesen wird, so werden alle Änderungen, die Sie an diesen Regeln innerhalb des @property-Abschnittes machen automatisch bei den Style-Eigenschaften direkt reflektiert werden.

Dies bedeutet also, dass Sie alle Anpassungen an den Style-Eigenschaften vollständig innerhalb der des Template-Editors vornehmen können, wenn Sie dies wollen.

Es ist auch möglich nur einzelne Komponenten der Style-Eigenschaften als Werte für die Regeln zu verwenden, indem Sie die Syntax @variablenName.eigenschaft-name nutzen:

.myProperty
{
border: 1px solid @bbCodeBlock.border-color;
color:@primaryLight;
}


Technische Hinweise

CSS 3-Umschreibung

CSS 3 befindet sich derzeit noch in einem Zustand der ständigen Wandlung und wird an vielen seiner Funktionen noch überarbeitet. In vielen Fällen haben einzelne Browser-Hersteller spezifische Präfixe für CSS 3-Funktionen, um es von den Kernfunktionen zu unterscheiden.

Beispielsweise wird die CSS 3-Eigenschaft border-radius zwar von allen großen Browser-Anbietern unterstützt, trotzdem existieren hierzu mehrere Präfixe, was dazu führt, dass es dazu eine ganze Reihe an Varianten gibt.

  • border-radius
  • -moz-border-radius
  • -webkit-border-radius
  • -khtml-border-radius

XenForo mindert dieses Problem, indem häufig genutzte CSS 3-Eigenschaften für Sie umgeschrieben werden. In diesem Fall brauchen Sie nur die Eigenschaft border-radius  aufzurufen und XenForo generiert daraus automatisch die Varianten -moz, -webkit und -khtml für Sie.

CSS Zusammesetzung

Um nur die auf einer bestimmten Seite tatsächlich erforderlichen CSS zu laden, empfiehlt XenForo die Nutzung der Funktion <xen:require css = "" /> in den HTML-Templates. So können Sie dem System mitteilen, welche CSS-Daten genau benötigt werden.

Wenn dem System mitgeteilt wurde, welche CSS-Daten also für eine bestimmte Seitendarstellung erforderlich sind, werden alle notwendigen CSS-Daten in einem einzigen Skript zusammengefasst, sodass es für den Besucher mit einem einzelnen HTTP-Request ausgeliefert werden kann.

Letzte Änderung:
2015-11-08 16:06
Verfasser:
au lait
Revision:
1.1
Durchschnittliche Bewertung:0 (0 Abstimmungen)