Jump to content

problem with portraitcard css


z3ndra
 Share

Recommended Posts

z3ndra

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

Link to comment
Share on other sites

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

selector.thumb.jpg.2bd6f3514550f2fef46e1d7e4108e943.jpg

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

Link to comment
Share on other sites

z3ndra
Posted (edited)

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

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

image.png.03330571c9e1ec39f1cb3c171c4e5394.png

Link to comment
Share on other sites

Happy2Play
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?

image.thumb.png.844730e3deedc18cbcf3a64379bbe4a3.png

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.

Link to comment
Share on other sites

z3ndra

thank u

 

with 

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

Link to comment
Share on other sites

Happy2Play
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?

Link to comment
Share on other sites

z3ndra

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

Link to comment
Share on other sites

Happy2Play
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?

testcode.thumb.jpg.af283a3d5998f848622691ef8934f689.jpg

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

code2.thumb.jpg.eb10e31004a42531bbd894ded934f4df.jpg

Edited by Happy2Play
Link to comment
Share on other sites

Happy2Play
6 minutes ago, z3ndra said:

no the same

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

Link to comment
Share on other sites

z3ndra

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

emby 1.png

Link to comment
Share on other sites

Happy2Play
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?

823133915_emby1.png.f39749c880281813b3cf8cc523cf5457.thumb.png.b80284fbd247285c72a1c1eae188c833.png

Link to comment
Share on other sites

z3ndra

ok I see

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

emby 2.png

Link to comment
Share on other sites

Happy2Play

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;
}

 

Link to comment
Share on other sites

z3ndra

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 ;)

Link to comment
Share on other sites

Happy2Play
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?

Link to comment
Share on other sites

z3ndra

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

 

emby 6.png

emby 5.png

emby 4.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Happy2Play

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;
}

 

css1.thumb.jpg.3aec61eb1aaa7be926342bcd3abac4af.jpg

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%;
}

 

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
 Share

×
×
  • Create New...