problem with portraitcard css

[z3ndra 7]

Hi

So here I started to rewrite all my css from version 3.4.1.0 to 4.6.4.0.

I run into a problem, here in version 3.4.1.0, the thumbnails of the home page and the thumbnails of a library were independent, of 2 different sizes.

in version 4.6.4.0, when I apply a css to increase the size of the thumbnails (portraitcard), it also increases the size in the library.

so would there be a way for my css to only apply to the home page?

moreover would you know an addon or other which allows to know precisely the coordinates of an element on a page?

thank you in advance

[Happy2Play 9446]

1 hour ago, z3ndra said:

so would there be a way for my css to only apply to the home page?

Pageids have been removed so it harder to target areas, but the Home Page has .homeSectionsContainer and broken down into individual sections.  

1 hour ago, z3ndra said:

moreover would you know an addon or other which allows to know precisely the coordinates of an element on a page?

I just use the browser debug console (F12), select the element, then copy selector.

Example for homeSectionsContainer

Quote

body > div.mainAnimatedPages.skinBody > div.view.flex.flex-direction-column.withTabs.page > div.tabContent.flex.flex-grow.is-active > div > div.scrollSlider.flex-grow.padded-top-page.sections.scrollSliderY.homeSectionsContainer

[z3ndra 7]

thank u

by seeking I managed to modify that in home

but I would like to slightly re-enlarge the portrait cards in a library (item section), so I did this:
div.tabContent [tab-index = "0"] div .itemsContainer [data-parentid = "db4c1708cbb5dd1676284a40f2950aba"] div.portraitCard {
height: 286.05px! important;
width: 190.7px! important;
}

But it does not work

 

p.s : 

by the way I think you did a great job on your server

would it be possible for you to share with me the illustrative images of the genres by mp? I think it looks great, thank you in advance;)

Edited July 10, 2021 by z3ndra

[Happy2Play 9446]

7 minutes ago, z3ndra said:

thank u

by seeking I managed to modify that in home

but I would like to slightly re-enlarge the portrait cards in a library (item section), so I did this:
div.tabContent [data-index = "0"] div .itemsContainer [data-parentid = "db4c1708cbb5dd1676284a40f2950aba"] div.portraitCard {
height: 286.05px! important;
width: 190.7px! important;
}

But it does not work

Are you sure your data-index is correct? Not sure if it is just the copy and paste but spacing in code is wrong also.

example from my test

div.tabContent[data-index="1"] div.itemsContainer[data-parentid="26ca8e4674122bc3f4e29538c93b7f7c"] .portraitCard

 

Note height is cropping year (plus other options) off card in my test.  So it will affect the Show fields options.

[Happy2Play 9446]

33 minutes ago, z3ndra said:

would it be possible for you to share with me the illustrative images of the genres by mp? I think it looks great, thank you in advance;)

Sorry do you mean this?

If so these were Emby resource that were downloaded in the past by Emby from GitHub.  But the images still reside on GitHub.

Emby.Resources/images/imagesbyname at master · MediaBrowser/Emby.Resources (github.com)

If you mean something else please elaborate.

[z3ndra 7]

thank u

 

with 

nothing has changed, it doesn't work, it's strange because it should work

[Happy2Play 9446]

7 minutes ago, z3ndra said:

thank u

 

with 

nothing has changed, it doesn't work, it's strange because it should work

Sorry what is this?

[z3ndra 7]

sorry, : div.tabContent[data-index="0"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard

[Happy2Play 9446]

6 minutes ago, z3ndra said:

sorry, : div.tabContent[data-index="0"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard

But is should be data-index="1", correct?

data-index="0" .itemContainer should be empty

Edited July 10, 2021 by Happy2Play

[z3ndra 7]

no : the same

Edited July 10, 2021 by z3ndra

[Happy2Play 9446]

6 minutes ago, z3ndra said:

no : the same

Can you show what you see in the browser console as I did.

[z3ndra 7]

my css : div.tabContent [data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
height: 296.05px! important;
width: 200.7px! important;
}

nothing happens, yet I loaded the correct code

[Happy2Play 9446]

1 hour ago, z3ndra said:

my css : div.tabContent [data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
height: 296.05px! important;
width: 200.7px! important;
}

There is a additional space in your code.

div.tabContent[data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
height: 296.05px! important;
width: 200.7px! important;
}

From the console if you clicked on one of those portraitCards do you see your code on the right?

[z3ndra 7]

ok I see

the browser refuses to apply the properties, how do I do it?

[Happy2Play 9446]

You can see in that image you have a space between your numbers and px in height and width so the code is broken.  As the yellow triangle is telling you "invalid property value".  You shouldn't need the "!important" either.

div.tabContent[data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
height: 296.05px;
width: 200.7px;
}

 

[z3ndra 7]

thank you for your help it works now.

otherwise something else in passing: I changed the color of the headtop but it no longer becomes transparent on the items page and on the video player. if you have an idea?

similarly I created another topic concerning the resolution of the images if you have the time.

thank you in advance ;)

[Happy2Play 9446]

21 minutes ago, z3ndra said:

I changed the color of the headtop but it no longer becomes transparent on the items page and on the video player. if you have an idea?

Can you show an example.  What code are you using?

[z3ndra 7]

i use : 

.headerTop{
background-color : #303030 !important;
}

in the playlist  the banner is the right color but then it stays that color instead of disappearing

 

[Happy2Play 9446]

11 minutes ago, z3ndra said:

i use : 

.headerTop{
background-color : #303030 !important;
}

in the playlist  the banner is the right color but then it stays that color instead of disappearing

So you want headtop only applied in specific areas correct?  As what you have now is applied to every headtop.

[Happy2Play 9446]

Sounds like you want something like this.

.headerTop:not(.semiTransparent .headerTop) {
background-color : #303030;
}

As for this code height will create issues by killing the text lines.

div.tabContent[data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
height: 296.05px;
width: 200.7px;
}

 

Should do something like this, but obviously adjusting percent to your liking.

div.tabContent[data-index="1"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard {
width: 14%;
}