Contemporary optimizations plugin for local connected displays

The Font-Size of title for big resolution is here:

@media (min-width: 1601px) {
    #trackInfo-compact #trackInfo-title {
        font-size: 24px;

But it is also used for the footer in browse view. You can’t it resize to much.

1 Like

Perfect fit . :slight_smile: Finally after 1 year of volumio I 100 % like the UI ,

Now remain to increase the wright part of the screen
The play symbol can be increased ?

This is it! Thanks again 2aCD. You are THE MAN!!! :pray:

Hello ,
Could you please post the lines where you have modified and also with what values
Indeed this is fabulous with this new UI
Many thanks

1 Like


here now the latest css files for download. I have create configuration variables on the top of file, no more searching to find a configurable value.
In addition you can define a border around the albumart (set to 0px if not needed). Also you can change the background darkness.

first css is for small landscape displays and smartphone in landscape. The standard PC view is default. It’s a replacement for the first post:

Download removed, further down v5 exist

second css expand the mobile view up to 1920 full hd

Download removed, further down v5 exist

and here the latest installation to UI if you want.

Download removed, an updated download at first post exist


I worked with the variables file and is quite easy now. :).

  1. It is possible to increase also the artist name not only the track info, name.
  2. The song play, next etc can also be increased?
    Thanks for this easy solution.

Thanks for this work, for me getting the UI to be a little more visible on my 5" DSI display was a goal, so nice to have a starting point.

I added a param for the TrackInfo-Artist also, as that seems to be used for the stream name when doing web radio.

Couple suggestions:

  • Is there a way to make the track / artist scale to multiple rows
  • Maybe align the track/artist to vertical center (of the right pane)
  • Align the playback buttons to vertical-bottom.
  • Seems like the text size is also used in the bottom "now playing bar when jumping into the main menu, which in my case seems to be too large in that spot. I’m thinking of changing the CSS to reference a new class, but unsure if that would break other things.

Any idea how to achieve these? I can take a stab at it. (39.1 KB)

Hi, I have implement now the text wrap for artist and title, if that to large. I‘m not complete ready with all checks.
The player bar on main menu is a problem, have you enlarge the title to big. It use the same class. At time I have no solution for this. I‘ll try to create a new class.

1 Like

Here is my actual 15.4" screen that connected to Tinker Board S via HDMI and the screen resolution is 1280x800. I thought it was 1920x1080 that’s why I was playing with my pc screen setting as 1920x1080.

As you can see the three elements that I want to be standing out are: album art, file rate and song title. I am pretty much getting what I want. I know all the info on the right side are set as center from 50% of the screen in landscape mode. If I want to move them a little bit to the right, where can I play around with the margin setting?

My current set up is as follow:

For Album Art picture:
@media (orientation: landscape) and (min-width: 1200px){ #albumartContainer {
top: 0px;
left: 0px;
height: calc(110vh - 150px);
width: calc(110vh - 150px);
max-width: 55%;

For Track Title font size:
@media (min-width: 1200px) and (max-width: 1600px){
#trackInfo-compact #trackInfo-title {
font-size: 36px;

For Track Info Rates size:
@media (orientation: landscape) and (max-width: 1600px){ .track-info-rates {
font-size: 56px;
white-space: nowrap;
margin-top: 2px;
margin-left: 25%;

If you grab my file above it has a parameter up the top to adjust the Artist title font size as well… though Im sure 2aCD will probably implement it cleaner in his next rev Im sure :slight_smile:

Hi there. First of all big thanks to 2aCD for such good and very hard work with this css.

Here is my variation of it, for screen 1920x480 in my future streamer :wink: It is only for display, so I decided to leave only important data on screen.

But my question is: is it normal that after restarting appearance volumio returns to classic look?


Wow, very nice this resolution is not trivial.
The switch back to classic was a Little bug in modified index.js. Please download the latest installation and replace only the index.js.
That helps, contemporary still enabled after reboot.
Best regards

I have tried to use the instalation but after restart I had this display

So I revert the changes and come back to modified the file with the variables in the beginning of the file

You need one css file active without extension _01 , 02… For start you can duplicate not rename the original. It seems you have no das without extension active.

Great, thanks - now modified “contemporary” stays and work like a charm :slight_smile:

You’re right it wasn’t like piece of cake - to fit this resolution I had to touch each element on screen including centering verticaly and horizontaly. The most tricki was to find how to change position of “flac” image after resizing it;) That’s why I know what a titanic job you did.

Now I need to find some way to split title line if is longer then I can display. For now I manage to do it, this way

- it could stay as it is but there is enough place to try put another line of title. Maybe You will have some suggestion?

Hi, I have find the wrap of lines. This is a little bit tricky. It’s needed to reduce the parent container from 100% to a smaller width and remove white space: nowrap. I have do this in my next published version. Wait a little bit please, I’m try to find a solution for the big title info in player bar of main view, if you enlarge the title on play view.
I hope I find a way to remove the dependency between play view and player bar on main view.


Hi ,
I have used he files from install folder , I can select the contemporary layout 1 , the display is ok but how can I modify the file in real time . In folder www3/styles i have add app-313de2febe.css renamed from 01. Should I add also original files ? What file should I modifie after , 01?

Later edit : Finally i have added the original file and can select the new 01 layout and the display is changing :slight_smile: . So now I will select the original layout then update the layout 1 and when i will switch back this will laod the new data ? if yes this is awesome . Sorry for this basic question but I am not a programmer

later edit 1 : Thats it . it is fully working
My best regards ,

Ok it is exect as You wrote, but unfortunately its not good solution for my screen so I will use dots :slight_smile: Thanks.

I think this is it that I wanted! I made some video to show how the screen change and looks like when I change the song.

All the credit to “2aCD”.

Hi ,

Could you please tell me the names of the artist that you are playing , only a few pls. I really like it
The setup is really nice