Bootstrap Framework 3.3.6

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more...

Publish your webinterface skin here.
User avatar
By Crypto90
Posts Custom Custom Avatar
#5158
Skin System - Wie funktioniert es

Mit dem TS3MusicBot Update 3.9.5 kam die Möglichkeit Skins zu erstellen und zu verwenden.
Wie funktioniert das ganze?

Es ist recht simpel. 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. Exestieren die Dateien nicht im Skin System, werden die originalen Dateien des Webinterfaces verwendet.
Beispiel:

Sie erstellen einen neuen Skin mit dem Namen 'test'. Dazu erstellen sie einen neuen Ordner namens 'test' im TS3MusicBot/skins/ Ordner. Als nächstes erstellen sie in dem neu erstellten Ordner 'test' eine neue Datei mit dem Namen 'version' mit folgendem Inhalt:
Code: Select all
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 Brwoser verfügbar, zeigt der TS3MusicBot automatisch einen Hinweis an, dass ein Update des Skins verfügbar ist.

Anschließend editieren sie die TS3MusicBot/skins/skin.conf Datei und setze den Namen des Skins aktiv:
Code: Select all
skin=test
Kann auch über die Settings Seite des TS3MusicBotwebinterfaces geändert werden.
Jetzt sind sie bereit zum skinnen!


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

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

Wenn sie 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 sie 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

Sie ä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.

Wenn sie ihren erstellten Skin auch für andere zur Verfügung stehen soll, posten sie ihren Skin (mit Download Link als .ZIP Archiv, Vorschau Bild und einer kleinen Beschreibung) in das Forum.

Der Vollständigkeit halber antworte ich hierz[…]

If nothing from above solves your issue, I can con[…]

Web UI not responding to browser

I tried public IP, LAN IP, and letting it bind to […]

Hi. I have one question. Is there a difference r[…]

Swap-in out addons, use only what you really need!