Hi everyone, I’m customizing the UI, and it looks something like this (work in progress).
I added some code to the css file, and I just added a single word in the html (in the js file that creates the html) (to add a class).
Two things:
Maybe it could be implemented in the official version, if someone is interested. Otherwise can I ask the developers just to add a class in the place I need, so that it can be easier for people to use the line that I wrote.
In the mean time if anyone is interested I can post the code I wrote with some explanation.
Thanks!
I just finished coding, and I’m quite happy with the results.
I made the buttons a little bit bigger, and I did the same for the track info and for the volume slider.
The only thing I noticed is trhat the “time slider” disappears after the first song, and reappears only if you skip back, I don’t know if it is normal.
These are the results:
Tell me if you like it, and if you have any suggestion!
For what concerns the code this is what I did:
I had to add a class to a div html element.
(to do this you simply have to modify a part of the third row from the bottom of /volumio/http/www3/scripts/app-d505dc622d.js from <i ng-if="playback.playerService.state.icon" ng-class="playback.playerService.state.icon"></i></div></div><div class="col-xs-24" style="flex-shrink: 0;"><div class="row"><div class="col-xs-24 text-center track-info-container"><track-info is-in-footer="true"></track-info></div>
into:
<i ng-if="playback.playerService.state.icon" ng-class="playback.playerService.state.icon"></i></div></div><div class="col-xs-24 robe" style="flex-shrink: 0;"><div class="row"><div class="col-xs-24 text-center track-info-container"><track-info is-in-footer="true"></track-info></div>
You can see that the only difference is a new class called robe (=things in italian), but you can use what you like, the only thing is that it must be the same in the css code.
For the CSS code simply add this new line to /volumio/http/www3/styles/app-bd5cbd8b95.css
@media (max-width:802px) and (min-width:799px) and (orientation:landscape){#albumartContainer{width:auto;height:350px}.robe{width:50%;margin-top:auto;margin-bottom:auto}#playbackPanelWrapper{flex-wrap:wrap;flex-direction:unset!important}#playerButtons>button i{font-size:30px!important;padding-top:0px !important}.playPause{height:55px!important;width:55px!important;top:-40px!important;font-size:30px!important;padding-left:14px}.col-sm-offset-4{margin-left:0px!important}.col-sm-16{width:100%;}#playerButtons{padding-top:22px}#trackInfo-title{font-size:1.8em !important;}#player-bar{font-size:10px;}.robe{font-size:20px;}#trackInfo-album,#trackInfo-artist{font-size:1.4em!important}.slider.slider-vertical .slider-track{width:30px!important;margin-left:-15px!important;}.slider.slider-vertical .slider-handle{width:35px!important;height:35px!important;margin-left:-3px!important}}
can somebody tell me which one is for the display HDMI on the RPI,
I only what to change the layout for the display and not for the
monitor PC and Mobile display
