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.
1 Like
Is anyone out there? 
1 Like
1 Like
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.
1 Like
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.
1 Like
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:
Have fun
Best regards
2aCD
2 Likes
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!
@2aCD,
I’ve been trying for hours to understand and modify the structure of this page but I can’t seem to find the right CSS references. Do you have any idea how I would take your design further by eliminating the text above the cover art, which would create more space, and horizontally centering the cover art more in the available space? I have a feeling that the javascript files will need modification to achieve this.
Hi Volumious,
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
2aCD
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
1 Like
Ok, found it, Thanks. I was initially confused by the ‘track info’ label in the CSS comments. Here is the result at 80px:
1 Like
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:
The result:
Pretty happy with this
1 Like
Hi @2aCD I am trying to copy this file (from a Windows computer to Volumio via Putty) but I am getting this error:
“ssh: Could not resolve hostname c: Name or service not known”
I am using:
scp C:\app-313de2febe.css volumio@192.168.X.XX:/volumio/http/www3/styles/
What am I doing wrong? Sorry I am quite noob with SSH…
1 Like
looks like your ip has changed… or you did not change the X.XX to your ip
are you on a windows machine then use this tool!
https://winscp.net/eng/upgrade.php?v=5.17.9.10905&lang=0413&isinstalled=1&beta=0&to=5.17.10&utm_source=winscp&utm_medium=app&utm_campaign=5.17.9
login is volumio pass volumio + ip of your rpi
after that go to the folder you need and drag and drop the files in place…
Thanks @dvo yes I am on a Windows machine, connecting to Volumio via Putty. The IP is correct, I double checked.
Oh this is much easier, with WinSCP it was easy peasy. Many thanks @dvo!