Changing the Volumio logo in the webUI and more...

Diy and Tweaks Diy and Tweaks
#1

Hi Guys :mrgreen:

A few questions for something I’m quite interested in for My Volumio Powered player:

  • How can one change the Volumio Logo thats on the top left corner of the UI?
  • Changing the colours from the standard green to any other colour?
  • The splash screen showed when you start the player, how can one place their own?

T.I.A

#2

You should probably get in touch with Volumio for a custom solution - volumio.org/oem-custom-solutions/ is a good starting point :slight_smile:

#3

Hi There,

go to the following folder on WINSCP after logging in…

/volumio/http/www/app/themes/volumio/assets/variants/volumio/graphics/

replace the two png files with your own design… ensure that they are 170x50 and saved with same name…

Presto, after a reboot you’ll have your own logo…

Now, how do I change the splash screen on boot and the centre logo when nothing is in the playlist and volumio is idle…? Any ideas?

thanks

Ian

#4
#5

I hope this is not illegal, but since we’re using ‘Open Source’ software, I guess it’s ok. Otherwise, let me know!!

For commercial purpose: volumio.org/oem-custom-solutions/

To brand your Volumio to your own taste: (for non-commercial use)

  1. Volumio Logo is the volumio-logo.png-file in /volumio/http/www/app/themes/volumio/assets/variants/volumio/graphics/
  2. the default album-art (when nothing is playing) is the default.jpg/png file in /volumio/app/plugins/miscellanea/albumart/
  3. set a pageTitle in /volumio/http/www/app/themes/volumio/assets/variants/volumio/volumio-settings.json
  4. Remove the shopping link in the pull-down menu of the GUI: look in the file /volumio/app/mainmenu.json and remove the line with ‘Volumio Shop’ (and maybe put in a link of your own) :wink:
  5. Changing the default green colour: this is more tricky, you’ll have to find and replace the color-values in the stylesheets. The location is /volumio/http/www/styles/ and there are the .css files. Look for the following color-attributes:
    #54c698
    #3c763d
    #54c688
    #339a62
    #3aad6e
    and replace it with your preferred color-code, like #136F9A

As an addition, you can put WebRadio station URL’s in /data/favourites/my-web-radio (in xml-format) like this:

[ { "service": "webradio", "name": "JazzFM UK", "uri": "http://tx.sharp-stream.com/icecast.php?i=jazzfmmobile.mp3" } ]

and change the /etc/motd for your ssh-users.

All the above tasks have to be done after every update of Volumio, so you might want to create some scripts for it. :wink:
Also, update via the GUI doesn’t work anymore, you first have to delete userdata before updating and then start all over again.

Check this: github.com/NicoOosterwijk/musicplayers

rgds,
.Nico (nico AT digitalhifi DOT nl)

1 Like
#6

@Nico
Just wondering, how does the Qbuzz and Tidal integration work on the devices you offer from your website?

#7

Qobuz and Tidal services are enabled with a myvolumio.org subscription.

#8

Please verify, that when using this customization for a, let’s say, popular bar, that you do not violate any laws.
In that case it may not be “private use” anymore…

#9

do you where i can find the notification when you change song for example to modify it? thanks

#10

It’s called toast, or toast-success
If you’d like to change it’s colour, look at the rgba-code (because of transparancy) in the app-stylesheet file.

something like:
toast-success{background-color:rgba(84,198,152,.8)

rgds,

Nico

#11

yeah to be honest i found it and i made it also blue. thanks