Theme & Language Selector - Installation.

Wow, Thanks! :smiley: I’m just working out how to get it working for non mainstream browsers that don’t use gradient backgrounds. I’ll update the first post when done and post a new reply with all the files I’ve edited from volumio v1.55 (_header.php, jquery.knob.js, indextpl.html and settings.html)

ok, I’ve updated the first post with new files, I had forgotten quite a few browser specific settings, all fixed now :smiley: hopefully it should work on any browser you throw at it (within reason!)

Here’s the files I’ve edited from Volumio V1.55

[edit] out of date files removed [/edit]

Hello!
I have installed your last files.
laptop firefox 36 - ubuntu 14.04 : OK
smatphone - chrome - android 4.4.4 :OK
10inches tablett Firefox - android 4.4.4 : OK
10inches tablett - Dolphin - android 4.4.4 : white background - illisble text
10inches tablett - Volumio web app - android 4.4.4 : nothing displayed

It’s seems that the webui restart each time a new device connect to it : rotating arrow (on the other device) and startup sound :confused:
A small detail : on the setting page, buttons are still green ( from the default volumio theme)
Screenshot_2015-03-16-18-11-16.png
greebbutton.jpg

that’s weird, I’ve updated the files a few times each day, the last update (about 4 or 5 am in the uk) has a basic dark background as default, then the gradients are prefixed (-ms-, -o-, -moz- & -webkit-) so they shouldn’t be read by any other browser. unsupported browsers should now automatically show a flat theme. you can tell if you have the latest as it will have these lines near the top of any of the theme_*.css files

#menu-top, #menu-bottom {
background: #???
background: -webkit-linear-gradient(… the gradient colours are here, couldn’t be bothered to type it all lol.
background: -moz-linear-gradient(…
background: -o-linear-gradient(…
background: -ms-linear-gradient(…
}

the #??? will be a colour reference (theme_ylw.css will be #ffcc00)

if the 2 ‘underlined’ bits are missing then I’ve slipped the update in after you downloaded them. if they’re there its back to the drawing board! :nerd:

oh the green on off toggles are images (I’ve not figured that bit out yet) so they’ve stayed green for on for now

thanks again for your input :smiley:

I’m stumped. it should work but obviously doesn’t, does anybody know the solution to the above post?

I guess I’ll have to make it without gradients. at least the hardest bit is done (the selector seems to work), I’ve not been getting the startup sound (except when refreshing the page until it gives a 404 message) but I’ll look into that. a workaround for the themes may be to not show the buttons for the themes that use gradients on browsers that we know don’t work (in the theme selector settings)

Well,
I checked the css file as you explain. The two “underlined” bits are missing in the theme-grn.css. In the other it’s ok, even if it doesn’t work as expected… Let me know if you want I test something else…
Other thing : do you think it is possible to allow to toggle between flat / round theme with a button next to the color selector ?

I’ll have to separate the flat and round themes to keep the .css file sizes down but I’m hoping to go a bit deeper and make it know what browser its on before loading the css that way I can have one set of css for the flat theme and one for the round. then the round style wont show at all on the non compatible browsers and hopefully have a line of flat and a line of round on the mainstream browsers, a simple toggle for ‘flat’ and ‘3d effects’ would look better and I will keep that in mind :smiley: firstly I’m going to re-write the flat (mk1 ish) theme to be totally compatible, then the theme-flat_*.css files will be tiny with minimal impact on the system… then look into the browser specific .css loading and go from there… again, thanks for your help :smiley:

well spotted by the way, I hadn’t updated the theme_grn.css! oops!

Ok !
Thank you for all the efforts!!!
A last thing, but maybe it has nothing to do with php css and all that…: I’m using an old 10" laptop with a poor Atom (1 gen) and only 1Go ram. When I load a big playlist (>2500songs) it’s very long if I try a on the fly search. Swaping between page is also non -responsive… Do you know if it comes from the RPI or from my laptop ? :wink:

I think its your laptop, I took my entire albums folder (14,449 tracks) and opened in random mode and its still pretty responsive, it may be your laptop only has early wireless so cant transfer the data quick enough? not sure on that one tho…

ok, I’ve created a set of flat theme files using basic css so hopefully this time it’ll work on all browsers. as far as I can see I’ve only used code that was used in the original so if it doesn’t work then the original probably didn’t work on it either…

@balbuze - if you could try these on the browsers that didn’t like the Mk2 version and let me know how you got on… again… that would be great, then I can start work on getting the ‘3d’ style ones to only load on capable browsers… :nerd: (hopefully!)

**out of date files removed **

Hi, first your guid is great but i’m a beginner and i followed the guide, in fact i have the selector theme menu but when i click on one of these themes, nothing happen, what can i do ?

apologies @ouatdefok, I hadn’t seen your post. were just trying to iron out some kinks in this. if you’re using a mainstream browser your best bet is to download the Mk2 files and the pre-edited files from the first post and copy them to the folders as instructed at the bottom of the first post.

you may find you need to refresh your browser quite a few times before it will work properly as your browser may not refresh all the files (_header.php mainly) any device that has never connected should work straight away. (on most browsers, were still working on that…)

@balbuse: doh, looking at your last image from dolphin browser I feel you might still see a white background, if you do its not all bad, dolphin can obviously handle gradients or the round buttons wouldn’t show. there are transparent layers over the ‘speaker’ background so hopefully if I use a different way of making them transparent then they will not show. one way to check this if you do get a white background is to go to the ‘browser’ or ‘playlist’ tab and part of the speaker should show at the bottom of the page (remember the black bit at the bottom with the speaker cut off on a much earlier post) I moved the speaker gradient to the html background (instead of the playback panel background) to get round that issue. so… the playback, browser and playlist panels are still there but should be transparent. I’ve used ‘background: transparent’ in the css but a remedy might be to use ‘background: rgba(0, 0, 0, 0)’ instead. (this should also mean if it cant handle the alpha channel it should default to black instead of white)

Well,
with your last files, it works with dolphin (see attached pic).
But still nothing in Volumio web app
And even if the theme selector appears, nothing appened when changing color. :confused: firefox /ubuntu dolphin/android
And very strange firefox/android : color change works, but only blues themes are flat other are round…
Screenshot_2015-03-19-18-44-52.png

this must be a cache thing, I’ve just checked the uploaded files and they all contain “UPDATED: 18-03-15 @ 23.30” at the top. there is no gradients in these files. also all the files for the theme selector are unchanged (they’re not included in the themeselectorflat.zip as they remain unchanged) if I understand you correctly its now broken in everything except dolphin? lol. it could be that I put : and @ in the header of each css (in the line ‘UPDATED: 18-03-15 @ 23.30’ try completely deleting that whole line from all the theme_*.css and volumio.css files?

Bad : So, I have removed the @ in each file. No change : swapping between differents themes doesn’t work.
Good : If I consider only the displayed theme, now I can said it work the same way in firefox /ubuntu /android and Dolphin/ android and Chrome/ ANDROID. But I had to clean the cache for each web browser because just refresh the page (F5) is not enough…

ok, I’ll look into that, it may be I’ve corrupted a file during upload, its working on windows with ie, firefox, chrome and opera my end. I’m going to check through my .css and upload a clean uncommented set again. I’ll include all my edited and cleaned files in an uncompressed zip directly from my pi in my next post… Also once we’ve got it working I’ll pm the creator of the web app and send them the files and see if we can get that sorted. it would be really good if they can show all the themes correctly. it may well be the edits to the jquery.knob.js that break the app.

a quick checklist of files that need to be there for the theme selector to work

/www/_header.php

/www/js/themeselector.js

/www/templates/settings.html

/www/templates/indextpl.html

(and the theme_*.css and volumio.css files)

ok @balbuze, here’s the files, to save on your time I’ve altered some of the theme_*.css files as stated below, firstly here’s the files I mentioned in my last post directly from my pi with a fresh copy of jquery.knobs.js

a refresher for anybody else trying this, the folders are:

/www/_header.php

/www/js/jquery.knob.js
/www/js/themeselector.js

/www/templates/settings.html
/www/templates/indextpl.html

you will need to flush your cache to see the changes

and finally the theme files (place in /www/css/)

volumio.css - removed a possible troublesome comment (also removed from all .css files)

theme_red.css - the latest flat ui with no changes.

theme_ylw.css - added gradient top and bottom bars. (bottom bar will look odd but don’t worry)

theme_pnk.css - latest flat ui but with alpha removed from the timeknob background (as its not showing on your last dolphin browser pic)

theme_grn.css - added speaker background using ‘background-image:’ instead of just ‘background:’
(if the speaker does not show in dolphin browser, hopefully it will be replaced with a black background)

theme_blu.css - added rgba(0, 0, 255, 0.5) for the background colour (to test if alpha works, should give a light blue background )

** out of date files removed **

really sorry this has taken so many tries, hopefully the results of this will provide the needed solution. I couldn’t have attempted to fix any of this without your help! thanks again! :smiley:

Thanks for your answer Sog Sussex, I tryed twice but nothing happen again, maybe it’s my web browser, I use the last version of Firefox.
I don’t really know what to do but thanks for all, i’m open to your advices.

Hi Ouatdefok, I think a file is corrupted so I took the files down yesterday, is your volumio still useable? if so I’d hold off until we’ve sorted it. if you’re stuck you could try the files I posted in my last post, this should work on firefox but the themes are all a bit different. once the themes are sorted you’ll be able to update the files when I upload them to the first post but I don’t know how long that will be. if you do try the above you must use all the files in both .zip files as they are different from the ones that were in the first post. hopefully we’ll have this up and running soon… :nerd:

Thanks again, i retryed this afternoon and it works :slight_smile: thanks a lot !
Now i will try to put the artwork, i hope i can do it !