z3ndra 7 Posted July 10, 2021 Share Posted July 10, 2021 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 More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 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 Link to comment Share on other sites More sharing options...
z3ndra 7 Posted July 10, 2021 Author Share Posted July 10, 2021 (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 July 10, 2021 by z3ndra Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 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. Link to comment Share on other sites More sharing options...
z3ndra 7 Posted July 10, 2021 Author Share Posted July 10, 2021 thank u with nothing has changed, it doesn't work, it's strange because it should work Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 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 More sharing options...
z3ndra 7 Posted July 10, 2021 Author Share Posted July 10, 2021 sorry, : div.tabContent[data-index="0"] div.itemsContainer[data-parentid="db4c1708cbb5dd1676284a40f2950aba"] .portraitCard Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
z3ndra 7 Posted July 10, 2021 Author Share Posted July 10, 2021 (edited) no : the same Edited July 10, 2021 by z3ndra Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 10, 2021 Share Posted July 10, 2021 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 More sharing options...
z3ndra 7 Posted July 11, 2021 Author Share Posted July 11, 2021 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 11, 2021 Share Posted July 11, 2021 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? Link to comment Share on other sites More sharing options...
z3ndra 7 Posted July 11, 2021 Author Share Posted July 11, 2021 ok I see the browser refuses to apply the properties, how do I do it? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 11, 2021 Share Posted July 11, 2021 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 More sharing options...
z3ndra 7 Posted July 11, 2021 Author Share Posted July 11, 2021 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 More sharing options...
Happy2Play 8296 Posted July 11, 2021 Share Posted July 11, 2021 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 More sharing options...
z3ndra 7 Posted July 11, 2021 Author Share Posted July 11, 2021 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 Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted July 11, 2021 Share Posted July 11, 2021 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 More sharing options...
Happy2Play 8296 Posted July 11, 2021 Share Posted July 11, 2021 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%; } 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