cochize1 41 Posted December 2, 2019 Share Posted December 2, 2019 Is there a way to switch places to Next Up and Seasons (so that you can see Seasons right below the main poster)? Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 and I would like to remove Next Up. I see no reason for it to exist. Link to comment Share on other sites More sharing options...
chef 3745 Posted December 2, 2019 Share Posted December 2, 2019 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. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 no problem Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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;} 1 Link to comment Share on other sites More sharing options...
cochize1 41 Posted December 2, 2019 Author Share Posted December 2, 2019 which exactly part of what html should I edit? Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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 comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 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. Link to comment Share on other sites More sharing options...
chef 3745 Posted December 2, 2019 Share Posted December 2, 2019 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? 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 (edited) Did you apply the !important modifier to the display none? No ... #itemDetailPage div.nextUpSection.verticalSection.detailVerticalSection {display: none;} Edited December 2, 2019 by CarlosLima Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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. Link to comment Share on other sites More sharing options...
chef 3745 Posted December 2, 2019 Share Posted December 2, 2019 (edited) #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 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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 comment Share on other sites More sharing options...
cochize1 41 Posted December 2, 2019 Author Share Posted December 2, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 #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. 1 Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 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 comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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? Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 But that would be a easy fix giving "#itemDetailPage div.audioVideoMediaInfo" a higher order number. Link to comment Share on other sites More sharing options...
cochize1 41 Posted December 2, 2019 Author Share Posted December 2, 2019 I already have it hidden so no:) .detailVerticalSection.audioVideoMediaInfo{ display: none!important; } 1 Link to comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 Okay that would be information for everyone else. Link to comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 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 comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 2, 2019 Share Posted December 2, 2019 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 comment Share on other sites More sharing options...
CarlosLima 148 Posted December 2, 2019 Share Posted December 2, 2019 #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 comment Share on other sites More sharing options...
Happy2Play 8282 Posted December 3, 2019 Share Posted December 3, 2019 #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 comment Share on other sites More sharing options...
chef 3745 Posted December 3, 2019 Share Posted December 3, 2019 (edited) Also watch for !important spelling with lowercase 'i', not uppercase: '!Important' Edited December 3, 2019 by chef Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now