Contemporary optimizations plugin for local connected displays

I’m glad to help with this modification :+1:

Don’t you start from some scss file? It would make much easier changing the colours (I am using shades of blue).
Well, if that’s not the case, I will try to include your changes in my custom image :wink:

hi 2aCD i have original UI for my 3,5 inch… but i cannot use the click on icon because there’s a play control line on this… from were i can download your css? thank you

Hi @akelge, I’m started from a compressed original css file, I have unminifyed to a readable format and have include some variables to change it per UI
All changes are remarked to find it.

Hi @nadirfly, you can download the install_appearance from the first post here. There are two folders included with css files. The installation instructions you find also on the first post. After the installation many settings in appearance are available to change positions.
If you won’t use the installation please look in the ID folder that’s match with your installed ID and use the css with *_1.css and rename it without _1 and replace the original css manually (backup the original before)

I see, well, maybe if you have time you can try to start from the original SCSS and create your own :slight_smile:

On the other side I checked the last version and I saw you added the option to chose the base color, that could be enough for my purpose, I will only need to put my shade of blue in the colors.json file :wink:

Thanks a lot, great work

What is the base color pls and from where I can modifi it?

Yes, the colors.json is merged to an expanded UIconfig.json of the appearance plugin in volumio folder. You can add your own colors as new sections to the colors.json before you install the package.
After the installation add your own colors to UIconfig.json for test and add it then for the next installation to the colors.json.

Hi @Lintbf,
the base color is used on many places of the css file, for all green elements separately. I have the most places replaced with a css-variable ‘forecolor’.
This variable is changed from the UI with some predefined colors. Explained one post above.

Hey I really hate to bug. I am completely new to this. And I’m building something similar to yours. Even with the same screen.

I’ve been reading thru the thread and I dont understand where to put any of the code or what code. There is ALOT going on in this thread. This is the last thing I need to get running on my project then it’s done. Pls help.

Thank you 2aCD… Can i modify the home icons dimensions?

Beautiful display… where I can buy this?

Hi, which resolution have your display?

is this

ok, you have 480px width. A grid with 4 panels is enabled grater then 500px width.
If you use Volumio 2.882 a scale factor is available in your TouchScreen plugin. Try to set this scale factor to 90% I think then it switch to 4 panels.

Another way to force 4 panels for 480px width is, to modify the mod css file that you use manually.
For this open the *_1.css or *_2.css (depend on your selected mod) The mod 1 is the right mod for you.


search the keyword: IPhoneSE

you find the line:

/* ----- changed begin resolution for IPhoneSE landscape ----- */
@media (min-width: 500px) and (max-width: 789px){ 

change the min-width to: 480px
save the file and select the mod 1 again in appearance settings. This initiate a reload of UI.

good luck

ok… now it’s beautiful… but if I want even smaller icons, where do I intervene?

Is any method to run two separete Interface layout? One for display connected to hdmi (custom layout) and second (standard) for phone.

Unfortunately the remote web interface and the local web interface use the same css file. But the most of my custom settings change only the landscape format. So the phone with portrait format still standard. Have you a hdmi display with a higher resolution and use the mod 2, then some settings only for high resolution and not for the phone.

I just to thank you for your work. Made Volumio PERFECT.
I made modification myself, but your last version made every customization I wanted possible,out of the box.
(The hide bottom bar is genius)

Moods/Devs you should add this as a Volumio Feature.

How do you hide bottom bar?