Jump to content

Modify CSS for Volume and Control Icons Positioning


Recommended Posts

Victor_root
Posted

Hello,

I need assistance with modifying the CSS for my Emby Server. Based on the attached screenshot, I would like to make the following changes:

  • Move the volume bar (currently at the top right, circled in green) to the bottom, near the area circled in green.
  • Move the control icons (currently at the bottom right, circled in red) to the bottom center, in the area circled in red.

Could someone provide guidance or the necessary CSS code to achieve these modifications?

Here is the screenshot for reference:

 

Thank you in advance for your help!

Best regards.

 

Capturedcran2024-06-10125931.thumb.png.a7f9db3550fd399c5b256ab06817dcd8.png

Happy2Play
Posted

Don't believe volume can be moved out of headerright as it is already not part of the page.

But since there are hidden controls already in for mobile portrait mode.

Maybe something like this.

div.videoOsdBottom-buttons-topright {
    position: absolute;
    left: 80%;
    bottom: 5%;
}


div.videoOsdVolumeControls-top {display: none;}

div.videoOsdVolumeSliderWrapper-bottom {
    max-width: 20em;
}

div.videoOsdVolumeControls-bottom {
display: inline-flex !important;
    left: 10%;
    top: 50%;
}

image.thumb.png.868945ecf2f8835614424f2d8425c6b8.png

  • Like 1
  • 1 month later...
arrbee99
Posted

This is interesting. Does anyone think there would be any way to rearrange that new bottom row, particularly splitting the 6 icons on the bottom right into two times 3 icons ?

Happy2Play
Posted
11 minutes ago, arrbee99 said:

This is interesting. Does anyone think there would be any way to rearrange that new bottom row, particularly splitting the 6 icons on the bottom right into two times 3 icons ?

What do you mean?

image.thumb.png.28f36ca7f0a4dcf98572e305b3c66721.png

Minor change from above.

div.videoOsdBottom-buttons-topright {
    position: absolute;
    left: 90%;
    bottom: -5px;
}


div.videoOsdVolumeControls-top {display: none;}

div.videoOsdVolumeSliderWrapper-bottom {
    max-width: 20em;
}

div.videoOsdVolumeControls-bottom {
display: inline-flex !important;
    left: 10%;
    top: 50%;
}

 

arrbee99
Posted (edited)

Was thinking the controls (i.e. the bottom left bits, including Info, etc) moved to the middle, and three of the right hand icons to the left of those, with a gap ( not sure how far,) and the three remaining still on the right (not sure how far).

EDIT - so I guess its turning one group of icons into two...

Edited by arrbee99
Happy2Play
Posted
28 minutes ago, arrbee99 said:

Was thinking the controls (i.e. the bottom left bits, including Info, etc) moved to the middle, and three of the right hand icons to the left of those, with a gap ( not sure how far,) and the three remaining still on the right (not sure how far).

EDIT - so I guess its turning one group of icons into two...

So if I get this right something like this.

image.thumb.png.df449a8163e0ca13e9877895a1e27a6d.png

Have no idea how other buttons or views will be affected.

div.videoOsdBottom-buttons-topright {
    position: absolute;
    bottom: -5px;
    width: 98%;
}

div.videoOsdVolumeControls-top {display: none;}

div.videoOsdVolumeSliderWrapper-bottom {
    max-width: 20em;
}

div.videoOsdVolumeControls-bottom {
display: inline-flex !important;
    left: -25%;
    top: 50%;
}


div.videoOsdBottom-buttons-topright button.osdIconButton.btnSubtitles {right: 80%;}
div.videoOsdBottom-buttons-topright button.osdIconButton.btnAudio {right: 80%;}
div.videoOsdBottom-buttons-topright button.osdIconButton.btnPlaybackSpeed {right: 80%;}

div.videoOsdBottom-maincontrols div.videoOsd-belowtransportbuttons {
    left: 45%;
    position: relative;
}

div.videoOsdBottom-maincontrols div.videoOsdBottom-tabs {
    left: 35%;
    position: relative;
}

 

arrbee99
Posted

Thanks very much. That looks spot on. I'll have to try to adjust a few things a bit as on my 4K monitor things aren't as symmetrical as you have them, and I get two groups of 2 instead of two groups of 3.

And it affects the music playing screen a bit.

So I'll probably be back when I've tried and failed...

Happy2Play
Posted
14 minutes ago, arrbee99 said:

Thanks very much. That looks spot on. I'll have to try to adjust a few things a bit as on my 4K monitor things aren't as symmetrical as you have them, and I get two groups of 2 instead of two groups of 3.

And it affects the music playing screen a bit.

So I'll probably be back when I've tried and failed...

So something more like this but with your required tweaks.

div.videoOsdBottom-buttons-topright {
    position: absolute;
    bottom: -5px;
    width: 98%;
}

div.videoOsdVolumeControls-top {display: none;}

div.videoOsdVolumeSliderWrapper-bottom:not(.videoOsdBottom-split div.videoOsdVolumeSliderWrapper-bottom) {
    max-width: 20em;
}

div.videoOsdVolumeControls-bottom:not(.videoOsdBottom-split div.videoOsdVolumeControls-bottom) {
display: inline-flex !important;
    left: -25%;
    top: 50%;
}


div.videoOsdBottom-buttons-topright button.osdIconButton.btnSubtitles {right: 80%;}
div.videoOsdBottom-buttons-topright button.osdIconButton.btnAudio {right: 80%;}
div.videoOsdBottom-buttons-topright button.osdIconButton.btnPlaybackSpeed {right: 80%;}

div.videoOsdBottom-maincontrols div.videoOsd-belowtransportbuttons:not(.videoOsdBottom-split div.videoOsd-belowtransportbuttons) {
    left: 45%;
    position: relative;
}

div.videoOsdBottom-maincontrols div.videoOsdBottom-tabs:not(.videoOsdBottom-split div.videoOsdBottom-tabs) {
    left: 35%;
    position: relative;
}

 

arrbee99
Posted

Thanks you. That seems to fix up the music thing great.

Another thing is that the controls on the right don't actually work any more -

Gear and Full Screen do nothing -

EmbyModOSDEpisode.thumb.jpg.6d1f1dd4a69ddfdaaa8f5fe4ea772f1f.jpg

and same for live TV (plus Record, which is separate for some reason) -

EmbyModOSDLiveTV.thumb.jpg.fa672e4ebf586b164db80210adbf470c.jpg

Am also hoping to center the Info etc sections under the main playback controls somehow.

 

 

Happy2Play
Posted (edited)
20 minutes ago, arrbee99 said:

Thanks you. That seems to fix up the music thing great.

Another thing is that the controls on the right don't actually work any more -

Gear and Full Screen do nothing -

EmbyModOSDEpisode.thumb.jpg.6d1f1dd4a69ddfdaaa8f5fe4ea772f1f.jpg

and same for live TV (plus Record, which is separate for some reason) -

EmbyModOSDLiveTV.thumb.jpg.fa672e4ebf586b164db80210adbf470c.jpg

Am also hoping to center the Info etc sections under the main playback controls somehow.

 

Yes as the tab actually overlap everything right right now.

image.thumb.png.e3c4268af80838ec7a43571c8a943bc4.png

Edited by Happy2Play
Happy2Play
Posted
37 minutes ago, arrbee99 said:

Gear and Full Screen do nothing -

Change this adding max-width

div.videoOsdBottom-maincontrols div.videoOsdBottom-tabs:not(.videoOsdBottom-split div.videoOsdBottom-tabs) {
    left: 35%;
    position: relative;
    max-width: 400px;
}

 

Happy2Play
Posted

Or maybe @arrbee99

div.videoOsdBottom-maincontrols div.videoOsdBottom-tabs:not(.videoOsdBottom-split div.videoOsdBottom-tabs) {
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

 

arrbee99
Posted

Not sure if this yellowish bar thing is getting in the way -

EmbyModOSDLiveTVarea.thumb.jpg.52c15cb916206f12f5833dfe51e7348e.jpg

at the moment those icons only work if you click on the very bottom of them, otherwise not.

 

Happy2Play
Posted
7 minutes ago, arrbee99 said:

Not sure if this yellowish bar thing is getting in the way -

EmbyModOSDLiveTVarea.thumb.jpg.52c15cb916206f12f5833dfe51e7348e.jpg

at the moment those icons only work if you click on the very bottom of them, otherwise not.

 

Should be good all you have to worry about is the purplish area as the yellowish is the margins

image.thumb.png.73ac105b58fe808a7d9f2ab6403608fa.png

Since two divs are stacked here had to shrink videoOsdBottom-tabs so left and right videoOsdBottom-buttons-topright are clickable

arrbee99
Posted

I actually think the Volume bar was blocking things. It has this wide blue bar thing as well. If you comment out all the Volume control adjustments the right hand buttons are way more clickable - there's just a bit at the very top of the icons that doesn't respond.

Happy2Play
Posted
7 minutes ago, arrbee99 said:

I actually think the Volume bar was blocking things. It has this wide blue bar thing as well. If you comment out all the Volume control adjustments the right hand buttons are way more clickable - there's just a bit at the very top of the icons that doesn't respond.

Will have to retest as browser console is actually changing postion of items

.

  • Thanks 1
Happy2Play
Posted
18 minutes ago, arrbee99 said:

I actually think the Volume bar was blocking things. It has this wide blue bar thing as well. If you comment out all the Volume control adjustments the right hand buttons are way more clickable - there's just a bit at the very top of the icons that doesn't respond.

And how about changing this also.

div.videoOsdVolumeControls-bottom:not(.videoOsdBottom-split div.videoOsdVolumeControls-bottom) {
    display: inline-flex !important;
    left: 10%;
    top: 50%;
    max-width: 20%;
}

 

arrbee99
Posted

Thank you. Thats much better.

arrbee99
Posted

I was also trying it with the volume back up top. Then thought I could move the left and right icons up -

div.videoOsdBottom-buttons-topright {
    position: absolute;
    bottom: 30px;
    width: 98%;
}

to be level with the play buttons, but then of course I think the play buttons are too wide again and extend over the right hand icons like the volume did. Was hoping this

div.videoOsd-belowtransportbuttons {
    position: relative;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

 might help. It seems to make the blue shorter but breaks something else.

Happy2Play
Posted (edited)
26 minutes ago, arrbee99 said:

I was also trying it with the volume back up top. Then thought I could move the left and right icons up -

div.videoOsdBottom-buttons-topright {
    position: absolute;
    bottom: 30px;
    width: 98%;
}

to be level with the play buttons, but then of course I think the play buttons are too wide again and extend over the right hand icons like the volume did. Was hoping this

div.videoOsd-belowtransportbuttons {
    position: relative;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

 might help. It seems to make the blue shorter but breaks something else.

Yes as there is a lot going on in that row and changing it collapses the rest.

image.thumb.png.fe368204fafda47a0a5e9d715dc6f625.png

Edited by Happy2Play

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...