Happy2Play 8358 Posted September 27, 2022 Share Posted September 27, 2022 (edited) A site like this will help seeing name or code MATERIAL ICONS SEARCH (underground.github.io) [data-type="home"] [data-id="941665aa869a89d119dca0e32e6fd824"] button i { visibility:hidden; content: ''; } [data-type="home"] [data-id="941665aa869a89d119dca0e32e6fd824"] button i:before { visibility: visible; position: absolute; content: "new_releases"; color: red; } Adjust other code accordingly Edited September 27, 2022 by Happy2Play 1 Link to comment Share on other sites More sharing options...
Happy2Play 8358 Posted September 27, 2022 Share Posted September 27, 2022 Note this will change Normal My Media icons also for items that do not have images. I know this is about icons but here is replace normal My Media image with icon. [data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button.cardImageContainer img { display: none; } [data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button.cardImageContainer:before { position: absolute; content: "sports_football"; color: red; font-family: 'Material Icons Round'; font-size: 4em; } 1 Link to comment Share on other sites More sharing options...
BGman 4 Posted September 27, 2022 Author Share Posted September 27, 2022 3 hours ago, Happy2Play said: Finally internet is back up. @BGman Not sure what you are calling backend/frontend. CSS or edit server files only affects the local web client and has no affect on the online app or any other client. So only browser connections directly via WANIP or DDNS address. Easiest route here is script editing the js with every update, but this affects all icon not just one. From the browser console it can be impossible to see the code for the icon in some cases as the hex code does not appear as you have seen. <i class="navDrawerListItemIcon listItemIcon md-icon autortl"></i> You can target [data-id=xxxxxxxxxxxxx] which is parentid for Home Screen items. So if you have 5 libraries with this icon you can target 5 libraries with css differently. Library example you need your library parentid [data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button i { visibility:hidden; content: ''; } [data-type="home"] [data-id="f1ffda17fff72a19997ec7e667bb8d3c"] button i:before { visibility: visible; position: absolute; content:"\EA29"; } But navdrawer is a little more difficult as you have two navdrawers using relatively the same code (Dashboard and everywhere else), so editing the third library on Home nav edits Playback on Dashboard nav. Navdrawer example body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; content:"\EA29"; } But you can sort of work around it if you do not dock navdrawer adding a :not(). body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open:not(.drawer-docked) > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; content:"\EA29"; } This will change a little in 4.8+ with the changes to the navdrawer options. Wowzer.. @Happy2Play this works EXCELLENTLY! Yea @chef you were on to it you were def in the right place.. Link to comment Share on other sites More sharing options...
BGman 4 Posted September 29, 2022 Author Share Posted September 29, 2022 (edited) @Happy2Play This is the code you gave me from above: body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ""; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; color:red !important; content:"\EA29"; } This works when used exactly as is... BUT when I change div:nth-child(3) to div:nth-child(8) it doesn't work.. in fact when I change it to anything other than "3" it doesn't work. Yes I change all 4 occurrences. Latest emby premiere version. Also, from your experience what exactly needs to be done to refresh the custom css box?? Already cleared browser cache, hard refresh.. start/stopped emby server, etc. The custom code is in branding.xml just fine.. local install changes are made but in live linux server any changes WILL NOT show. Any clues on forcing custom css on linux server? Edited September 29, 2022 by BGman Link to comment Share on other sites More sharing options...
Happy2Play 8358 Posted September 29, 2022 Share Posted September 29, 2022 3 hours ago, BGman said: This works when used exactly as is... BUT when I change div:nth-child(3) to div:nth-child(8) it doesn't work.. in fact when I change it to anything other than "3" it doesn't work. Yes I change all 4 occurrences. Latest emby premiere version. There are two so which one did you change? body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i 3 hours ago, BGman said: Also, from your experience what exactly needs to be done to refresh the custom css box?? Normally just a refresh for css. But not a Linux user. Are you copy and pasting code as there is a user that had issues of invalid characterss being entered with copy and paste. https://emby.media/community/index.php?/topic/85922-about-the-search-page-embyserver-4420/&do=findComment&comment=1165602 Link to comment Share on other sites More sharing options...
BGman 4 Posted September 29, 2022 Author Share Posted September 29, 2022 2 hours ago, Happy2Play said: There are two so which one did you change? body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i Normally just a refresh for css. But not a Linux user. Are you copy and pasting code as there is a user that had issues of invalid characterss being entered with copy and paste. https://emby.media/community/index.php?/topic/85922-about-the-search-page-embyserver-4420/&do=findComment&comment=1165602 There is no issue with my copy/paste. I even put the code directly in via branding.xml. I have just in the last few mins found this page from 2019!: http://app.emby.media/#!/dashboard.html changed to: http://xx.xx.xx:8096/web/index.html#!/dashboard.html And now the css changes are showing! BUT using your code, I still cant get icon changed div:nth-child(3) to any other child! Link to comment Share on other sites More sharing options...
Happy2Play 8358 Posted September 29, 2022 Share Posted September 29, 2022 13 minutes ago, BGman said: There is no issue with my copy/paste. I even put the code directly in via branding.xml. I have just in the last few mins found this page from 2019!: http://app.emby.media/#!/dashboard.html changed to: http://xx.xx.xx:8096/web/index.html#!/dashboard.html And now the css changes are showing! BUT using your code, I still cant get icon changed div:nth-child(3) to any other child! Yes as no changes apply to the online client or any other client as mentioned previously. But will need to see your code as the code I posted works on 3rd section 8th child. The original code is 3rd section 3rd child. Link to comment Share on other sites More sharing options...
BGman 4 Posted September 29, 2022 Author Share Posted September 29, 2022 7 minutes ago, Happy2Play said: the code I posted works on 3rd section 8th child. The original code is 3rd section 3rd child. I'm totally confused.. your saying 2 different things in the same sentence.. you said, the code you posted works on 3rd section 8th child? and then you say The original code is 3rd section 3rd child. Link to comment Share on other sites More sharing options...
BGman 4 Posted September 29, 2022 Author Share Posted September 29, 2022 @Happy2Play This is the code that works.. but only for 3rd child.. but if I change it to any other child it doesn't work. body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(3) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; color:red !important; content:"\EA29"; } Link to comment Share on other sites More sharing options...
Happy2Play 8358 Posted September 29, 2022 Share Posted September 29, 2022 (edited) 16 minutes ago, BGman said: I'm totally confused.. your saying 2 different things in the same sentence.. you said, the code you posted works on 3rd section 8th child? and then you say The original code is 3rd section 3rd child. Did you look at the code first code has div:nth-child(3) > div > div:nth-child(3) recent posted code has div:nth-child(3) > div > div:nth-child(8) So this works on 8th child in 3rd section ie first 3rd child. body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; color: red; content:"new_releases"; } Edited September 29, 2022 by Happy2Play 1 1 Link to comment Share on other sites More sharing options...
BGman 4 Posted September 29, 2022 Author Share Posted September 29, 2022 18 minutes ago, Happy2Play said: So this works on 8th child in 3rd section ie first 3rd child. body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; color: red; content:"new_releases"; } Ok, got it.. this works perfectly! Now if I could worry you about one last thing in regards to this. When I visit Home via browser: http://XX.XX.XX:8096/web/index.html#!/home The CSS changes work perfectly. But when I visit Home via browser: http://app.emby.media/#!/home The CSS changes do not work. I understand that this css styling is in the custom css box.. which is in branding.xml. Is this why it doesn't show in app.emby.media? Is there a way to get this css into app.emby.media? Link to comment Share on other sites More sharing options...
Happy2Play 8358 Posted September 29, 2022 Share Posted September 29, 2022 2 minutes ago, BGman said: But when I visit Home via browser: http://app.emby.media/#!/home The CSS changes do not work. I understand that this css styling is in the custom css box.. which is in branding.xml. Is this why it doesn't show in app.emby.media? Is there a way to get this css into app.emby.media? It will not work as you are using an online client and not your server client but are proxied to your server. As you can see the online client is a different version number also. So only direct connections to your server will work ie WANIP:port or DDNS:port. 1 Link to comment Share on other sites More sharing options...
BGman 4 Posted September 30, 2022 Author Share Posted September 30, 2022 8 hours ago, Happy2Play said: It will not work as you are using an online client and not your server client but are proxied to your server. As you can see the online client is a different version number also. So only direct connections to your server will work ie WANIP:port or DDNS:port. Thanks for explaining! I fully understand now. Link to comment Share on other sites More sharing options...
Beenzino 2 Posted October 24, 2023 Share Posted October 24, 2023 On 9/29/2022 at 9:26 PM, Happy2Play said: Did you look at the code first code has div:nth-child(3) > div > div:nth-child(3) recent posted code has div:nth-child(3) > div > div:nth-child(8) So this works on 8th child in 3rd section ie first 3rd child. body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i { visibility:hidden; content: ''; } body > div.mainDrawer.focuscontainer-y.emby-scroller.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-open > div > div:nth-child(3) > div > div:nth-child(8) > div > div.navDrawerListItemImageContainer.listItemImageContainer.itemAction.listItemImageContainer-square.defaultCardBackground.defaultCardBackground0 > i:before { visibility: visible; position: absolute; color: red; content:"new_releases"; } Hi sorry for digging this up. Does this still work in the current version of Emby web app? I'm trying to change the icons shown on the pinned sidebar. I tried this code but it didn't work. Thank! 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