I’m a big fan of Volumio apart from one thing… the album cover art is tiny. At first I thought that there must be another view which I hadn’t found yet, which would show the cover at a larger (full-screen) size but nope. Here is a before and after change which I would like to see. Even full screen cover art would be great.
Is anyone out there?
Thanks for the link but that user came up with a very different design which appears to be targeted at very wide screens. I’m suggesting a change to the standard desktop computer (and tablet) layout.
Hi, at time I have only changed the mobile view of contemporary design for landscape displays. But I’m shure it’s possible to change this view also. I’ll look in the evening, what’s possible.
that’s possible. I have only try a little bit. I’ll write this changes back to css. Then you can use that as base to change itself.
Great, looking forward to seeing what you come up with
Hi, here is the a modified css for PC-View. It switched grater then 700pix in height.
I have implement some variables to change the border and background for text. with this variables you can switch back to original borders.
copy the file to /volumio/http/www3/styles/app-313de2febe.css. Please backup the original file before you replace.
All changed are commented
app-313de2febe.zip (38.7 KB)
this is the result:
Wow, thanks for that. Looking forward to trying it out
I finally had some time to try this. It’s definitely an improvement but there’s more I wish I could change (e.g. centering the art more in the page and removing some of the duplicated info), but I’m pretty sure that some of the changes would involve changing more than just the style sheet Anyway, thanks again!
to disable track info it’s needed a new entry: ‘disable:none’ on the right place. I have add this entry and define it as variable to set it on the begin of file. For move and resize I have also add new variables.
app-313de2febe.zip (38.9 KB)
With search you find the place, where I have add the values.
Have fun and best regards
Thanks, @2aCD! Definitely getting closer I have removed some unused menu items, which cleans things up, and this is the current state shown in the top image below. Still trying to figure out how to make the cover art larger and more centered, as the the bottom image : )
The final piece of the puzzle will be to use “display: none;” on the volume container div on the bottom right volume control but only for this playback view. Other views will need the volume control.
What did you mean by the ‘resize’ parameters? I didn’t find any variables which seemed to apply to the cover art size.
I have add this variables on the begin of css file with comments to use. The resize value set to 20px or so , don’t forget the px after the value
Ok, found it, Thanks. I was initially confused by the ‘track info’ label in the CSS comments. Here is the result at 80px:
I finally found a way to move the cover to the right. It’s probably not a perfect solution for very large screen sizes but it works well on my laptop. In case it helps other I will post the method here:
Open /volumio/http/www3/scripts/app-40ba15eb14.js and find two instances of the following string:
<img ng-if="trackInfo.playerService.state.albumart" ng-src
In both cases, modify the DIV tag immediately before both of these image tags by adding align=“right”
Should look like this:
Pretty happy with this