About the top bar - EmbyServer 4750

[CarlosLima 148]

Hi,
Is it possible to use CSS/HTML to position links in the yellow frame to the green frame?
I see it would look better because we have an empty space above and it would look nicer visually.
Thank you very much

[GrimReaper 3305]

AFAIK that depends on the size of the window, I don't see it either on Fulscreen or 1920x1080p maximized window, but once windowed that gap shows, so you might end-up with overlapping text. If you go Fullscreen, does tab-bar move up? 

[CarlosLima 148]

Fullscreen

[GrimReaper 3305]

Hm, I can only assume you already have some CSS that's interfering. 

Fullscreen:

 

Maximized windowed:

 

Windowed:

 

Edited July 1, 2022 by GrimReaper

[CarlosLima 148]

Hi,
Thanks a lot for the help.
It shouldn't be CSS or HTML because on my EmbyServer beta 4803 that I use for testing, I don't have any code applied and the fullscreen displays the links in the same position.

[GrimReaper 3305]

I don't see it in beta 4.8+ either until windowed. If you try another browser, does same happen? 

[CarlosLima 148]

Yea,
I use Chrome but Edge and Firefox display fullscreen the same way.

[ebr 14921]

I believe the key here is resolution.  At smaller resolutions, the tabs move down so they will all fit without colliding with the other items.

[CarlosLima 148]

Thank you so much.

[Happy2Play 8295]

If needed look here.

https://emby.media/community/index.php?/topic/103605-a-few-css-bits-mostly-from-other-people/&do=findComment&comment=1132119

 

[CarlosLima 148]

I tried the link again (I had tried it some time ago) but it is perfect only on the big screen. On mobile, it really has an overlay and I chose to keep the Emby pattern. Thanks.

[Happy2Play 8295]

1 hour ago, CarlosLima said:

I tried the link again (I had tried it some time ago) but it is perfect only on the big screen. On mobile, it really has an overlay and I chose to keep the Emby pattern. Thanks.

Yep that is why they are on a separate rows unless resolution meets set "@media not all and (min-width: 120em)" value.  But looks to be a bit excessive.

Edited July 1, 2022 by Happy2Play

[CarlosLima 148]

True, Emby does have a great level of customization but you can't have everything. Thanks

[Happy2Play 8295]

From Plex theme topic but with fix for width.  Will shift row back down at lower resolution.

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 55%;
	}
}

 

[CarlosLima 148]

Your effort is above expectations, thank you very much.
The code worked and raised the Home and Favorites position, but my personal link line couldn't make it go up.
It was at 120px, I changed it to 100px and then to 80px but it didn't change position.
Is it possible to go up that line?

[Happy2Play 8295]

It moves just fine for me adjusting the inline top value but will have a possition issue on smaller screens where headermiddle will move over it.

@CarlosLima but did you try adding it in "@media (min-width: 80em)" as you will need it to move with resolution?

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 55%;
	}
	.Personal-Links {
	top: 65px !important;
	}
}

Edited July 3, 2022 by Happy2Play

[arrbee99 1560]

A similar situation to the above - you have css that moves up the 'middle stuff', is there anything that moves up the stuff below that, for example in Movies, that would move up the line that has the number of items, Play All, Shuffle etc, and everything below, or in the TV guide, that moves up the Date displayed and the three dot item (and everything below). Thank you.

[CarlosLima 148]

On 7/2/2022 at 8:39 PM, Happy2Play said:

It moves just fine for me adjusting the inline top value but will have a possition issue on smaller screens where headermiddle will move over it.

@CarlosLima but did you try adding it in "@media (min-width: 80em)" as you will need it to move with resolution?

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 55%;
	}
	.Personal-Links {
	top: 65px !important;
	}
}

 

Hi,
I think I missed this answer, sorry.
Yes, I applied this code and everything seems to be fine. Thank you very much.

[King Pin 28]

On 7/1/2022 at 8:30 AM, GrimReaper said:

AFAIK that depends on the size of the window, I don't see it either on Fulscreen or 1920x1080p maximized window, but once windowed that gap shows, so you might end-up with overlapping text. If you go Fullscreen, does tab-bar move up? 

That's what happens with me.  

First pic is window at 100%. 

Second pic is window at 80%. 

 

 

[CarlosLima 148]

Tested at 80% and 100% and perfect alignment in Chrome.

I also tested it at 25%, perfect and only at 110% the line goes down.

Edited August 12, 2022 by CarlosLima