Der Ampache Theme Designer ermöglicht es den Benutzer, das Ampache Theme so anzupassen, wie es ihm gefällt. Durch den Ampache Theme Designer ist es nicht mehr zwingend notwendig, sich ein eigenes Theme zu erstellen. Ein selbst erstelltes Theme, ist natürlich ganz so, wie man es gerne haben möchte. Es kommt aber trotzdem oft dazu, dass man den Wunsch hat, das etwas bestimmtes anders aussehen sollte. Da ist es dann notwendig, die CSS-Datei anzupassen, was ja auch nicht besonders aufwändig ist. Solche Änderungen, macht man vielleicht ein oder zwei Mal, aber dann bleibt das Theme so, wie es gerade ist. Der Ampache Theme Designer ist recht umfangreich, mit ihm lassen sich fast alle Bereiche anpassen.
Der Ampache Theme Designer beinhaltet aber nicht nur die Möglichkeit, das Ampache Theme anpassen. Zusätzlich bringt der Ampache Theme Designer noch einige zusätzliche Verbesserungen mit sich.
Die Funktionen von Ampache Theme Designer.
Die Benutzung des Ampache Theme Designers ist sehr einfach, der Designer lässt sich über das zusätzliche Headermenü einblenden und ausblenden. Die zwei Menüs können einzeln oder gemeinsam jeweils an zwei verschiedenen Positionen positioniert werden. Über das erste Menü lassen sich alle Hintergrund und Schriftfarben anpassen. Damit bei einigen Einstellungen die Sicht auf das Einzustellende nicht durch den Designer verdeckt wird, lässt sich der Designer an einer anderen Position verschieben. Wenn etwas eingestellt werden soll, wo eine Ansicht durch die Benutzung des Designers nicht möglich ist, dann befindet sich eine Vorschau im Designer, die das Einstellen sehr vereinfacht. Das zweite Menü ermöglicht es, die Schrifteigenschaften zu ändern (Font-Family, Schriftgröße, Fettschrift, Schrägschrift, LetterSpacing und Transform [Capitalize und Uppercase]). Bei der Font-Family ist die Auswahl an Schriftarten wirklich sehr umfangreich. Einstellungen an den Schrifteigenschaften lassen sich auch auf Normal zurücksetzen.
Über das erste Menü, das für die Farben zuständig ist, lassen sich auch die selbst erstellten Original Themes auswählen. Das durch den Designer erstellte Design, wird dabei nur überschrieben und wird durch den Reset wiederhergestellt. Genau so funktioniert das auch mit den Eigenen Themes.
Original Themes sind die Themes, die ganz normal erstellt wurden, die Eigenen Themes sind Themes, die aus nur einer CSS-Datei bestehen und nicht in den Einstellungen über Ampache erreichbar sind.
Das Headermenü ermöglicht es, die am häufigsten benötigten Funktionen für das Desingn schnell zu erreichen. Im Menüpunkt SERVER können weitere Ampache Seiten eingetragen werden, wenn man mehrere davon betreiben sollte, diese Seiten öffnen sich dann in einem neuen Tab. Der zweite Menüpunkt MENÜ ermöglicht das Anpassen des Headermenüdesigns. Den dritten Menüpunkt SeekBar, lässt sich das Design der SeekBar anpassen. Mit dem vierten Menüpunkt ▶ lässt sich das Design des Webplayers anpassen. Der Menüpunkt TOOLS beinhaltet einige nützliche Funktionen. (Oben, um hoch zu scrollen, die Statistiken, eigene IP-Adresse, Zur Playlist hinzufügen und drei verschiedene Einstellungen für die hochgefahrene Playlist). Mit den Pfeiltasten lassen sich die Menüs ein und ausblenden, das Headermenü lässt sich so weit nach links verschieben, das die Tools noch erreichbar sind.
Der Webplayer wurde von mir so angepasst, das die SeekBar in voller Breite zu sehen ist und nicht wie im Original nur sehr kurz links neben der Lautstärkeeinstellung. Die Lautstärkeeinstellung ist auch breiter geworden, was die Bedining sehr verbessert. Die SeekBar hat eine höhe von 15px (Normal), 30px (Extrabreit) und 45px (Superbreit). Das design der SeekBar Balken mit 30px und 45px sind zur Zeit noch Das design der SeekBar Balken mit 30px und 45px sind zurzeit noch experimentell.
Die Technik
Angefangen hatte alles vor einigen Jahren. Damals wollte ich nur SeekBar und die Themes mit Hilfe von Style-Switcher wechseln und durch Cookies die Auswahl speichern. Dann vor einem Jahr hatte ich die Idee, die Grafik für den Webplayer in zwei Grafiken aufzuteilen, wodurch es dann möglich wurde, das Design von SeekBar und Steuerung getrennt auszuwählen. So weit war das dann alles noch sehr übersichtlich mit den Cookies. Und vor einigen Monaten dachte ich daran, das man vielleicht auch alles andere mit dem Style-Switcher anpassen könnte. Zuerst experimentierte ich nur, stellte fest, dass es echt cool ist, auch andere Dinge anpassen zu können, also machte ich weiter.
Der Aufwand
Man kann schon sagen, das ich es echt übertrieben habe. Denn wenn alles, was möglich ist, angepasst wurde, hat man zusammen mit denn von Ampache eigenen Cookies insgesamt 115 Cookies. Dann auch noch Tausende CSS-Dateien in Ordner sortiert. Alles zusammen also ein ganz schon krasses Geraffel.
Und bei den Themes ist es so, das jedes Theme im Ordner templates noch eine zusätzliche CSS-Datei bekommt. Diese Datei wird benutzt, damit man seine Original-Themes nicht verändern muss. In dieser Datei werden einige Werte mit (! important) dazu gebracht, dass sie den Designer überschreiben. Ausserdem wird auch ein weiteres Theme benötigt damit sich nichts aus alten Themes auf den Designer auswirkt. Das Theme (default) muss als Theme für Ampache ausgewählt werden. Das ist nötig, damit keine störende Werte aus dem Original-Theme geladen werden. Bei der Anpassung Deiner eigenen Themes, bin ich dir gerne behilflich (zusätzliche CSS-Datei für Dein Theme).
Ladezeit vom Ampache Theme Designer
Dass sich das dann auf die Ladezeit von Ampache auswirken wird, war mir klar. Doch für diese Möglichkeiten, die ich durch den Ampache Theme Designer bekomme, nehme ich die Ladezeit gerne in Kauf. Die Ladezeit beträgt bei mir 6 – 10 Sekunden bei. Diese erhöhte Ladezeit hat man allerdings nur beim Starten von Ampache, danach läuft alles so schnell, wie man es kennt.
Ampache Theme Designer einbinden.
Mir ist es sehr wichtig, das meine Erweiterung keine großen Eingriffe benötigen, und im Grunde alles Original bleibt beim Ampache. Um den Ampache Theme Designer einzubinden, wird die Datei /public/templates/header.inc.php leicht verändert. Bei dieser Datei wird nichts am eigentlichen Code verändert, es kommen nur zwei kleine Einträge hinzu.
GANZ OBEN EINFÜGEN
<?php
require(‘headermenue.html’);
?>
und etwa Zeile 412
<?php if (AmpConfig::get(‘topmenu’)) { ?>
<div id=”topmenu_container” class=”topmenu_container-<?php echo AmpConfig::get(‘ui_fixed’) ? ‘fixed’ : ‘float’; ?>”>
<!– EIGENE CSS FÜR DesignerMENÜ –>
<?php
require(‘designer.html’);
require(‘designer_font.html’);
?>
<!– EIGENE CSS FÜR DesignerMENÜ ENDE –>
<div class=”topmenu_item”>
<a href=”<?php echo $web_path; ?>/index.php”>
<?php echo Ui::get_image(‘topmenu-home’, $t_home); ?>
<span><?php echo $t_home ?></span>
</a>
</div>
Und damit der Webplayer nicht die alte Steuerung zeigt, muss eine Datei umbenannt werden. (/public/templates/jplayer.midnight.black-iframed.css zu z.B. jplayer.midnight.black-iframed.css——-) Dadurch kann sie nicht mehr geladen werden. Alle weiteren Dateien bleiben unverändert. Es werden nur die von mir erstellten Grafiken und CSS-Dateien verwendet, die sich fast alle in eigenen Ordnern befinden. Und als Theme muss man das von mir erstellte Theme (DEFAULT) auswählen, damit es keine Probleme beim Designer gibt.
Und zum Schluss alle Ordner in das “public” Verzeichnis hochladen.
Fehler bei der header.inc.php beseitigen.
Wenn man im Headermenü auf “Interpret” klickt, wird einem der Album-Artist aufgelistet und nicht der Artist. Der unten stehende Eintrag behebt das Problem. Dieses Problem macht sich erst bemerkbar, wenn der Album-Artist vom Artist abweicht. Zum Beispiel die Serie “Bravo Hits”, dort heißt der Album-Artist “Bravo Hits” und die Artist sind dann die einzelnen Interpretender Lieder. Dieser Fehler wurde vom Entwickler noch nie erkannt.
Headermenü Artist
<div class=”topmenu_item”><!– action=artist nicht action=album_artist –>
<a href=”<?php echo $web_path; ?>/browse.php?action=artist”>
<?php echo Ui::get_image(‘topmenu-artist’, $t_artists); ?>
<span><?php echo $t_artists ?></span>
</a>
</div>
<!– Eigene Icons im Header-Menü – Songs –>
<div class=”topmenu_item”>
<a href=”https://deine-domain.de/public/browse.php?action=song”>
<img src=”../public/images/topmenu-songs.png” alt=”Songs” title=”Songs” /><span>Songs</span>
</a>
</div>
<!– Eigene Icons im Header-Menü – Songs ENDE –>
<!– Eigene Icons im Header-Menü – Alben –>
<div class=”topmenu_item”>
<a href=”https://deine-domain.de/public/browse.php?action=album”>
<img src=”../public/images/topmenu-alben.png” alt=”Alben” title=”Alben” /><span>Alben</span>
</a>
</div>
<!– Eigene Icons im Header-Menü – Alben ENDE –>
<!– Eigene Icons im Header-Menü – Web-Radio –>
<div class=”topmenu_item”>
<a href=”https://deine-domain.de/public/browse.php?action=live_stream”>
<img src=”../public/images/topmenu-radio_2.png” alt=”Web-Radio” title=”Web-Radio” /><span>Web-Radio</span>
</a>
</div>
<!– Eigene Icons im Header-Menü – Web-Radio ENDE –>
Icons für Albuminterpret, Songs, Alben und Web-Radio befinden sich im Ordner “images” im Ampache Theme Designer Ordner.
Du benötigst Hilfe? Dann schreibe mich im Chat an, den Chat findest Du auf der Testseite oben im Menü.
Du möchtest das gerne vorher alle Ampache Musikserver Anpassungen Mal in Real sehen, bevor du das bei dir einrichtest, dann besuche meinen Demo Musikserver und schaue dir alles an. Bei den Audiotiteln auf dem Musikserver handelt es sich um GEMA freie Musik. Der Download für den Ampache Theme Designer wird in Kürze zur Verfügung stehen.
Login-Daten
Benutzer: Testuser
Passwort: Testuser
Visits: 156