I’m trying to customize my web interface. Translate the menus, get new look with new colors and stuff to make it a bit more personal. I assume there is a folder with HTML files that controls the web interface somewhere, but I can’t find were. Does anybody know were to find it?
If you are running a recentish version of Musicbox then it should be in /usr/local/lib/python2.7/dist-packages/mopidy_musicbox_webclient/static/
FYI, there is/was a dark theme under development but I think it needs someone with spare time. And if you come up with a nice alternative and are interested in making it part of the project then please submit a PR on the mopidy-musicbox-webclient github so we can include it. Thanks
Would be nice if you could redesign the volume control. It is to small to handle on a touch screen. Besides that it would be nice if you could control the volume slider with the scroll-wheel of the mouse. Just like Volumio which has a direct effect on the volume-level.
Regards
Harry
I have edited the /opt/defaultwebclient/index.html in the manner that you speak of with success (i.e translated the page).
I believe that’s just a symlink to the path I gave. Dont rely on that being
there in future releases…!
Is there a generic way to handle translations of pages so we can merge them
into the project? I must admit I have no idea how people handle it.
I have edited the /opt/defaultwebclient/index.html in the manner that you speak of with success (i.e translated the page).
It would be cool if future releases had multiply languages to choose from. provided by diferent users all over the world. 
Would be nice if you could redesign the volume control. It is to small to handle on a touch screen. Besides that it would be nice if you could control the volume slider with the scroll-wheel of the mouse. Just like Volumio which has a direct effect on the volume-level.
I’m not skilled enough to write new code and change a volume controller. Just a amature trying to play around.
I think I could be able (with a bit of luck) if I can sit down a couple of hours and see how it’s build to change colors and strokes on the already available parts.I have made a rough sketch in photoshop of what I have in mind.
Yes, you are probably correct assuming a symlink, or at least the pages are identical.
What I did is just search for the words that I know are in the English version, then replaced them. So, to give an exmaple, since I know that there are menu items called “Now playing” and “Search”, I opened the page in gedit and just found these items (ctrl-f). There is not so much text in the page at the end of the day, so that such a “manual” manner of doing this is ok, especially if you have to do it only once. Of course, if you wanted to have several languages supported by several people, (so that every new version is also updated in that language) I guess you could have a scipt that does this automatically from a list given by translators, perhaps? So create a list of menu and other text content displayed to the user in English, posts those on some wiki where anyone can offer translations ideas and people discuss them. Them when the new lists are ready, apply said script.
EDIT: maybe you could even use BeautifulSoup for this…
Good idea. My way of doing it is an easier version. Make a script that downloads and replaces the index file with a new one in another language. Although every time there is a new version you would manually have to make a new language file.
I would look at using http://tornado.readthedocs.org/en/latest/locale.html or http://jinja.pocoo.org/docs/dev/extensions/#i18n-extension for translations in the web extensions. There are also tricks similar to what Django does to get gettext support in JS if needed.
Using something like transifex, or some other system like that to manage the .po files would also be nice to allow non technical users to easily contribute new languages 
Find and replace these classes with:
.ui-slider-track.ui-mini {
height: 18px;
top: 8px;
}
.ui-slider-track.ui-mini .ui-slider-handle {
height: 26px;
width: 26px;
margin: -13px 0 0 -7px;
}
I hope this helps.
I’m gonna piggyback this thread and ask, Are those gorgeous-looking Mopidy Web Interfaces compatible with PMB? If so, can I just follow their usual install instructions? Any gotchas I should be aware of?
pimusicbox comes with two different webinterfaces, you can switch between them by editing settings.ini, but you can install and use any (or at least most) of the ones listed on mopidy site
Hello all,
is it somehow possible to change the cover size in the “now playing” window?
I’m running the musicbox webinterface on a rather small LCD in horizontal orientation and because of the cover size, I can’t see the track info without scrolling. It would be nice, if there was a way to make the cover smaller.
There isn’t really a way to configure this in Mopidy-Musicbox-Webclient (MMW) at the moment.
You could however force the album cover width to whatever you want by setting the max-width stylesheet property for #albumCoverImg.
In the latest release of MMW this would mean going to line 381 and 578 of webclient.css and changing max-width: 90%; to max-width: 100px; or whatever (just experiment with widths that are best suited for the resolution of your LCD screen).
Clearing your browser cache and refreshing should produce something like the below:
It doesn’t look particularly attractive, but at least you’ll get everything displayed on one screen without having to scroll.
Hi jcass77,
thanks for your quick answer! Although its less attractive, it works good! That was exactly what I was looking for.
Thanks again!