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:

HTML:
.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:

HTML:
.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.
Kategorie:
Templates & Styling
Veröffentlicht:
14. März 2016
Seitenaufrufe:
501
FAQ Manager ©2017 Iversia from RPGfix.
OK Mehr Informationen

Diese Seite verwendet Cookies. Mit Deinem Klick auf OK, stimmst Du dem setzen von Cookies zu. Andernfalls werden keine gesetzt, was die Funktionalität einschränkt.