Templates & Styling

Templates & Styling

Templates

Templates zählen zu den Grundbausteinen von XenForo, die für das Aussehen und die Bedienung der Seite verantwortlich sind. Diese wurden unter Verwendung vom HTML 5, CSS 3 sowie der xen:template-Syntax entwickelt.

Durch das Bearbeiten der Templates mit HTML und CSS können Sie XenForo genau so aussehen lassen wie Sie wollen. Nur Ihre Phantasie setzt hierbei die Grenze.


Templates bearbeiten

Templates verwalten
Alle von XenForo verwendeten Vorlagen sind in dem Template-Abschnitt der Registerkarte Erscheinungsbild im Administrationsbereich aufgeführt.

Diese Übersicht zeigt Ihnen auf einen Blick, welche Vorlagen unverändert sind, welche Templates Veränderungen geerbt haben (orange) und solche, die im aktuellen Stil verändert wurden (rot).

Um ein Template zu bearbeiten, klicken Sie einfach auf dessen Namen.

Template-Änderungen können auf zurückgesetzt indem Sie auf die den „Löschen“-Button klicken.

Den Anhang 434 betrachten



Der Template-Editor
Der Template-Editor ist ein mächtiges Werkzeug zum Erstellen, Bearbeiten und Anpassen von Templates.

  • Das Primäre Template wird in dem Register ganz links geladen. Sie können jedes Template direkt bearbeiten welches über das primäre Template eingebunden bzw. verwendet wird, indem Sie auf dessen Tab klicken.
  • Wenn Sie Änderungen an Templates vornehmen wird die Registerkarte dort mit einem kleinen Punkt markiert. Dies soll Sie daran erinnern, dass es dort nicht gespeicherte Änderungen gibt.
  • Bearbeitete und vererbte Templates können Sie über die Hintergrundfarbe der Registerkarten voneinander unterscheiden (rot für verändert, orange für vererbt).
  • Über die Farbpalette oben rechts in der Bearbeitungsansicht haben Sie einen schnellen Zugriff auf die verwendeten Farben des aktuellen Styles.
Wenn Sie mit den Änderungen fertig sind, so speichert ein Klick auf „Speichern“ alle Änderungen der gerade modifizierten Templates welche geöffnet sind.

Den Anhang 435 betrachten
#8

Styling

Obwohl XenForo mit einer attraktiven und leicht zu bedienender Design- und Benutzerschnittstelle daher kommt, werden viele Administratoren darüber hinaus trotzdem ihre Installation darüber hinaus anpassen wollen, beispielsweise um das Forum an den Rest ihrer Website anzupassen oder einfach, um dem Aussehen ihre eigene Note zu verleihen.

Vorgefertigte Styles
Es gibt eine menge von Designern bzw. Programmierern, welche Styles für das XenForo-System entwickeln, sodass Sie wahrscheinlich einen professionell gestalteten, vorgefertigte Style finden werden, der Ihren Bedürfnissen entspricht.

Einen vorgefertigten Style in Ihre XenForo-Installation einzubinden dauert nur wenige Minuten und ist für die meisten Administratoren ein Leichtes, dies selbst durchzuführen.

Eine Vielzahl an vorgefertigten Styles können Sie in dem XenForo-Resourcen-Manager finden.
Eigene Styles erstellen


Auch wenn Sie einen vorgefertigten Style verwenden, werden Sie noch weitere Anpassungen vornehmen wollen, wie beispielsweise Ihr Logo einzubinden oder ein eigenes Farbschema anzulegen.

XenForo ist mit einem sehr starken Styling-System ausgestattet, womit Administratoren aller Niveauklassen die Möglichkeit haben, weitreichende Anpassungen an das Erscheinungsbild der Webseite vorzunehmen.

Es existieren mehrere Instanzen um das Aussehen in XenForo anzupassen. Diese reichen von einfachen „Point-and-Click“-Einstellungen bis hin zu einem umfangreichen Editor für HTML und CSS.

Die verschiedenen Instanzen finden Sie nach dem erforderlichen Grad an Fachkenntnis geordnet in der Design Referenzen beschriebenen.

Warten von Template-Anpassungen nach Upgrades
In der Regel verändert XenForo Templates, um Fehler zu beheben oder um neue Funktionen hinzuzufügen.Wenn Sie an einem bestimmten Template Änderungen vorgenommen haben, wird diese Template-Version beim nächsten Update nicht mehr automatisch mit aktualisiert werden. Betroffene Vorlagen, welche Sie diesbezüglich überprüfen müssen, werden entsprechend auf der Seite Veraltete Templates aufgelistet.

Es ist sehr wichtig, dass Sie bei jedem System-Update Ihre gemachten Template-Änderungen warten.Wenn Sie dies nicht tun, kann es dabei zu Störungen kommen.Sie sollten Ihre Template-Änderungen immer sofort nach dem Upgrade warten, auch wenn die Funktionalität zunächst nicht betroffen zu sein scheint.Je länger Sie damit warten, desto schwieriger wird es, Ihre Änderungen zu aktualisieren.

Seit XenForo 1.2 haben Sie die Möglichkeit Ihre Template-Änderungen mit einer neueren Template-Version zusammenzuführen.Hierzu wird eine Technik namens „three-way merging“ verwendet (z. Dt.: Dreifach-Zusammenführung). Dies erkennt Ihre gemachten Änderungen in der "alten" Template-Version und berücksichtigt ebenso die Änderungen an der "neueren" Version.Es versucht dann, diese automatisch zusammenzuführen.In den meisten Fällen funktioniert dies fehlerfrei.

Wenn Sie jedoch eine Anpassung an einer Stelle vorgenommen haben, welche ebenfalls mit der neueren Version verändert wurde, so entsteht ein Konflikt, den Sie manuell beheben müssen. Sie müssen sich entscheiden, welche Variante Sie an dieser Stelle beibehalten möchten (oder ggf. auch beide Versionen).

Wenn Sie bei einer Vorlage auf den Link Änderungen zusammenführen klicken, so sehen Sie, wie die endgültig zusammengeführte Version der Vorlage aussehen wird.Erfolgreich zusammengeführte Abschnitte werden in blau markiert.Abschnitte mit Konflikten werden in gelb hervorgehoben, jeweils mit Buttons, die Ihnen bei der Lösungsfindung behilflich sind. Sobald Sie einen Konflikt gelöst haben, können Sie in den Text klicken, um diesen Ihren Anforderungen entsprechend weiter zu bearbeiten.
#37

Style Referenzen

Styling Reference | XenForo

Sortiert nach der erforderlichen Anwendungserfahrung, beginnend mit dem einfachsten, sehen Sie hier die Möglichkeiten von XenForo das Styling anzupassen.

Farbpalette
Screen_27042016174644.png

Die Farbpalette ist das einfachste Werkzeug um Ihr Forum schnell anzupassen.Alle im XenForo-Style verwendete Farben können hiermit über ein einziges Bedienfeld gesteuert werden, was eine schnelle und einfache Entwicklung eines Entwurfs erlaubt, welcher zu Ihrer Website passt.

Style-Anleitung: Ihr eigenes Farbschema erstellen.

Style-Eigenschaften
Screen_27042016174706.png

Generelle Eigenschaften
Bei den generellen Eigenschaften haben Sie die Möglichkeit Optionen innerhalb der Style-Funktionen ein- und auszuschalten, oder diese dort ganz einfach einzustellen.

Diese Eigenschaften können dazu verwendet werden, Pfade zu Bildern zu definieren, wie z.B. das Header-Bild, um JavaScript-Funktionen zu deaktivieren oder eine ganze Reihe an anderen Dingen zu definieren.

Screen_27042016174820.png

CSS-Eigenschaften
Das XenForo-Styling-System basiert auf CSS (Cascading Style Sheets). Ein großer Teil des von XenForo verwendeten CSS wird mit den CSS- Style-Eigenschaften umgesetzt.

Allgemeine CSS-Eigenschaften können in dem Style-Eigenschaftseditor bearbeitet werden, so dass Sie schnell weitreichende Änderungen an Ihrem Forum vornehmen können, ohne dabei tatsächlich das "rohe" CSS modifizieren zu müssen.

Wenn Sie noch tiefere Änderungen im CSS-Style Ihrer Seite vornehmen möchten, so können Sie auch die CSS-Templates direkt editieren.


CSS Templates

Screen_27042016174909.png

Das HTML in XenForo wurde schlank und dabei flexibel entwickelt.Die meisten Darstellungen der einzelnen Anwendungsseiten wurden über das CSS-Styling angelegt.

Wenn Sie grundlegende Änderungen am CSS vornehmen möchten, um ein bestimmtes Element der Benutzeroberfläche abzuändern und es dazu keine ausreichende Kontrolle bei den CSS-Style-Eigenschaften gibt, so können Sie den zugrunde liegenden CSS-Code direkt mit dem Template-Editor bearbeiten.

Durch die direkte Bearbeitung der CSS-Styles können Sie Ihre Seiten völlig neugestalten und Ihrem Forum ein komplett einzigartiges Aussehen verpassen.


HTML-Templates
Screen_27042016174946.png

Für diejenigen, die sehr tief in die Materie gehen wollen ist es möglich, das reine HTML zu bearbeiten, auf das alle XenForo Seiten aufbauen.

Mit Hilfe des Template-Systems sind grundlegende Änderungen an der Seitenstruktur und an der Datenverarbeitung möglich, der Fantasie sind hier keine Grenzen gesetzt.

Beim Bearbeiten der Templates werden Sie die Leistungsfähigkeit des XenForo-Styling-Systems kennenlernen. So können Sie auch die fortgeschrittene xen:Template-Syntax verwenden, welche als Erweiterung des PHP-Codes ausgeführt wird, was wiederum hinter den Kulissen abläuft.
#33

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.
#9
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.