Dies ist für alle, die ganz neu in xenForo sind, die vielleicht gerade ein Forum gestartet haben und die Farben anpassen möchten, um ihm ein persönlicheres Aussehen zu geben. Sie brauchen keine Kenntnisse in Programmierung oder Grafikdesign - obwohl Sie natürlich Ihr eigenes Logo haben wollen, also fangen wir mit diesem Teil an. Sie können ein Logo von einem der Online-Logo-Generatoren wie Looka erhalten oder einen Grafikdesigner beauftragen (es gibt einige günstige Designer auf Fiverr oder People per Hour).
1. Schritte
In diesem Tutorial zeige ich Ihnen, wie Sie Child-Stile basierend auf dem xenForo-Standard erstellen. Die xenForo-Dokumentation enthält eine gute Erklärung über Child-Stile. Hier wird gezeigt, wie einige Aspekte von der Vorgabe geerbt werden (das Logo), andere werden die Vorgabe überschreiben (Farben). Zuerst fügen wir unser Logo zum Standardthema hinzu, das dann in allen untergeordneten Stilen angezeigt wird. Lassen Sie sich nicht dazu verleiten, Ihr Logo einfach an der gleichen Stelle wie das xenForo-Logo hochzuladen und es in xenforo-logo.png umzubenennen, da Sie sonst bei der Dateikontrolle auf die Nase fallen werden.
Abmessungen und Format des Logos
Wenn Ihr Logo nicht quadratisch oder rechteckig ist, benötigen Sie ein png-Dateiformat, um ein weißes Quadrat/Rechteck um das Logo herum zu vermeiden. Ab xenForo 2.3 sollte auch ein webp-Bild in Ordnung sein. Wenn Ihr Logo quadratisch oder rechteckig ist, reicht auch ein jpg.
Klicken Sie auf die Gruppe unten (Grundlegende Einstellungen) und Sie sollten folgendes sehen:
Child Stile
Wir werden jetzt zwei untergeordnete Stile erstellen, (1) einen flotten kupferfarbenen Stil und (2) einen kühlen grauen Stil. Beides sind helle Stile, dunkle Stile sind derzeit etwas komplizierter, finde ich. Damit haben Sie den Grundstein für die Erstellung Ihrer eigenen Stile gelegt. Sie können das vielleicht auch auf einem Handy machen, aber es wird wahrscheinlich nicht so einfach sein.
Kupfer
Wiederholen Sie dies nun für Farbe 2, die etwas dunkler ist:
Vergessen Sie nicht, für jede Farbe auf die Schaltfläche Aktualisieren zu klicken. Dadurch wird die Farbe aktualisiert, aber der Stil noch nicht gespeichert...
Auch hier hat die Lachsfarbe eine ähnliche Schattierung wie das ursprüngliche Blau, weil der kleine Kreis an der gleichen Stelle ist wie vorher. (Anmerkung: Sie können damit spielen, aber im Moment ist es am besten, es so zu belassen, dass alle Orangetöne einen ähnlichen Farbton wie die Blautöne haben)
Wiederholen Sie nun die obigen Schritte für alle Farben 1 - 5. Die Farbe 5 wird wieder eine ähnliche Schattierung wie das dunkle Blau haben und ein dunkles Kupferbraun sein:
Sehen Sie sich das Video an
Klicken Sie nun auf "Speichern", um die neuen Farben im Stil zu speichern, gehen Sie zum Frontend Ihres Forums, wählen Sie diesen Stil aus der Stilauswahl unten links und sehen Sie, wie wunderbar er aussieht. Aber wir sind noch nicht ganz fertig.
1. Schritte
In diesem Tutorial zeige ich Ihnen, wie Sie Child-Stile basierend auf dem xenForo-Standard erstellen. Die xenForo-Dokumentation enthält eine gute Erklärung über Child-Stile. Hier wird gezeigt, wie einige Aspekte von der Vorgabe geerbt werden (das Logo), andere werden die Vorgabe überschreiben (Farben). Zuerst fügen wir unser Logo zum Standardthema hinzu, das dann in allen untergeordneten Stilen angezeigt wird. Lassen Sie sich nicht dazu verleiten, Ihr Logo einfach an der gleichen Stelle wie das xenForo-Logo hochzuladen und es in xenforo-logo.png umzubenennen, da Sie sonst bei der Dateikontrolle auf die Nase fallen werden.
Abmessungen und Format des Logos
Wenn Ihr Logo nicht quadratisch oder rechteckig ist, benötigen Sie ein png-Dateiformat, um ein weißes Quadrat/Rechteck um das Logo herum zu vermeiden. Ab xenForo 2.3 sollte auch ein webp-Bild in Ordnung sein. Wenn Ihr Logo quadratisch oder rechteckig ist, reicht auch ein jpg.
- Gehen Sie zu Ihrem Admin Kontrollpanel (ACP) über den Admin Link am oberen Rand des Forums
- Gehen Sie in der linken Navigation zu Erscheinungsbild > Stile
- Klicken Sie auf Style-Eigenschaften auf der rechten Seite des Default style:
Klicken Sie auf die Gruppe unten (Grundlegende Einstellungen) und Sie sollten folgendes sehen:
- Klicken Sie auf das Symbol "Datei hochladen" und laden Sie Ihr eigenes Logo hoch.
- Geben Sie die Abmessungen in die Felder ein, d. h. Breite und Höhe. Dies sollten nur Zahlen ohne das Suffix "px" sein.
- Speichern Sie es.
Idealerweise (für Retina-Bildschirme) sieht es am besten aus, wenn Sie auch eine Version haben, die doppelt so groß ist, wie Sie es anzeigen möchten. Das bedeutet, dass es auf einem Retina-Bildschirm schön und scharf ist. Wenn Sie also zum Beispiel ein Logo haben, das in einer Größe von 200px x 50px angezeigt werden soll, benötigen Sie auch ein Logo in der Größe 400px x 100px, das Sie im Feld 2x Logo hochladen können.
Child Stile
Wir werden jetzt zwei untergeordnete Stile erstellen, (1) einen flotten kupferfarbenen Stil und (2) einen kühlen grauen Stil. Beides sind helle Stile, dunkle Stile sind derzeit etwas komplizierter, finde ich. Damit haben Sie den Grundstein für die Erstellung Ihrer eigenen Stile gelegt. Sie können das vielleicht auch auf einem Handy machen, aber es wird wahrscheinlich nicht so einfach sein.
Kupfer
- Stufe 1: Hauptfarben
- Gehen Sie über den Link oben im Forum zu Ihrem Admin-Kontrollzentrum (ACP).
- Gehen Sie zu Erscheinungsbild > Stile in der linken Navigation.
- Klicken Sie auf Stil hinzufügen (oben rechts).
- Sie können dem Stil einen Namen und eine Beschreibung geben und einen übergeordneten Stil auswählen, in diesem Fall den Default style. Diese Vorlage ist dann eine untergeordnete Vorlage der Standardvorlage. Deaktivieren Sie das Kontrollkästchen Benutzerauswahl zulassen. Wenn Sie das Häkchen nicht setzen, können Sie als Administrator den Stil und die Änderungen sehen, aber Ihre Benutzer sehen ihn erst, wenn Sie die Arbeit daran beendet und ihn aktiviert haben.
- Speichern Sie den Stil (es wird eine Weile dauern, da er die geerbten Vorlagen erstellt).
- Klicken Sie nun auf die Style-Eigenschaften Ihres neuen untergeordneten Stils und dann auf die oberste Gruppe - Farbpalette
- Oben sehen Sie die Farben 1 - 5, bei denen es sich um verschiedene Blautöne handelt (wie im übergeordneten Standardstil verwendet).
- Um diese geerbten blauen Farben zu überschreiben, müssen Sie sie ändern - und in diesem Fall werden wir die blauen Farbtöne in rötliches Orange ändern.
- Klicken Sie auf Farbe 1, die ein helles Blau ist, und verschieben Sie den rechten Schieberegler, bis er sich in der Nähe des oberen Bereichs zwischen Rot und Orange befindet. Sie brauchen nicht allzu genau zu sein, aber Sie werden sehen, dass Sie im Vergleichsfeld unten links eine helle Lachsfarbe haben. Die Helligkeit ist dem Blau sehr ähnlich, denn der kleine Kreis (oben links) wurde nicht verschoben und ist immer noch fast weiß, so dass sich viel Weiß mit dem Rot/Orange vermischt.
- Klicken Sie auf die Schaltfläche Aktualisieren
Wiederholen Sie dies nun für Farbe 2, die etwas dunkler ist:
Vergessen Sie nicht, für jede Farbe auf die Schaltfläche Aktualisieren zu klicken. Dadurch wird die Farbe aktualisiert, aber der Stil noch nicht gespeichert...
Auch hier hat die Lachsfarbe eine ähnliche Schattierung wie das ursprüngliche Blau, weil der kleine Kreis an der gleichen Stelle ist wie vorher. (Anmerkung: Sie können damit spielen, aber im Moment ist es am besten, es so zu belassen, dass alle Orangetöne einen ähnlichen Farbton wie die Blautöne haben)
Wiederholen Sie nun die obigen Schritte für alle Farben 1 - 5. Die Farbe 5 wird wieder eine ähnliche Schattierung wie das dunkle Blau haben und ein dunkles Kupferbraun sein:
Sehen Sie sich das Video an
Klicken Sie nun auf "Speichern", um die neuen Farben im Stil zu speichern, gehen Sie zum Frontend Ihres Forums, wählen Sie diesen Stil aus der Stilauswahl unten links und sehen Sie, wie wunderbar er aussieht. Aber wir sind noch nicht ganz fertig.
Anhänge
Zuletzt bearbeitet:
