Color of logo gets inverted

General
1

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?

[
    {
        "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

2

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

3

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:

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

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