Beenzino 2 Posted October 24, 2023 Share Posted October 24, 2023 Hi all, I am trying to change the icons on the sidebar, since I've got several movies and tv shows library and customising their icons would help in terms of identification and aesthetics. I found this with inspect elements, and found out that changing that highlighted box into the desired name of icon (e.g. New_releases) works, the question now is how do I write a custom CSS code for this. I've read through this post and the generous solution written by @Happy2Play, but I don't think it works anymore. I know nothing about coding, I tried adapting the codes in that post into something like this, which did not work (wasn't expecting it to work since I'm terrible at coding): body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(1) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i { content: "new_releases"; } Thanks all. Link to comment Share on other sites More sharing options...
Luke 37067 Posted October 24, 2023 Share Posted October 24, 2023 Hi, what are you trying to change? Link to comment Share on other sites More sharing options...
Beenzino 2 Posted October 24, 2023 Author Share Posted October 24, 2023 15 minutes ago, Luke said: Hi, what are you trying to change? Hello, just the icons on the sidebar. Basically what was done in the post I referenced, but I don't think that solution works anymore. Link to comment Share on other sites More sharing options...
Solution Beenzino 2 Posted October 27, 2023 Author Solution Share Posted October 27, 2023 *Update: @LukeHi, found a solution. I copied the JS path I found in inspect elements, pasted it in ChatGPT, asked it to write a custom css code to modify this element and change it to a material icon, it gave me this: body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(5) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i.navDrawerListItemIcon.listItemIcon.md-icon.autortl { visibility: hidden; content: ""; } body > div.mainDrawer.focuscontainer-y.padded-bottom-page.emby-scroller.scrollY.scrollFrameY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open.mainDrawer-mini > div > div:nth-child(3) > div > button:nth-child(5) > div > div.navDrawerListItemImageContainer.listItemImageContainer.listItemImageContainer-backdrop > i.navDrawerListItemIcon.listItemIcon.md-icon.autortl::before { visibility: visible; position: absolute; font-family: 'Material Icons Round'; content: "flutter_dash"; } Worked (very similar to the solution @Happy2Playposted, but pathing is a bit different, probably why it didn't work when I tried). Damn technology has advanced. Extra query: Emby does have the materials icon font locally, though some icons I'd like is in the newer materials symbol font pack. I tried: @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'); Didn't work, checked Networks tab in inspect, font didn't load. Tried the same @import with another text font, worked and imported. I wonder why is that, probably a licensing issue? But either way I''m happy with what I have right now as well. Sharing my experience here if it helps anyone. 1 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