Happy2Play 8281 Posted December 3, 2019 Share Posted December 3, 2019 (edited) OT @@chef see the difference targeting without the need for !important. I guess it really depends on the global needs for the element if it is used elsewhere. .pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png) !important; height: 29px !Important; width: 110px !Important; } versus h3.pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png); height: 29px; width: 110px; } Edited December 3, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted December 3, 2019 Share Posted December 3, 2019 (edited) OT @@chef see the difference targeting without the need for !important. I guess it really depends on the global needs for the element if it is used elsewhere. .pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png) !important; height: 29px !Important; width: 110px !Important; } versus h3.pageTitleWithLogo { background-image: url(https://i.imgur.com/fJ7EsZT.png); height: 29px; width: 110px; } I see that. Some items in the default style sheets are tagged with important too and are unchangeable. For instance, I noticed that in the web app, when the mainDrawer is shown, the highlighted element (which uses the new root: --var) is marked !important, and is unchangeable. I wasn't able to get it to change from emby green through custom css. Perhaps it's a way to keep branding specific? In any case, good to know that element styles can be customized without using that override, everytime. Edited December 3, 2019 by chef Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 3, 2019 Share Posted December 3, 2019 (edited) Follow up, order can be adjusted via CSS but you have to remember that each content type will have a slightly different layouts so if you have not addressed specific element orders they will be pushed up into a order you are not expecting. One example could be "Extras" for movies. Also elements can have the same "order number' do the fact they do not appear on that specific itemdtailpage layout. div.detailPageContent { display: flex; flex-direction: column; } #itemDetailPage div#childrenCollapsible { order: 1; } #itemDetailPage div#specialsCollapsible { order: 2; } #itemDetailPage div.nextUpSection { order: 2; } #itemDetailPage div#castCollapsible { order: 3; } #itemDetailPage div#similarCollapsible { order: 4; } #itemDetailPage div#similarOnLiveTVCollapsible { order: 5; } #itemDetailPage div.audioVideoMediaInfo { order: 10; } As you can see "Included In" is first do to the fact is had not been "ordered". Not saying in any way this is the only way to do this, but my google foo pointed me in this direction. Edited December 3, 2019 by Happy2Play 1 Link to comment Share on other sites More sharing options...
cochize1 40 Posted December 21, 2019 Author Share Posted December 21, 2019 Follow up, order can be adjusted via CSS but you have to remember that each content type will have a slightly different layouts so if you have not addressed specific element orders they will be pushed up into a order you are not expecting. One example could be "Extras" for movies. Also elements can have the same "order number' do the fact they do not appear on that specific itemdtailpage layout. div.detailPageContent { display: flex; flex-direction: column; } #itemDetailPage div#childrenCollapsible { order: 1; } #itemDetailPage div#specialsCollapsible { order: 2; } #itemDetailPage div.nextUpSection { order: 2; } #itemDetailPage div#castCollapsible { order: 3; } #itemDetailPage div#similarCollapsible { order: 4; } #itemDetailPage div#similarOnLiveTVCollapsible { order: 5; } #itemDetailPage div.audioVideoMediaInfo { order: 10; } As you can see "Included In" is first do to the fact is had not been "ordered". Not saying in any way this is the only way to do this, but my google foo pointed me in this direction Seems that in emby 4.3.1 this order option does not work, or it's just me? Has anything to the naming of the page content changed? Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 21, 2019 Share Posted December 21, 2019 Seems that in emby 4.3.1 this order option does not work, or it's just me? Has anything to the naming of the page content changed? Seems to be working fine for me. Only change that I see is "Links" since they are not ordered they appear first. Looking at a system with no other custom css or edits. Link to comment Share on other sites More sharing options...
cochize1 40 Posted December 21, 2019 Author Share Posted December 21, 2019 (edited) Must have screwed up my code somewhere, will poke around, thanks. EDIT: well, I deleted whole css and pasted just this to test and no change at all: div.detailPageContent { display: flex; flex-direction: column; } #itemDetailPage div#childrenCollapsible { order: 1; } #itemDetailPage div#specialsCollapsible { order: 2; } #itemDetailPage div.nextUpSection { order: 2; } #itemDetailPage div#castCollapsible { order: 3; } #itemDetailPage div#similarCollapsible { order: 4; } #itemDetailPage div#similarOnLiveTVCollapsible { order: 5; } #itemDetailPage div.audioVideoMediaInfo { order: 10; } EDIT 2: Funny thing, when I copied back original item.html file (before changing the location of links section) the css started working again Edited December 21, 2019 by cochize1 Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 21, 2019 Share Posted December 21, 2019 Must have screwed up my code somewhere, will poke around, thanks. EDIT: well, I deleted whole css and pasted just this to test and no change at all: div.detailPageContent { display: flex; flex-direction: column; } #itemDetailPage div#childrenCollapsible { order: 1; } #itemDetailPage div#specialsCollapsible { order: 2; } #itemDetailPage div.nextUpSection { order: 2; } #itemDetailPage div#castCollapsible { order: 3; } #itemDetailPage div#similarCollapsible { order: 4; } #itemDetailPage div#similarOnLiveTVCollapsible { order: 5; } #itemDetailPage div.audioVideoMediaInfo { order: 10; } EDIT 2: Funny thing, when I copied back original item.html file (before changing the location of links section) the css started working again I had no issue with relocating link and this code. Link to comment Share on other sites More sharing options...
cochize1 40 Posted December 21, 2019 Author Share Posted December 21, 2019 (edited) It is probably because I used this code in item.html: <div class="verticalSection detailVerticalSection linksSection hide"> <div class="itemLinks padded-right"></div> </div> instead of yours: <h2 class="sectionTitle padded-left hide" style="margin-bottom:0;">${Links}</h2> Edited December 21, 2019 by cochize1 Link to comment Share on other sites More sharing options...
Happy2Play 8281 Posted December 21, 2019 Share Posted December 21, 2019 It is probably because I used this code in item.html: <div class="verticalSection detailVerticalSection linksSection hide"> <div class="itemLinks padded-right"></div> </div> instead of yours: <h2 class="sectionTitle padded-left hide" style="margin-bottom:0;">${Links}</h2> I moved the entire div <div class="verticalSection detailVerticalSection linksSection hide"> <h2 class="sectionTitle padded-left hide" style="margin-bottom:0;">${Links}</h2> <div class="itemLinks"/> </div> 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