# Color of logo gets inverted

**URL:** <https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413>\
**Category:** General\
**Created:** [8 August 2023 17:50 UTC](https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413 "2023-08-08T17:50:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manuel\_o](https://avatars.discourse-cdn.com/v4/letter/m/977dab/32.png) [@Manuel\_o](https://discourse.nodered.org/u/Manuel_o)\
**Post date:** [8 August 2023 17:50 UTC](https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413/1 "2023-08-08T17:50:30Z")

</div>

Hello friends,

I tired this script to get my logo to my dashboard. Unfortunly the colors are inverted afterwards.  
Tried to find something about it in the forum but with no luck. Anyone else experienced this problem?

```auto
[
    {
        "id": "7410f7e42878ab9e",
        "type": "ui_template",
        "z": "a9ed4fd40ab38e2f",
        "group": "3ad2bc4a7ed3c9a3",
        "name": "top-bar logo",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n #top-bar-logo {\n background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Wikipedia-logo-v2.svg);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: right;\n height: 90%;\n width: 90%;\n}\n</style>\n\n<script id=\"logo-script\" type=\"text/javascript\">\nfunction build(){\n $(\"#top-bar-logo\").remove()\n var logo = $('<div />').attr(\"id\",\"top-bar-logo\");\n var topbar = $('.md-toolbar-tools');\n topbar.append(logo)\n}\nfunction checkExistence(){\n console.log($(\"#top-bar-logo\"))\n if($(\"#top-bar-logo\").length > 0){\n return\n }\n build()\n setTimeout(checkExistence,100)\n}\n\nbuild()\nsetTimeout(checkExistence,100)\n</script>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 330,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "3ad2bc4a7ed3c9a3",
        "type": "ui_group",
        "name": "Default",
        "tab": "",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    }
]

```

thank you

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [9 August 2023 00:30 UTC](https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413/2 "2023-08-09T00:30:58Z")

</div>

It looks OK to me, do you have other CSS setup anywhere ?

---

<div class="post-metadata">

**Author:** ![Manuel\_o](https://avatars.discourse-cdn.com/v4/letter/m/977dab/32.png) [@Manuel\_o](https://discourse.nodered.org/u/Manuel_o)\
**Post date:** [10 August 2023 09:23 UTC](https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413/3 "2023-08-10T09:23:24Z")

</div>

thank you for the answer.

strange is, that i use this function at another project with no problems.

Yes i am using indeed a style sheet but can see where the problem could be.  
For reference: I solved it rn with a "trick" . I inverted the color in my css sytle sheet that, so that when it  
gets inverted (which i dont understand) that i see true colors.

Here is my css style:

```auto
<style>

    /*style the groups*/
    #OVERVIEW_Pump_A,#OVERVIEW_Pump_B{
    box-shadow: rgba(0,0,0,40) 0px 5px 10px;
    border-radius: 7px;
    }

    /*Sytling of the group font*/
    .nr-dashboard-cardtitle {
    font-weight: bold !important;
    font-size: 20px !important
    }

    /*Sytling of the group font*/
    .nr-dashboard-cardtitle {
    font-weight: bold !important;
    font-size: 20px !important
    }

    #PUMP_A_CONTROLPANEL {
    box-shadow:rgba(0, 0, 0, 30) 1px 2px 3px;
    border-radius:4px;
    margin-top:68px;
    margin-left:80px;
   
    }

        .nr-dashboard-button button {
        border-radius: 10px !important;
            box-shadow: rgba(255, 164, 228, 30) 1px 2px 3px;
            border-radius: 2px;

        }
    

    #PUMP_A_MONITOR {
        width:300px;
    }

    body.nr-dashboard-theme md-toolbar .md-toolbar-tools {
    color: #a1a1a1;
    font-weight: bold;
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 October 2023 09:23 UTC](https://discourse.nodered.org/t/color-of-logo-gets-inverted/80413/4 "2023-10-09T09:23:43Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.