Contemporary optimizations plugin for local connected displays

you find the albumart lines here: 9476

this is my change:

/* ----- changed begin new playbackpanel landscape ----- */ 
@media (orientation: landscape){ #albumartContainer {
		position: absolute;
		top: 10px;
		left: 10px;
		height: calc(100vh - 100px);
		width: calc(100vh - 100px);
		max-width: 50%;
@media (orientation: portrait){ #albumartContainer {
		position: relative;
		margin: 10px;
/* ----- changed end ----- */	

the portrait code is original. For landscape I have set an absolute position on the left side of max 50% of the landscape screen. The size is 100% from hight with a minus from 100 pixel.
Here you can test with other values.

with bigger screen resolutions the UI switch to the PC view with sidebar. The limit for this switching is 962 pixel widht. This is not changed. The bigger view is original. The best way to see the switching is a usage on a PC over http://volumio.local
You can change the size of browser window and see the different views.
I think the css file is the same on all different platforms. Is the filename correct then I think it works.
If my file not working you can switch back to the original file without risk, its only a css stylesheet.

Copy with sudo is necessary with the volumio account in winscp

1 Like

I am able to open the css file and be able to modify it. However, I’m not a programmer. Could you please give me a step by step to “Copy with sudo is necessary with the volumio account in winscp”?

I am a Mac user but have a Windows machine available. Thanks.


sorry it was my mistake, no sudo is needed. The user volumio have enough permissions to write in folder /volumio/http/www3/styles/.

  1. enable ssh for Volumio on the site http://volumio.local/dev

  2. then you can connect with winSCP and user Volumio PW Volumio and Port 22 to server volumio.local

  3. navigate at first up to root and then to /volumio/http/www3/styles/

  4. copy the original css file app-313de2febe.css (936d2e26fe.css) to your local disc and rename the file on your volumio server

  5. copy the new file from local disc to /volumio/http/www3/styles/
    thats all, refresh the site on PC and see.
    Have you a connected display direct to raspberry then needs a restart.


Regarding step4, why do I need to rename it? To what name I should rename? I just copy the new css file to same. Location no?

It’s a personal doing of me. Never overwrite an original file. Always rename the original and copy the new with original name. The copy of original to a local place is an additional security.
Change I more then one files, I have a set of original files on my PC. It’s not necessary to do this exactly.


Thanks for explaining this :slight_smile:
Pls help me on this topic.
Currently I use the 4.3 inch display. I am using the clasic interface. In userconfig.txt I have added those lines
Frame buffer _widith =767
Frame buffer height = 428
Frame_buffer aspect=1
The results is like this

How can I move the circle in the wright size of the display, what lines should I modify ?

  1. I enabled ssh for Volumio on the site http://volumio.local/dev
  2. I use WinSCP and did what you said by use Volumio for user and PW on Port 22 to volumio.local (Host name) and the File protocal is “SFTP”. I got an “Access denied”. I tried different passwords as “Volumio”, “volumio”, “Volumio2”, “volumio2” and all are denied.!

Any idea?

Capture 1|665x500

username and password volumio not Volumio. also username is casesensitive

1 Like

I have no changes at time for classic design. To move the cirle to right side I have only a litle change in /volumio/http/www3/styles/app-e831b7a181.css (34.5 KB)

only added this lines:

/* ----- begin change ------- */
@media (orientation: landscape) and (max-width: 767px) {
    #trackManager {
        left: 50%;
/* ----- end change ------- */

you can find it with /* ----
its only for your test

1 Like

Yes, all lower case “volumio” works for both user name and password.

My screen is 1080 resolution (1920x1080). I tried to change the “100px” to several different numbers all the way up to “900” but it didn’t change on the screen that attached to the Tinker Board S.

Any value or area that I should play around with? What I need is to have it shows like yours, the album cover take the half screen on the left. This is only for a distant view only.

1920 is a full HD. The limit to switch from mobile to full view is 800px width. What you need is, to move this limit over 1920px width for the play view. See the @media tags to move this limit. But it’s a little bit tricky to do this different for different views.
I’ll play around a little bit…

1 Like

I have read a little bit about the css pixels handling and is not that easy :frowning: I realy appreciate your work. I will think on how do I want to look the volumio interface on dsi display on classic or contemporary layout. I guess I will go with contemporary. As soon as I have a layout I will tag you for help.
Many thanks in advance.

thanks, works perfectly :smiley: and is just as nice to operate than the original layout and personally I think it also looks nicer.

3.5 inch touchscreen LCD A v3, 480 x 320 pixel.
XPT-2046 touch controller.
volumio-2.861-2020-12-22-pi img.
raspberry 4b 2gb.


Oh nice, I’m glad to hear that’s also looks better on a 3,5" 480 x 320 display. :yum:

1 Like

Hi together, the next modified css only switch to PC-View, if the resolution grater then 1920x1080. FullHD displays run also in mobile view with this css. The grid to show the albumarts is a litte bit changed to show more albums with this bigger resolutions.

A download v5.3 at first post exist:

have fun and best regards

1 Like

Thanks 2aCD.


Hi 2aCD,

I found that the file “app-e831b7a181.css” is in “/volumio/http/www/styles/” so I replaced the file with yours but after rebooting there is nothing changed!



Oh sorry that was not the right file, I have replace the download link now.


Ok, I got it working. Thank you so much.

I’m not trying to be picky. What if I want to make the album art to be bigger size, where do I change in your file?

Here is what I get from the “Touch Display” plugin (Pi4) with portrait orientation which “Touch Display” plugin (TBS) doesn’t have the orientation selection.