Hi 2acd,
I have v 3.067 and is working de v from 3.066 which you gave me last time
Thanks
Yes, for Buster itās working, but now the standard version is changed. Iām working at time on a install script, thatās check if the IDās match and copy only the right css files, to avoid compatibility problems.
The most people donāt look before start an installation. And now it seams the standard version has the same ID for css as the Buster version but with different content. So Iāll check this with installation.
Hi 2aCD, Iām talking about this:
- open your Volumio.local site
- press F12 to debug
- use the tab elements in debug window
- scale your browser window exact to your raspberry resolution (800x400 or so) with F12 you see the resolution in the right top corner of browser
- in your debug window now you find all variables thats defined (starts with --) in :root section
- the comments for it you find in the ccs file
- now you can change the variables live and you see the result in browser. Do not remove the extensions px or vh, change only the values. You can play a little bit with this variables, the changes are only for this session on your PC never write back to css.
- have you find the right sizing options, write that to your css file manually and select the mod again in VOLUMIO settings
Now Iām ready with a better install script. It check if your version match with included css files.
I have add a complete UI-Integration for both files, all variables are now integrated and some additional options (hide footer on PlayNow view and some color options)
Itās very important to remove all additional files from the styles folder and revert to original files also in appearance folder before you start the installation from first post.
Best regards
2aCD
Cool stuff! I already wrote an ansible role to customize Volumio and I had integrated your changes, but now with the install script it seems easier
I see from your screenshots that you changed the colors in the CSS too, would it be possible to have a look at your themes? I am trying to make Volumio UI blue, but I canāt come up with a complete solution. I am too lazy to fiddle with scss and compile the css files
EDIT: I managed to setup a dev environment, so I am able to build my own CSS. Would it be possible to have the source files for your modifications? That way I could add them to Volumio source, patch them with my changes and build my own image
Thanks to @2aCD and @lausiv i was able to do this and add it to my DAC which doesnāt support android phones, i used volumio and raspberry pi to connect to it. Its in the testing phase but so far very happy considering itās the first time iāve done this.
I tried to use lausiv UI although very visual it was limiting on menu functions so im using @2aCD UI from post 98, just need to make the FONTS bigger as they are much smaller, still going though the forum to learn how to do it but any tips to make it more readable and how to change it would be greatly appreciated!
Thanks for this
look into the css file at ātitle info size for landscapeā
Holy crap, this is absolutely great! Thank you so much for this.
This plus Tidal Connect makes volumio nearly perfect.
Iād definitely paypal you a few $$ if I could.
Just one very minor request: It may not be possible, but right now the album art doesnāt extend all the way to to bottom of the screen. For me, the ability to have the album art left justified + vertically maximized would be the best.
Thanks again for all your hard work.
Hi @Xhorder ,
not sure if itās the right way to do it but itās working for me.
I added the following at line 9888 in the css file:
@media (min-width: 799px) and (max-width: 801px) {
#playbackPanelWrapper.mobile #albumartContainer .cover-art-container {
text-align: center;
scrollbar-width: none;
position: absolute;
top: 25px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
}
top: 25px is what center vertically the picture on my screen.
of course replace the width(799/801) with your screen size.
One thing is weird, Appearance is set to ***_1.css (mod1) , but only modifying ***.css works.
Maybe 2aCD knows why (the same for title size).
Hi xhorder,
set the option āspace around albumartā to ā0ā then the albumart is placed in the left upper corner and then set the āresizeā option a little bit greater to fill the complete hight. So you donāt change the css
Hi Guys
So i managed to increase the text size for the Name of the track, bitrate etc, i messed about with the play buttons got this set to 2, may try 1 but its the right size, know idea if i can move it up a little?
Not really fussed iām trying to figure out how to incease the āspotifyā logo as itās so small but not sure which part of the script iām supposed to change. Same for the like, add and share icons on my screen they are just a little too small as im using it as a touch screen
Iām basically learning as i go along so forgive me but i havenāt really got a clue at the moment!
Thanks in advance.
That worked! Thanks
@vishal
I think you need a global scale factor at first. With the new TouchScreen plugin you can set a global scale factor. Please try 120%
This set the Chrome scale in /opt/volumiokiosk.sh
āforce-device-scale-factor=1.2
Hello!
I use the same panel. Please let me know how can setting it.
Hi,
I saw that a new beta version is out with UI improvements. V 3.063. Could someone pls confirm if already updated the sw if the files are changed or not.
I will flash now on a sd card and post the results here.
Edit 2
The files are not changed. Updated to 3.073 and the modification are retained.
Thanks.
Hi @Lintbf
I have test it with the new Buster 3.073, and all is ok. The css files are the same and for all other files I use āsedā to insert my additional code at the right place. So itās not a problem, if they changed a little bit with a new version.
I repeat the question, as I am progressing in my customizations of base Volumio: would it be possible to have the source files of your modifications to be able to incorporate the mod properly in a custom image?
Hi, donāt understand exactly, which source code do you mean. The installation package with the install script contains all code that inserted in original files. Also the css files with changes. Nothing is compiled all is open and readable. No other files are exist.
Thanks so much for this. I just built a small streaming box at home with a small 5ā display, and this is exactly what I was looking for. I even made a feature request to volumio for something like this