CSS - Material Icons change

[Happy2Play 8358]

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

[Happy2Play 8358]

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

[BGman 4]

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

[BGman 4]

@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

[Happy2Play 8358]

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

 

[BGman 4]

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!

[Happy2Play 8358]

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.

[BGman 4]

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.

 

[BGman 4]

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

 

[Happy2Play 8358]

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

[BGman 4]

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?

 

[Happy2Play 8358]

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.

[BGman 4]

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.

[Beenzino 2]

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!