Jump to content

Next Up and Seasons switching places


cochize1

Recommended Posts

Happy2Play

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 by Happy2Play
  • Like 1
Link to comment
Share on other sites

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 by chef
Link to comment
Share on other sites

Happy2Play

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

5de5bc4ebc4ec_order.jpg

 

Not saying in any way this is the only way to do this, but my google foo pointed me in this direction.

Edited by Happy2Play
  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
cochize1

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

 

5de5bc4ebc4ec_order.jpg

 

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

Happy2Play

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

cochize1

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 by cochize1
Link to comment
Share on other sites

Happy2Play

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.

 

5dfe4c4e11919_order.jpg

Link to comment
Share on other sites

cochize1

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 by cochize1
Link to comment
Share on other sites

Happy2Play

 

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

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