Jump to content

Dashboard SVG replacement icons using custom CSS (simple)


chef

Recommended Posts

chef
15 minutes ago, cochize1 said:

wow, I figued sth like this and it seems to be working:)


body > div.skinHeader.focuscontainer-x.headroom.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon {
    content: '' ;
    visibility: hidden;
    }

div.skinHeader.focuscontainer-x.headroom.skinHeader-withBackground.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon {
    content: '' ;
    visibility: hidden;
    }
    
div.skinHeader.focuscontainer-x.headroom.skinHeader-withBackground.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon:before {
    mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path  d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>");
    -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path  d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>");
    height: var(--iconHeight);
    content:'';
    background-color:var(--iconColor);
    visibility: visible;
    position: absolute;
    display: block;
    width:var(--iconWidth);
	 margin-top: -10px;
    top: var(--iconTop);
    }
	
.videoOsdHeader button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon {
    content: '' ;
    visibility: hidden;
    }
    
.videoOsdHeader button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon:before {
    mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path  d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>");
    -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path  d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>");
    height: var(--iconHeight);
    content:'';
    background-color:var(--iconColor);
    visibility: visible;
    position: absolute;
    display: block;
    width:var(--iconWidth);
	margin-top: -5px;
	margin-left: 5px;
    top: var(--iconTop);
    }

 

Well done! I'm going to add this to mine! Good work!

 

 

 

 

  • Haha 1
Link to post
Share on other sites
cochize1

that Back arrow on login page was bugging me for such a long time and now it's finally gone:) I actually modified that line

div.skinHeader.focuscontainer-x.headroom.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] {
    visibility: hidden;
    }

 

Link to post
Share on other sites
cochize1
58 minutes ago, cochize1 said:

that Back arrow on login page was bugging me for such a long time and now it's finally gone:) I actually modified that line


div.skinHeader.focuscontainer-x.headroom.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] {
    visibility: hidden;
    }

 

it turns out that code makes it hidden in Firefox but not in Chrome from what I have noticed

so if anyone has any suggestions on how to get rid the back arrow on login page pls let me know:)

Link to post
Share on other sites
Happy2Play

Your issue will be you are removing the arrow from more then just that page, ie every library page you are removing the back arrow.  But I guess you still have the Browser back arrow.

But that code remove the back arrow for me in Chrome, Edge, and FF.

  • Like 1
Link to post
Share on other sites
cochize1

You're probably right, maybe cache was keeping it all together in Chrome for some time.

I have just changed the back arrow icon to a little smaller SVG icon now and it doesn't stand out that much, thanks.

Link to post
Share on other sites
chef
16 hours ago, cochize1 said:

it turns out that code makes it hidden in Firefox but not in Chrome from what I have noticed

so if anyone has any suggestions on how to get rid the back arrow on login page pls let me know:)

You could edit the loginPage.html directly... Maybe... 

But be aware that anything you change will be undone when the server updates.

Link to post
Share on other sites
cochize1

i'll just leave it as it is, after changing the icon it looks way better now

and any idea on the other topic from another thread: My Media not being expanded in Firefox in navDrawer?

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...