How to add Logo and button on the dashboard toolbar

Able to add logo but not able to add button

[
    {
        "id": "9ba6534a6bafbad9",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "166932aeeabf1176",
        "type": "ui_template",
        "z": "9ba6534a6bafbad9",
        "group": "5c3cf7ccc7b8e2f2",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<style>\n    #top-bar-logo {\n        background-image: url('data:image/jpeg;base64,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');\n        background-size: contain;\n        background-repeat: no-repeat;\n        background-position: left;\n        height: 45px;\n        width: 45px;\n        margin: -300px;\n    }\n</style>\n\n<script id=\"logo-script\" type=\"text/javascript\">\n    function 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    \n    $(\"#logout\").remove()\n    var logout = $('<p />').attr(\"id\",\"logout\");\n    logout.innerHTML=\"Logout\";\n    logo.append(logout);\n}\n\nfunction checkExistence(){\n    console.log($(\"#top-bar-logo\"))\n    if($(\"#top-bar-logo\").length > 0){\n        return\n    }\n    console.log($(\"#logout\"))\n    if($(\"#logout\").length > 0){\n        return\n    }\n    \n    build()\n    setTimeout(checkExistence,1000)\n}\n\nsetTimeout(function(){\nbuild();\n},1000);\nsetTimeout(checkExistence,1000)\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 640,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "5c3cf7ccc7b8e2f2",
        "type": "ui_group",
        "name": "Default",
        "tab": "7bf900b53f701c62",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "7bf900b53f701c62",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

Sorry to sound a bit harsh but this is a common request and has been answered many times.

Did you do any research ?

I just tried searching the forum for "button dashboard toolbar" and found 50+ results!

You could also try "button on head" or "button on topbar"

Hint: you could also look at my post from 2 years ago about this topic :wink:

https://discourse.nodered.org/t/help-with-header-code/41835

when using the function or modifying to get the desired out come the button and logo is moving out of the screen

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