cochize1 39 Posted October 10, 2020 Share Posted October 10, 2020 So, I have changed count indicator to more square with this code div.countIndicator, div.playedIndicator { transform: square; border-radius: 20%; background-color: #52B54B; border-style: double; border-color: #52B54B; border-width: 1px; height: 18px; width: 23px; } How can I do the same with watched indicator with that tick because it stays round as default? Link to comment Share on other sites More sharing options...
Solution Happy2Play 8139 Posted October 10, 2020 Solution Share Posted October 10, 2020 (edited) 16 minutes ago, cochize1 said: How can I do the same with watched indicator with that tick because it stays round as default? i.cardPlayedIndicator actually just change div.playedIndicator to i.playedIndicator Edited October 10, 2020 by Happy2Play 1 Link to comment Share on other sites More sharing options...
cochize1 39 Posted October 10, 2020 Author Share Posted October 10, 2020 If I may ask, can you please teach me on how to target the exact piece of code, I mean, I kinda know how to inspect the code and 'copy' the selector but it just directs the exact path, i.e: I have changed the Play button color and trailers color with this: body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnResume.detailButton.detailButton-hidemobile.emby-button > div > i {color: #52b54b!important;} body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnPlayTrailer.detailButton.emby-button > div > i{color: #3396FF!important;} {color: #3396FF !important;} But how do you trim it just to get the right part so that it works? Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted October 10, 2020 Share Posted October 10, 2020 the better way is to look at what H2P has posted then go back to the code and see where he has targeted and then experiment with small changes and see what happens - most of the time if you get it wrong the browser ignores it. i dont copy the selector as you get what you have above - but follow the div trail down to the item i want to change then target it with the lowest level class name i can find .classname .element {} etc or .classname, .classname etc etc Also some of what you are doing already exists in several css thread so you can search for it and modify it if not to your liking It would be nice to have one thread just listing css tweaks - but it would have to be closely maintained as Luke cant keep things the same and keeps changing stuff just to make our life difficult for no real benefit. css can be finiky to get right - i dont do it enough so have a hunt and peck approach that gets me there in the end i think you need to get santa to give you a css book for xmas 1 Link to comment Share on other sites More sharing options...
cochize1 39 Posted October 10, 2020 Author Share Posted October 10, 2020 2 minutes ago, PenkethBoy said: i think you need to get santa to give you a css book for xmas I am afraid it's gonna be another pair of socks as every year, Thanks for the tips. Link to comment Share on other sites More sharing options...
Happy2Play 8139 Posted October 10, 2020 Share Posted October 10, 2020 3 minutes ago, cochize1 said: If I may ask, can you please teach me on how to target the exact piece of code, I mean, I kinda know how to inspect the code and 'copy' the selector but it just directs the exact path, i.e: I have changed the Play button color and trailers color with this: body > div.mainAnimatedPages.skinBody > div:nth-child(1) > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnResume.detailButton.detailButton-hidemobile.emby-button > div > i {color: #52b54b!important;} body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.flex-grow > div.detailButtons.mainDetailButtons.flex.align-items-flex-start.flex-wrap-wrap.focuscontainer-x.detailButtons-largefont > button.btnPlayTrailer.detailButton.emby-button > div > i{color: #3396FF!important;} {color: #3396FF !important;} But how do you trim it just to get the right part so that it works? It really depends on how much targeting is needed if you only want that specific location or everywhere that element appears. See some options to get same results div.detailMainContainer div.mainDetailButtons button.btnResume i {color: #52b54b;} div.detailMainContainer button.btnResume i {color: #52b54b;} div.mainDetailButtons button.btnResume i {color: #52b54b;} button.btnResume i {color: #52b54b;} div.detailMainContainer div.mainDetailButtons button.btnPlayTrailer i {color: #3396FF;} div.detailMainContainer button.btnPlayTrailer i {color: #3396FF;} div.mainDetailButtons button.btnPlayTrailer i {color: #3396FF;} button.btnPlayTrailer i {color: #3396FF;} Or all the buttons in that location instead of targeted ones div.mainDetailButtons button i 1 Link to comment Share on other sites More sharing options...
cochize1 39 Posted October 10, 2020 Author Share Posted October 10, 2020 you are like Siri or Alexa for css, thank you 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