Next Up and Seasons switching places

[cochize1 46]

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

 

[Guest]

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

[chef 3808]

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

 

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

[Guest]

no problem

[Happy2Play 9444]

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;}

[cochize1 46]

which exactly part of what html should I edit?

[Happy2Play 9444]

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; }

[Guest]

 

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.

 

[chef 3808]

Hi,

1. I applied the CSS

2. I cleaned the browser

It didn't work, they are still there.

 

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

[Guest]

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

 

No ...

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

Edited December 2, 2019 by CarlosLima

[Happy2Play 9444]

Hi,

1. I applied the CSS

2. I cleaned the browser

It didn't work, they are still there.

 

 

 

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

 

[chef 3808]

#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 December 2, 2019 by chef

[Happy2Play 9444]

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

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

[cochize1 46]

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 December 2, 2019 by cochize1

[Happy2Play 9444]

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

[Guest]

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;}

[Happy2Play 9444]

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?

 

[Happy2Play 9444]

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

[cochize1 46]

I already have it hidden so no:)

.detailVerticalSection.audioVideoMediaInfo{
    display: none!important;
}

[Happy2Play 9444]

Okay that would be information for everyone else.

[Guest]

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?

[Happy2Play 9444]

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.

[Guest]

#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

[Happy2Play 9444]

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

[chef 3808]

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

Edited December 3, 2019 by chef