Mit dem Theme Designer ist es möglich, fast alle Farben des Ampache nach eigenem Belieben zu ändern. Alle Einstellungen lassen sich über einen Color Picker sehr bequem vornehmen. Für jede Farbe wird ein Cookie gesetzt, sodass das Design auch bei einem neuen Besuch der Seite wieder geladen wird. Wenn man sich ein Design zusammengestellt hat, ist es auch möglich, das Design als festen Bestandteil von Ampache in die Design-Auswahl einzutragen. Wie genau das funktioniert, werde ich auch bald hier beschreiben.

Zurzeit ist der Designer noch nicht ganz fertig. Es fehlen noch einige Vorschauen für den Fortschrittsbalken, der über dem Webplayer angezeigt wird. Außerdem sind einige Einstellungen, ohne dass sie getätigt wurden, noch nicht zu sehen, falls dafür noch kein Cookie gesetzt wurde. Die Einstellungen betreffen den Fortschrittsbalken (SeekBar) und das Star Rating.

Der Designer ist ohne ein gesetztes Cookie sofort sichtbar. Der Designer lässt sich über den kleinen grünen Punkt an beliebiger Stelle verschieben oder ganz ausblenden, wenn der Designer nicht mehr benötigt wird. Der Designer enthält einen Menüpunkt "Design", darüber lässt sich das Design für SeekBar, Star Rating und der Wiedergabesteuerung anpassen. Außerdem befinden sich dort auch weitere Einstellungen für die Anzeige der Playlist im Webplayer. Zusätzlich gibt es die Möglichkeit, das CSS des Designs, das du dir erstellt hast, als festes Design über eine zusätzliche CSS-Datei zu speichern. Die CSS-Datei wird automatisch im passenden Format erstellt und im Ordner auf dem Server gespeichert. Danach ist nur noch ein Eintrag in das Designer-Menü nötig.

Das Einbinden des Designers ist recht einfach und verändert oder ersetzt keine Dateien deines Ampache. Es sind aber zwei Dateien, bei denen der Designer eingebunden werden muss, was nicht besonders viel ist, da es mit folgenden Snippets ermöglicht wird.

templates/header.inc.php
<?php require('MyTemplates/headertool.html'); ?>

templates/ footer.inc.php

<?php require('themes/Designer/index.php'); ?>
<?php require('themes/Designer/designer_opener.html'); ?>



Zusätzlich musst du die Datei jplayer.midnight.black-iframed.css in jplayer.midnight.black-iframed.css-Alt umbenennen. Dadurch wird sie nicht mehr geladen, was für die korrekte Funktion des neuen Webplayers notwendig ist.

Das Einbinden des Designers ist also recht einfach. Das Einzige, was du noch erledigen musst, ist, deine Ampache-Adresse in ein paar Dateien einzutragen. Es sind nur 3 Dateien, die nachbearbeitet werden müssen.

Wenn du möchtest, kannst du dir den Designer unter folgender Adresse ansehen und ausprobieren.

Sobald ich die Zeit gefunden habe, den Designer fertigzustellen, werde ich den Download hier bereitstellen und auch noch einiges sehr ausführlicher erklären. Ich würde mich freuen, wenn du mir hier antworten würdest und mir sagst, was du von dem Designer hältst. Solltest du Fragen haben, dann frage mich einfach, ich erkläre dir gerne alles.

Es wäre auch gut zu wissen, ob du Interesse am Designer hast.

Zum Ampache Designer Demo: https://ampache.whitefox-webdesign.de/public/index.php

Benutzer: Testuser

Passwort: Testuser