Next Up and Seasons switching places

[Happy2Play 9443]

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

[chef 3808]

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

[Happy2Play 9443]

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

[cochize1 46]

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?

[Happy2Play 9443]

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.

[cochize1 46]

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

[Happy2Play 9443]

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.

 

[cochize1 46]

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

[Happy2Play 9443]

 

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>