Jump to content
cochize1

Next Up and Seasons switching places

Recommended Posts

cochize1

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

Share this post


Link to post
Share on other sites
CarlosLima

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

Share this post


Link to post
Share on other sites
chef

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.

Share this post


Link to post
Share on other sites
CarlosLima

no problem

Share this post


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

Share this post


Link to post
Share on other sites
cochize1

which exactly part of what html should I edit?

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
chef

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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
chef

#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

Share this post


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.

Share this post


Link to post
Share on other sites
cochize1

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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
cochize1

I already have it hidden so no:)

.detailVerticalSection.audioVideoMediaInfo{
    display: none!important;
}
  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

Okay that would be information for everyone else. :D

Share this post


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?

Share this post


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.

Share this post


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

Share this post


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.

Share this post


Link to post
Share on other sites
chef

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

Edited by chef

Share this post


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