user24 109 Posted February 22 Share Posted February 22 Hi all, I have found some CSS in other forum threads to change the Alpha Picker font size and color and can get that working. I was wondering if it was also possible to change the Alpha Picker to a horizontal bar across the top of the screen just below the top menu tabs? For this to work as I am imagining, the Alpha Picker would need to be part of the top header section so that, when scrolling down and up, it disappears and reappears the same as the menu tabs do. (The scroll bar would stay on the RHS and scrolling would still be up/down.) Here are images of what I have now and what I would change it to if it is possible? If this is easy - then great! If not - no worries! Thanks... Link to comment Share on other sites More sharing options...
Happy2Play 8319 Posted February 22 Share Posted February 22 (edited) Something quick and dirty like this. Probably will need tweaked per other tabs potentially different variables for top and left but is a good start. But will have a scroll issue. div.view-music-music div.alphaPicker { flex-direction: row; top: -44vh; left: 20vw; inset-inline-end: unset; bottom: 0; } div.view-music-music div.alphaPickerRow-vertical {font-size: larger;} div.view-music-music div.alphaPickerRow {flex-direction: row;} div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;} Not ideal but reworked for scrolling as you end up with a bigger header basically. div.view-music-music div.alphaPicker { flex-direction: row; top: -65%; width: 100%; inset-inline-end: unset; background:var(--header-blur-background); -webkit-backdrop-filter: blur(4em) saturate(2.1); backdrop-filter: blur(4em) saturate(2.1); padding-top: 130px; } div.view-music-music div.alphaPickerRow-vertical {font-size: larger;} div.view-music-music div.alphaPickerRow {flex-direction: row;} div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;} Edited February 22 by Happy2Play Link to comment Share on other sites More sharing options...
user24 109 Posted February 22 Author Share Posted February 22 (edited) Thanks! This is a great starting point! With the first example I used top: -52vh and left:9.7vW for almost perfect alignment: As you would have have figured out when you tested it, the first "side-effect" is that the Alpha Picker remains fixed while everything else moves up/down behind it: An interesting experiment though and It works well functionally, but the second "side-effect" means it isn't a practical solution: Using a touchscreen, you can only scroll using the vertical screen area to the left of "#" and to the right of "Z" (still somewhat usable). The vertical area under "#" through ""Z" does not work using the touchscreen or the touchpad/keyboard controls (impossible to make a selection). So, onwards to the revised code: it may work better, but one (or more) of the settings is giving me a header that takes up roughly 90% of the screen area making it difficult to test. I've run out of time now to altering the settings, so am posting what it looks like in case you see this before I manage to get back to it. Anyway, it looks like a good solution may be technically possible. All for now... thanks again! Edited February 22 by user24 Link to comment Share on other sites More sharing options...
user24 109 Posted February 23 Author Share Posted February 23 (edited) Getting closer now. Added the first line of code below, which brings up the bottom of the header division. But I then need to alter the "top" percentage to stop the alpha picker letters moving off screen. div.alphaPicker-vertical {height: 70%;} div.view-music-music div.alphaPicker { flex-direction: row; top: -30%; width: 100%; inset-inline-end: unset; background:var(--header-blur-background); -webkit-backdrop-filter: blur(4em) saturate(2.1); backdrop-filter: blur(4em) saturate(2.1); padding-top: 130px; } div.view-music-music div.alphaPickerRow-vertical {font-size: larger;} div.view-music-music div.alphaPickerRow {flex-direction: row;} div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;} It's not quite there yet. I'll need to play around with the "height" and "top" numbers a bit more to get it looking right, unless there is another simpler way? But, other than that, it seems to be all functioning correctly as far as I can tell at the moment...... Edited February 23 by user24 Link to comment Share on other sites More sharing options...
user24 109 Posted February 23 Author Share Posted February 23 @Happy2PlaySome positive progress with the alignment... A bit of guesswork involved, as I'm still not sure exactly how all the different elements act together, but this worked out not too badly (It's probably really bad code from me though). div.alphaPickerRow-vertical {height: 130%} div.alphaPicker-vertical {height: 10%;} div.view-music-music div.alphaPicker { flex-direction: row; top: -5%; width: 100%; inset-inline-end: unset; background:var(--header-blur-background); -webkit-backdrop-filter: blur(4em) saturate(2.1); backdrop-filter: blur(4em) saturate(2.1); padding-top: 130px; } div.view-music-music div.alphaPickerRow-vertical {font-size: 100%;} div.view-music-music div.alphaPickerRow {flex-direction: row;} div.view-music-music div.itemsViewSettingsContainer {margin-top: 4em;} With the Alpha Picker letters spaced out, taking up the full 100% screen width, I reverted back to a smaller font size, as it is very easy to select them. It all works surprisingly well, much better than I was expecting. I think it's a keeper! I'll probably still be finessing it for a while though...... Link to comment Share on other sites More sharing options...
Happy2Play 8319 Posted February 23 Share Posted February 23 Not sure why you had to add the first two to the code but since you did not target it it will potentially affect all alpha pickers. But your image is now like my image above. Link to comment Share on other sites More sharing options...
user24 109 Posted February 24 Author Share Posted February 24 Yes, you are correct. This did mess up my Movie library. I have now fixed that up by using this instead: div.view-music-music div.alphaPickerRow-vertical {height: 130%} div.view-music-music div.alphaPicker-vertical {height: 10%;} All good now. I am slowly learning what I am doing! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now