Jump to content

Next Up and Seasons switching places


cochize1

Recommended Posts

Is there a way to switch places to Next Up and Seasons (so that you can see Seasons right below the main poster)?

 

5de4ff4f64cb7_1212.jpg

Yes, but I would mean editing HTML and it wouldn't be perminit. Meaning that each the server updated you would lose the edits.

Link to post
Share on other sites
Happy2Play

and I would like to remove Next Up. I see no reason for it to exist.

 

That one is easy.

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;}
  • Like 1
Link to post
Share on other sites
Happy2Play

which exactly part of what html should I edit?

Have you looked at the item.html in "\Emby-Server\system\dashboard-ui\item"?  It is layed out exactly as you see it.

 

 

As for reordering via css it can be done, but you have to remember that other content types use that same item.html so reordering TV will have an effect on Movies.  So you would need a order that would work on every itemdetails page.

 

Here is a example you can use to get what you want but navigate to a Movie and see what side effects you get.  I did not look at other itemdeatails views that may be affected.  (I believe all css methods will have issues do to all content types using the same html file so you could not like the change in other content types.  Same could apply for editing the html directly dependant of the change.)

div.detailPageContent { display: flex; flex-direction: column; }
#itemDetailPage div.nextUpSection { order: 2; }
#itemDetailPage div#childrenCollapsible { order: 1; }
#itemDetailPage div#castCollapsible { order: 3; }
Link to post
Share on other sites
CarlosLima

 

That one is easy.

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;}

 

Hi,

1. I applied the CSS

2. I cleaned the browser

It didn't work, they are still there.

 

5de59728871bd_Screenshot.png

Link to post
Share on other sites

Hi,

1. I applied the CSS

2. I cleaned the browser

It didn't work, they are still there.

 

5de59728871bd_Screenshot.png

Did you apply the !important modifier to the display none?

  • Like 1
Link to post
Share on other sites
CarlosLima

Did you apply the !important modifier to the display none?

 

No ...

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;}

Edited by CarlosLima
Link to post
Share on other sites
Happy2Play

Hi,

1. I applied the CSS

2. I cleaned the browser

It didn't work, they are still there.

 

5de59728871bd_Screenshot.png

 

 

Not sure what to say it works fine here in Chrome as that is all I really test in.  

 

5de59a3cb3f95_no.jpg

Link to post
Share on other sites

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none !important;}

 

Remember we re overriding embys default styles, so we must always add !important to our style changes to tell the DOM that "this style is what we want to use".

Edited by chef
Link to post
Share on other sites
Happy2Play

Did you apply the !important modifier to the display none?

All depends on how the element is targeted and !important is usually not needed.

Link to post
Share on other sites

Since I have Live TV this worked like a charm and placed everything inorder in both Movies and Series libreries:

div.detailPageContent { display: flex; flex-direction: column; }
#itemDetailPage div#childrenCollapsible { order: 1; }
#itemDetailPage div.nextUpSection { order: 2; }
#itemDetailPage div#castCollapsible { order: 3; }
#itemDetailPage div#similarCollapsible { order: 4; }
#itemDetailPage div#similarOnLiveTVCollapsible { order: 5; }

as for the Next Up this code worked right away even without the !important part (in Chrome):

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;}

so thank you, I am all set

Edited by cochize1
Link to post
Share on other sites
Happy2Play

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none !important;}

 

Remember we re overriding embys default styles in case, so we must always add !important to our style changes to tell the DOM that "this style is what we want to use".

 

You only need !important in you were targeting the exact same way it is written in Emby.  As you can see the majority of the code I post never uses !important.

  • Like 1
Link to post
Share on other sites
CarlosLima

You only need !important in you were targeting the exact same way it is written in Emby.  As you can see the majority of the code I post never uses !important.

 

Thanks for the tip, however, same thing, still there.

I use Chrome too.

 

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none !important;}

Link to post
Share on other sites
Happy2Play

Since I have Live TV this worked like a charm and placed everything inorder in both Movies and Series libreries:

div.detailPageContent { display: flex; flex-direction: column; }
#itemDetailPage div#childrenCollapsible { order: 1; }
#itemDetailPage div.nextUpSection { order: 2; }
#itemDetailPage div#castCollapsible { order: 3; }
#itemDetailPage div#similarCollapsible { order: 4; }
#itemDetailPage div#similarOnLiveTVCollapsible { order: 5; }

as for the Next Up this code worked right away even without the !important part (in Chrome):

#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;}

so thank you, I am all set

  Are you saying you don't have a issue with Cast and Crew appearing below Media Info on a Movie?

 

5de59e28d8d37_ex.jpg

Link to post
Share on other sites
Happy2Play

But that would be a easy fix giving "#itemDetailPage div.audioVideoMediaInfo" a higher order number.

Link to post
Share on other sites
CarlosLima

Something I noticed days ago. Inside the custom CSS code box, sometimes one code or another doesn't work, but moving it around (higher or lower) will be fine.

Is this logical?

Link to post
Share on other sites
Happy2Play

Something I noticed days ago. Inside the custom CSS code box, sometimes one code or another doesn't work, but moving it around (higher or lower) will be fine.

 

Is this logical?

 

Shouldn't be unless you have code competing against each other, or some broken code  in your list.

Link to post
Share on other sites
CarlosLima


#manualloginPage h1 {display: none;}


#manualloginPage label.checkboxContainer {display: none;}


#manualloginPage button.raised.block.buttonCancel.emby-button {display: none;}


#manualloginPage button.raised.cancel.block.btnForgotPassword.emby-button {display: none;}


.paper-icon-button-light { padding: 0em; }


div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}


.dashboardDocument div.skinHeader.skinHeader-withBackground  {
       background: rgba(255,255,255,.8);
       backdrop-filter: saturate(1.8) blur(1.5em);
}


button.raised.button-submit.btnHeaderPremiere.headerButton.emby-button {display: none;}


#itemDetailPage div.selectAudioContainer {display: none; }


#homeTab div.section0 div.sectionTitleContainer.sectionTitleContainer-cards {display: none; }


div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display: none; }


#homeTab .smallBackdropCard {
    width: 9.09%;}


div.sections.homeSectionsContainer div.section0 .cardTextCentered {display: none;}


.adminDrawerLogo img {
  content: url(https://i.imgur.com/fJ7EsZT.png) !important; }


.pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png) !important; 
  height: 29px !Important;
  width: 110px !Important; 
}
{ pageTitleWithDefautLogo { height: 53px !important; } 


div.dialogContainer [data-id="sync"] {display: none; } 


#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none! important;}

This is my current list of CSS codes.

 

Thanks for checking if you have anything incoherent

Link to post
Share on other sites
Happy2Play

#manualloginPage h1 {display: none;}


#manualloginPage label.checkboxContainer {display: none;}


#manualloginPage button.raised.block.buttonCancel.emby-button {display: none;}


#manualloginPage button.raised.cancel.block.btnForgotPassword.emby-button {display: none;}


.paper-icon-button-light { padding: 0em; }


div.skinHeader.skinHeader-withBackground {
    background: transparent;
    backdrop-filter: none;
}


.dashboardDocument div.skinHeader.skinHeader-withBackground  {
       background: rgba(255,255,255,.8);
       backdrop-filter: saturate(1.8) blur(1.5em);
}


button.raised.button-submit.btnHeaderPremiere.headerButton.emby-button {display: none;}


#itemDetailPage div.selectAudioContainer {display: none; }


#homeTab div.section0 div.sectionTitleContainer.sectionTitleContainer-cards {display: none; }


div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display: none; }


#homeTab .smallBackdropCard {
    width: 9.09%;}


div.sections.homeSectionsContainer div.section0 .cardTextCentered {display: none;}


.adminDrawerLogo img {
  content: url(https://i.imgur.com/fJ7EsZT.png) !important; }


.pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png) !important; 
  height: 29px !Important;
  width: 110px !Important; 
}
{ pageTitleWithDefautLogo { height: 53px !important; } 


div.dialogContainer [data-id="sync"] {display: none; } 


#itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none! important;}

This is my current list of CSS codes.

 

Thanks for checking if you have anything incoherent

 

 

 

At quick glance "{ pageTitleWithDefautLogo" should be ".pageTitleWithDefautLogo" or I believe "h3.pageTitleWithDefautLogo" if I am looking in the correct spot.  Not sure exactly where the stop point is when it comes to broken code.

Link to post
Share on other sites

Also watch for !important spelling with lowercase 'i', not uppercase: '!Important'

Edited by chef
Link to post
Share on other sites

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...