Vorschaugrafiken für Styles erstellen

captainslater

Bekanntes Mitglied
Registriert
11. Dez. 2010
Beiträge
295
Punkte
93
XenForo 1.0.0 RC1 führt in der Styleauswahl links unten kleine Vorschaugrafiken für Ihre Styles ein. Standardmäßig sehen Sie dort unten eine einfarbige Vorschau des Standard-Styles sowie die Farben Ihrer eigenen Stylepalette. Falls Sie Ihren Benutzer zeigen wollen, was Sie bei der Auswahl eines Styles erwartet, zeigen wir Ihnen hiermit, wie das funktioniert.

Zuerst öffnen in Ihrem Browser Ihr Forum mit jenem Style, für welchen Sie die Vorschaugrafik erstellen wollen. Erstellen Sie einen Screenshot und öffnen Sie diese Grafik in einem beliebigen Bildbearbeitungsprogramm.

Schneiden Sie die Grafik zu einem Quadrat mit dem Ausmaß von 64x64 Pixel zu und speichern Sie diese als .jpeg oder .png-Datei ab. Nennen wir die Datei erstmals 'style-4.png' und laden diese auf den Webserver in einem Verzeichnis namens 'style-previews' innerhalb des /styles/default/xenforo/-Ordner hoch.

Jetzt wird das CSS bearbeitet. Die RC1 hat ein neues CSS namens style_chooser.css. Bis auf ein Kommentar ist dieses Template standardmäßig leer. XenForo wird Sie bei Upgrades nie auffordern, dieses Template wiederherzustellen. Somit können Sie beruhigt Änderungen an diesem Template durchführen. Das bestehende Kommentar können Sie problemlos löschen.

Sie müssen die style_id für jenen Style kennen, für welchen Sie eine Vorschau erstellen wollen. Sie finden diese ID, wenn Sie über mit dem Mauszeiger über einen Link zu diesem Style fahren. Es sollte eine URL angezeigt werden, welche dem Schema /styles/my-style.4/ folgt. Der Name des Styles heißt 'Mein Style' und hat die ID 4.

Somit können wir im style_chosser.css Templates folgenden Eintrag machen:

HTML:
.styleChooser .icon.style4[/COLOR][/COLOR][/COLOR]
[COLOR=#141414][COLOR=#141414][COLOR=#141414]{[/COLOR][/COLOR][/COLOR]
[COLOR=#141414][COLOR=#141414][COLOR=#141414]    background: transparent url('@imagePath/xenforo/style_previews/style-4.png') no-repeat;[/COLOR][/COLOR][/COLOR]
[COLOR=#141414][COLOR=#141414][COLOR=#141414]}
[/COLOR][/COLOR]

edit-template-png.9696


Dieser Vorgang kann für alle vorhandenen Styles durchgeführt werden, indem Sie das style_chooser.css-Template bearbeiten. Am Ende können Sie die Style-Auswahl auf den öffentlichen Seiten Ihres XenForo betrachten.

style-preview-png.9695
[/HTML]
[/HTML]
[/HTML][/COLOR][/HTML][/COLOR]
 
Bilder sind allesamt tot.
 
Zurück
Oben