Skin erstellen für TS3MusicBot

Aus Nitradopedia
Wechseln zu: Navigation, Suche

Mit dem TS3MusicBot Update 3.9.5 besteht die Möglichkeit Skins zu erstellen und zu verwenden.


Wie funktioniert das ganze?

Mit dem Skin System können Dateien (außer .htm und .js Dateien) von dem original Webinterface überschrieben werden. Das Skin System überprüft zuerst ob ein Skin gesetzt wurde. Wurde ein Skin gesetzt, werden angefragte Dateien (in diesem Fall Bilder und style.css) zuerst innerhalb des Skin Ordners angefragt. Existieren die Dateien nicht im Skin System, werden die originalen Dateien des Webinterfaces verwendet.


Step by Step

Wir erstellen einen neuen Skin mit dem Namen 'test'. Dazu erstellen wir einen neuen Ordner namens 'test' im TS3MusicBot/skins/ Ordner. Als nächstes erstellen wir in dem neu erstellten Ordner 'test' eine neue Datei mit dem Namen 'version' mit folgendem Inhalt:

0.0.1

Das gibt die Version des Skins an. Der TS3MusicBot prüft nach Updates des Skins, wenn der Skinname auch im "Skin Browser" des TS3MusicBots zu finden ist. Ist eine neuere Skin Version im Skin Browser verfügbar, zeigt der TS3MusicBot automatisch einen Hinweis an, dass ein Update des Skins verfügbar ist.

Anschließend editiere die Datei skin.conf (Pfad: TS3MusicBot/skins/) und setze den Namen des Skins aktiv:

skin=test

Kann auch über die Settings Seite des TS3MusicBot-Webinterfaces geändert werden.

Jetzt sind wir bereit zum skinnen! ;)

Wir haben nun folgende Ordnerstruktur: TS3MusicBot/skins/test/.

Die originale style.css ist hier zu finden: TS3MusicBot/system/webinterface/css/style.css

Wenn wir diese Datei überschreiben wollen, muss ebenso eine style.css hier zu finden sein: TS3MusicBot/skins/test/css/style.css


Das selbe funktioniert auch mit Bildern. Beispielsweise möchten wir jetzt das "NO COVER" Bild von dem Player an der rechten Seite ändern:

Das original Bild liegt hier: TS3MusicBot/system/webinterface/images/no_cover.png

Wir ändern es mit einem neuen in: TS3MusicBot/skins/test/images/no_cover.png

Mit diesem neuen Feature kann das komplette Webinterface neu gestaltet werden. Die Hauptfunktionen des Webinterfaces bleiben somit unberührt und kann weiterhin von uns in Zukunft aktualisiert und erweitert werden, ohne das ein Skin dadurch zerstört wird.


Beispiel Skin

Hier klicken zum Herunterladen.


Wenn dein erstellter Skin auch für andere zur Verfügung stehen soll, poste deinen Skin (mit Download Link, Vorschau Bild und einer kleinen Beschreibung) in das Forum oder wenn ein Contest läuft auf http://skincontest.ts3musicbot.net, dann werden wir den Skin in den Skin Browser übernehmen.