[{"data":1,"prerenderedAt":1262},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F08\u002Fcustomise-theming-in-your-dashboards":3},{"id":4,"title":5,"body":6,"description":12,"extension":1252,"meta":1253,"navigation":285,"path":1258,"seo":1259,"stem":1260,"__hash__":1261},"blog\u002Fblog\u002F2024\u002F08\u002Fcustomise-theming-in-your-dashboards.md","Customise theming in your FlowFuse Dashboard",{"type":7,"value":8,"toc":1238},"minimark",[9,13,16,19,24,40,45,52,64,69,72,75,85,94,107,111,155,398,407,416,420,430,453,487,500,509,513,520,529,533,542,563,578,965,975,979,988,992,1004,1044,1048,1058,1084,1088,1091,1094,1100,1106,1111,1120,1123,1127,1130,1139,1143,1146,1155,1159,1162,1171,1175,1178,1181,1189,1198,1206,1215,1220,1228,1232,1235],[10,11,12],"p",{},"A recent release of FlowFuse Dashboard (Dashboard 2.0) has taken customization to the next level.",[10,14,15],{},"Previously, users enjoyed the flexibility of tweaking navigation sidebars, themes, and group and page padding. With the new update, you can fully personalize the header too, adding unique elements to enhance your dashboard experience and customize your application to your own branding.",[10,17,18],{},"In this article, we'll delve into these exciting new features, including theme adjustments, custom styling, and layout modifications, that empower you to tailor your Node-RED Dashboard like never before.",[20,21,23],"h2",{"id":22},"adding-elements-in-the-header","Adding Elements in the Header",[10,25,26,27,34,35,39],{},"To add elements to the header, we can use ",[28,29,33],"a",{"href":30,"rel":31},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-template.html#teleports",[32],"nofollow","Teleports"," within the ",[36,37,38],"code",{},"ui-template"," node. This allows elements to be seamlessly rendered in specific areas of the dashboard. This method simplifies the process compared to manually positioning items with CSS, which can be complex, time-consuming, and potentially disruptive to other dashboard elements.",[41,42,44],"h3",{"id":43},"left-side-of-the-header","Left Side of the Header",[10,46,47,48,51],{},"To render content on the left side of the header, we can teleport content into the ",[36,49,50],{},"#app-bar-title"," element, where our page name is displayed.",[10,53,54,61],{},[55,56],"img",{"alt":57,"dataZoomable":58,"src":59,"title":60},"\"Screenshot of Dashboard showing the #app-bar-title container\"","","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fleft-side-area.png","Image of Dashboard showing the #app-bar-title container",[62,63,60],"em",{},[65,66,68],"h4",{"id":67},"hiding-the-page-name-in-the-header","Hiding the Page Name in the Header",[10,70,71],{},"Before proceeding, you should hide the page name on the left side of the header by default. This will ensure that when you add elements to the header, they do not clash with the page name.",[10,73,74],{},"To hide the page name:",[76,77,78,82],"ol",{},[79,80,81],"li",{},"Go to the FlowFuse Dashboard sidebar",[79,83,84],{},"Click on to the \"Edit settings\" option located at the top of the FlowFuse Dashboard sidebar.",[10,86,87,92],{},[55,88],{"alt":89,"dataZoomable":58,"src":90,"title":91},"\"Screenshot showing the 'edit setting' option in the dashboard sidebar\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fedit-setting-button.png","Screenshot showing the 'edit setting' option in the dashboard sidebar",[62,93,91],{},[76,95,97],{"start":96},3,[79,98,99,100,105],{},"Untick the option \"Show page name in the header bar\".\n",[55,101],{"alt":102,"dataZoomable":58,"src":103,"title":104},"\"Screenshot showing the 'Show page name in the header bar' option in the dashboard settings\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fsettings.png","Screenshot showing the 'Show page name in the header bar' option in the dashboard settings",[62,106,104],{},[65,108,110],{"id":109},"example-adding-buttons","Example: Adding Buttons",[76,112,113,119,140,149],{},[79,114,115,116,118],{},"Drag a ",[36,117,38],{}," node onto the Node-RED Editor canvas.",[79,120,121,122,125,126,129,130,132,133,136,137,139],{},"Double-click on it and select the scope to either ",[36,123,124],{},"ui-scope"," or ",[36,127,128],{},"page-scope",". Selecting ",[36,131,124],{}," will render this content on ",[62,134,135],{},"all"," pages. ",[36,138,128],{}," will just render to a specified page.",[79,141,142,143,145,146,148],{},"Choose the page on which you want to render the buttons if you selected ",[36,144,128],{},", or choose correct ui if ",[36,147,124],{}," is selected.",[79,150,151,152,154],{},"Paste the following Vue snippet into the template widget. In this snippet, note how we specify the \"to\" attribute targeting the ",[36,153,50],{}," ID in the teleport tag:",[156,157,161],"pre",{"className":158,"code":159,"language":160,"meta":58,"style":58},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n    \u003C!-- Teleport the button to the #app-bar-actions area when mounted -->\n    \u003CTeleport v-if=\"mounted\" to=\"#app-bar-title\">\n        \u003Cv-btn>Button 1\u003C\u002Fv-btn>\n        \u003Cv-btn>Button 2\u003C\u002Fv-btn>\n        \u003Cv-btn>Button 3\u003C\u002Fv-btn>\n    \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        data() {\n            return {\n                mounted: false\n            }\n        },\n        mounted() {\n            \u002F\u002F Set mounted to true when the component is mounted\n            this.mounted = true\n        }\n    }\n\u003C\u002Fscript>\n","html",[36,162,163,179,186,216,232,246,260,270,280,287,297,310,319,327,337,343,349,357,363,377,383,389],{"__ignoreMap":58},[164,165,168,172,176],"span",{"class":166,"line":167},"line",1,[164,169,171],{"class":170},"sVt8B","\u003C",[164,173,175],{"class":174},"s9eBZ","template",[164,177,178],{"class":170},">\n",[164,180,182],{"class":166,"line":181},2,[164,183,185],{"class":184},"sJ8bj","    \u003C!-- Teleport the button to the #app-bar-actions area when mounted -->\n",[164,187,188,191,195,199,202,206,209,211,214],{"class":166,"line":96},[164,189,190],{"class":170},"    \u003C",[164,192,194],{"class":193},"s7hpK","Teleport",[164,196,198],{"class":197},"sScJk"," v-if",[164,200,201],{"class":170},"=",[164,203,205],{"class":204},"sZZnC","\"mounted\"",[164,207,208],{"class":197}," to",[164,210,201],{"class":170},[164,212,213],{"class":204},"\"#app-bar-title\"",[164,215,178],{"class":170},[164,217,219,222,225,228,230],{"class":166,"line":218},4,[164,220,221],{"class":170},"        \u003C",[164,223,224],{"class":174},"v-btn",[164,226,227],{"class":170},">Button 1\u003C\u002F",[164,229,224],{"class":174},[164,231,178],{"class":170},[164,233,235,237,239,242,244],{"class":166,"line":234},5,[164,236,221],{"class":170},[164,238,224],{"class":174},[164,240,241],{"class":170},">Button 2\u003C\u002F",[164,243,224],{"class":174},[164,245,178],{"class":170},[164,247,249,251,253,256,258],{"class":166,"line":248},6,[164,250,221],{"class":170},[164,252,224],{"class":174},[164,254,255],{"class":170},">Button 3\u003C\u002F",[164,257,224],{"class":174},[164,259,178],{"class":170},[164,261,263,266,268],{"class":166,"line":262},7,[164,264,265],{"class":170},"    \u003C\u002F",[164,267,194],{"class":193},[164,269,178],{"class":170},[164,271,273,276,278],{"class":166,"line":272},8,[164,274,275],{"class":170},"\u003C\u002F",[164,277,175],{"class":174},[164,279,178],{"class":170},[164,281,283],{"class":166,"line":282},9,[164,284,286],{"emptyLinePlaceholder":285},true,"\n",[164,288,290,292,295],{"class":166,"line":289},10,[164,291,171],{"class":170},[164,293,294],{"class":174},"script",[164,296,178],{"class":170},[164,298,300,304,307],{"class":166,"line":299},11,[164,301,303],{"class":302},"szBVR","    export",[164,305,306],{"class":302}," default",[164,308,309],{"class":170}," {\n",[164,311,313,316],{"class":166,"line":312},12,[164,314,315],{"class":197},"        data",[164,317,318],{"class":170},"() {\n",[164,320,322,325],{"class":166,"line":321},13,[164,323,324],{"class":302},"            return",[164,326,309],{"class":170},[164,328,330,333],{"class":166,"line":329},14,[164,331,332],{"class":170},"                mounted: ",[164,334,336],{"class":335},"sj4cs","false\n",[164,338,340],{"class":166,"line":339},15,[164,341,342],{"class":170},"            }\n",[164,344,346],{"class":166,"line":345},16,[164,347,348],{"class":170},"        },\n",[164,350,352,355],{"class":166,"line":351},17,[164,353,354],{"class":197},"        mounted",[164,356,318],{"class":170},[164,358,360],{"class":166,"line":359},18,[164,361,362],{"class":184},"            \u002F\u002F Set mounted to true when the component is mounted\n",[164,364,366,369,372,374],{"class":166,"line":365},19,[164,367,368],{"class":335},"            this",[164,370,371],{"class":170},".mounted ",[164,373,201],{"class":302},[164,375,376],{"class":335}," true\n",[164,378,380],{"class":166,"line":379},20,[164,381,382],{"class":170},"        }\n",[164,384,386],{"class":166,"line":385},21,[164,387,388],{"class":170},"    }\n",[164,390,392,394,396],{"class":166,"line":391},22,[164,393,275],{"class":170},[164,395,294],{"class":174},[164,397,178],{"class":170},[76,399,400],{"start":234},[79,401,402,403,406],{},"Next, you can customize further by adding more buttons or different elements inside the ",[36,404,405],{},"\u003CTeleport>"," element.",[10,408,409,414],{},[55,410],{"alt":411,"dataZoomable":58,"src":412,"title":413},"\"Screenshot of Dashboard showing the added buttons in the header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fbutton-added-dashboard.png","Screenshot of Dashboard showing the added buttons in the header",[62,415,413],{},[65,417,419],{"id":418},"example-adding-logo","Example: Adding Logo",[10,421,422,423],{},"If you want to add your brand's logo, you can replace the element inside ",[424,425,426,427,429],"teleport",{}," with an ",[55,428],{}," tag. You can do this in the same ui-template widget or in a different ui-template widget:",[76,431,432,438,441,444],{},[79,433,434,435,437],{},"Drag the ",[36,436,38],{}," node onto the canvas.",[79,439,440],{},"Select the correct scope for that widget to render.",[79,442,443],{},"Select the correct page or UI in which you want to render the element.",[79,445,446,447,449,450],{},"Paste the same Vue snippet given in the above section into the ",[36,448,38],{}," widget and replace the code inside ",[424,451,452],{}," with the following element:",[156,454,456],{"className":158,"code":455,"language":160,"meta":58,"style":58},"\u003Cimg height=\"32px\" src=\"https:\u002F\u002Fapp.flowfuse.com\u002Fff-logo--wordmark-caps--dark.png\">\u003C\u002Fimg>\n",[36,457,458],{"__ignoreMap":58},[164,459,460,462,464,467,469,472,475,477,480,483,485],{"class":166,"line":167},[164,461,171],{"class":170},[164,463,55],{"class":174},[164,465,466],{"class":197}," height",[164,468,201],{"class":170},[164,470,471],{"class":204},"\"32px\"",[164,473,474],{"class":197}," src",[164,476,201],{"class":170},[164,478,479],{"class":204},"\"https:\u002F\u002Fapp.flowfuse.com\u002Fff-logo--wordmark-caps--dark.png\"",[164,481,482],{"class":170},">\u003C\u002F",[164,484,55],{"class":193},[164,486,178],{"class":170},[10,488,489,490,493,494,499],{},"You can replace the URL with your logo's URL or set it using the ",[36,491,492],{},"msg.payload"," as shown in examples given ",[28,495,498],{"href":496,"rel":497},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-template.html#page-name-app-bar-title",[32],"documentation",".",[10,501,502,507],{},[55,503],{"alt":504,"dataZoomable":58,"src":505,"title":506},"\"Screenshot of the Dashboard displaying the added logo in the header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Flogo-added-dashboard.png","Screenshot of the Dashboard displaying the added logo in the header",[62,508,506],{},[41,510,512],{"id":511},"right-side-of-the-header","Right Side of the Header",[10,514,515,516,519],{},"To render elements on the right side of the header, you can use the empty div element having the ",[36,517,518],{},"#app-bar-actions"," ID, in which we can add elements.",[10,521,522,527],{},[55,523],{"alt":524,"dataZoomable":58,"src":525,"title":526},"\"Screenshot of Dashboard showing the #app-bar-actions container\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fright-side-area.png","Screenshot of Dashboard showing the #app-bar-actions container",[62,528,526],{},[65,530,532],{"id":531},"example-adding-logged-in-user-profile","Example: Adding logged in user profile",[10,534,535,540],{},[55,536],{"alt":537,"dataZoomable":58,"src":538,"title":539},"\"Screenshot of Dashboard displaying the logged in user profile at the right side of header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fuser-profile.png","Screenshot of Dashboard displaying the logged in user profile at the right side of header",[62,541,539],{},[10,543,544,545,549,550,553,554,559,560,499],{},"In this section, we will add the user profile of the currently logged-in user to the right side of the header. Make sure you have installed \"@flowfuse\u002Fnode-red-dashboard-2-user-addon\" via the palette manager and enabled ",[28,546,548],{"href":547},"\u002Fdocs\u002Fuser\u002Finstance-settings\u002F#flowfuse-user-authentication","FlowFuse User Authentication",". Each message emitted by the FlowFuse Dashboard widget will include the logged-in user information under ",[36,551,552],{},"msg._client.user",". Additionally the ",[28,555,558],{"href":556,"rel":557},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fguides\u002Fstate-management.html#setup-store",[32],"setup object"," will also contain this information under ",[36,561,562],{},"setup.socketio.auth.user",[76,564,565,568,570,572],{},[79,566,567],{},"Drag the ui-template widget onto the canvas.",[79,569,440],{},[79,571,443],{},[79,573,574,575,577],{},"Paste the same Vue snippet given below into the ",[36,576,38],{}," widget:",[156,579,581],{"className":158,"code":580,"language":160,"meta":58,"style":58},"\u003Ctemplate>\n    \u003C!-- Teleporting user info to #app-bar-actions, which is the ID of the action bars' right corners area -->\n    \u003CTeleport v-if=\"loaded\" to=\"#app-bar-actions\">\n        \u003Cdiv class=\"user-info\">\n            \u003C!-- Displaying user image -->\n            \u003Cimg :src=\"setup.socketio.auth.user.image\" \u002F>\n            \u003C!-- Greeting the user -->\n            \u003Cspan>Hi, {{ setup.socketio.auth.user.name }}\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n    data() {\n        return {\n            \u002F\u002F Flag to indicate if the component is loaded\n            loaded: false\n        };\n    },\n    mounted() {\n        \u002F\u002F This function is called when the component is inserted into the DOM.\n        \u002F\u002F Setting loaded to true here ensures the component is ready to access #app-bar-actions,\n        \u002F\u002F as it's now part of the same DOM structure.\n        \u002F\u002F Accessing it before mounted() would cause an error because the component wouldn't be initialized in the DOM yet.\n        this.loaded = true; \u002F\u002F Setting loaded to true to indicate that the component has been mounted successfully\n    }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n\u002F* Styling for user info display *\u002F\n.user-info {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\u002F* Styling for user avatar image*\u002F\n.user-info img {\n    width: 24px;\n    height: 24px;\n}\n\u003C\u002Fstyle>\n",[36,582,583,591,596,618,635,640,658,663,676,685,693,701,705,713,722,729,736,741,748,753,758,765,770,776,782,788,808,813,819,828,833,843,849,857,872,885,901,906,912,922,937,951,956],{"__ignoreMap":58},[164,584,585,587,589],{"class":166,"line":167},[164,586,171],{"class":170},[164,588,175],{"class":174},[164,590,178],{"class":170},[164,592,593],{"class":166,"line":181},[164,594,595],{"class":184},"    \u003C!-- Teleporting user info to #app-bar-actions, which is the ID of the action bars' right corners area -->\n",[164,597,598,600,602,604,606,609,611,613,616],{"class":166,"line":96},[164,599,190],{"class":170},[164,601,194],{"class":193},[164,603,198],{"class":197},[164,605,201],{"class":170},[164,607,608],{"class":204},"\"loaded\"",[164,610,208],{"class":197},[164,612,201],{"class":170},[164,614,615],{"class":204},"\"#app-bar-actions\"",[164,617,178],{"class":170},[164,619,620,622,625,628,630,633],{"class":166,"line":218},[164,621,221],{"class":170},[164,623,624],{"class":174},"div",[164,626,627],{"class":197}," class",[164,629,201],{"class":170},[164,631,632],{"class":204},"\"user-info\"",[164,634,178],{"class":170},[164,636,637],{"class":166,"line":234},[164,638,639],{"class":184},"            \u003C!-- Displaying user image -->\n",[164,641,642,645,647,650,652,655],{"class":166,"line":248},[164,643,644],{"class":170},"            \u003C",[164,646,55],{"class":174},[164,648,649],{"class":197}," :src",[164,651,201],{"class":170},[164,653,654],{"class":204},"\"setup.socketio.auth.user.image\"",[164,656,657],{"class":170}," \u002F>\n",[164,659,660],{"class":166,"line":262},[164,661,662],{"class":184},"            \u003C!-- Greeting the user -->\n",[164,664,665,667,669,672,674],{"class":166,"line":272},[164,666,644],{"class":170},[164,668,164],{"class":174},[164,670,671],{"class":170},">Hi, {{ setup.socketio.auth.user.name }}\u003C\u002F",[164,673,164],{"class":174},[164,675,178],{"class":170},[164,677,678,681,683],{"class":166,"line":282},[164,679,680],{"class":170},"        \u003C\u002F",[164,682,624],{"class":174},[164,684,178],{"class":170},[164,686,687,689,691],{"class":166,"line":289},[164,688,265],{"class":170},[164,690,194],{"class":193},[164,692,178],{"class":170},[164,694,695,697,699],{"class":166,"line":299},[164,696,275],{"class":170},[164,698,175],{"class":174},[164,700,178],{"class":170},[164,702,703],{"class":166,"line":312},[164,704,286],{"emptyLinePlaceholder":285},[164,706,707,709,711],{"class":166,"line":321},[164,708,171],{"class":170},[164,710,294],{"class":174},[164,712,178],{"class":170},[164,714,715,718,720],{"class":166,"line":329},[164,716,717],{"class":302},"export",[164,719,306],{"class":302},[164,721,309],{"class":170},[164,723,724,727],{"class":166,"line":339},[164,725,726],{"class":197},"    data",[164,728,318],{"class":170},[164,730,731,734],{"class":166,"line":345},[164,732,733],{"class":302},"        return",[164,735,309],{"class":170},[164,737,738],{"class":166,"line":351},[164,739,740],{"class":184},"            \u002F\u002F Flag to indicate if the component is loaded\n",[164,742,743,746],{"class":166,"line":359},[164,744,745],{"class":170},"            loaded: ",[164,747,336],{"class":335},[164,749,750],{"class":166,"line":365},[164,751,752],{"class":170},"        };\n",[164,754,755],{"class":166,"line":379},[164,756,757],{"class":170},"    },\n",[164,759,760,763],{"class":166,"line":385},[164,761,762],{"class":197},"    mounted",[164,764,318],{"class":170},[164,766,767],{"class":166,"line":391},[164,768,769],{"class":184},"        \u002F\u002F This function is called when the component is inserted into the DOM.\n",[164,771,773],{"class":166,"line":772},23,[164,774,775],{"class":184},"        \u002F\u002F Setting loaded to true here ensures the component is ready to access #app-bar-actions,\n",[164,777,779],{"class":166,"line":778},24,[164,780,781],{"class":184},"        \u002F\u002F as it's now part of the same DOM structure.\n",[164,783,785],{"class":166,"line":784},25,[164,786,787],{"class":184},"        \u002F\u002F Accessing it before mounted() would cause an error because the component wouldn't be initialized in the DOM yet.\n",[164,789,791,794,797,799,802,805],{"class":166,"line":790},26,[164,792,793],{"class":335},"        this",[164,795,796],{"class":170},".loaded ",[164,798,201],{"class":302},[164,800,801],{"class":335}," true",[164,803,804],{"class":170},"; ",[164,806,807],{"class":184},"\u002F\u002F Setting loaded to true to indicate that the component has been mounted successfully\n",[164,809,811],{"class":166,"line":810},27,[164,812,388],{"class":170},[164,814,816],{"class":166,"line":815},28,[164,817,818],{"class":170},"}\n",[164,820,822,824,826],{"class":166,"line":821},29,[164,823,275],{"class":170},[164,825,294],{"class":174},[164,827,178],{"class":170},[164,829,831],{"class":166,"line":830},30,[164,832,286],{"emptyLinePlaceholder":285},[164,834,836,838,841],{"class":166,"line":835},31,[164,837,171],{"class":170},[164,839,840],{"class":174},"style",[164,842,178],{"class":170},[164,844,846],{"class":166,"line":845},32,[164,847,848],{"class":184},"\u002F* Styling for user info display *\u002F\n",[164,850,852,855],{"class":166,"line":851},33,[164,853,854],{"class":197},".user-info",[164,856,309],{"class":170},[164,858,860,863,866,869],{"class":166,"line":859},34,[164,861,862],{"class":335},"    display",[164,864,865],{"class":170},": ",[164,867,868],{"class":335},"flex",[164,870,871],{"class":170},";\n",[164,873,875,878,880,883],{"class":166,"line":874},35,[164,876,877],{"class":335},"    align-items",[164,879,865],{"class":170},[164,881,882],{"class":335},"center",[164,884,871],{"class":170},[164,886,888,891,893,896,899],{"class":166,"line":887},36,[164,889,890],{"class":335},"    gap",[164,892,865],{"class":170},[164,894,895],{"class":335},"8",[164,897,898],{"class":302},"px",[164,900,871],{"class":170},[164,902,904],{"class":166,"line":903},37,[164,905,818],{"class":170},[164,907,909],{"class":166,"line":908},38,[164,910,911],{"class":184},"\u002F* Styling for user avatar image*\u002F\n",[164,913,915,917,920],{"class":166,"line":914},39,[164,916,854],{"class":197},[164,918,919],{"class":174}," img",[164,921,309],{"class":170},[164,923,925,928,930,933,935],{"class":166,"line":924},40,[164,926,927],{"class":335},"    width",[164,929,865],{"class":170},[164,931,932],{"class":335},"24",[164,934,898],{"class":302},[164,936,871],{"class":170},[164,938,940,943,945,947,949],{"class":166,"line":939},41,[164,941,942],{"class":335},"    height",[164,944,865],{"class":170},[164,946,932],{"class":335},[164,948,898],{"class":302},[164,950,871],{"class":170},[164,952,954],{"class":166,"line":953},42,[164,955,818],{"class":170},[164,957,959,961,963],{"class":166,"line":958},43,[164,960,275],{"class":170},[164,962,840],{"class":174},[164,964,178],{"class":170},[10,966,967,968,972,973,499],{},"For detailed guide on this section, refer to the guide on ",[28,969,971],{"href":970},"\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F","Displaying logged in user on FlowFuse Dashboard",". Furthermore, if you want to add logos or buttons on the right side similar to the left side of the header, you just need to replace the to attribute with the ",[36,974,518],{},[41,976,978],{"id":977},"centering-header-items","Centering Header Items",[10,980,981,982,984,985,987],{},"Sometimes you may want to center or position items added to either the ",[36,983,50],{}," or the ",[36,986,518],{},". By default, these elements do not have a specified width, and when you add items into them, they grow to fit their content. To center the elements, you first need to ensure that they are sized appropriately.",[65,989,991],{"id":990},"centering-items-in-the-left-side-of-the-header","Centering Items in the Left Side of the Header",[10,993,994,995,997,998,1001,1002,577],{},"To center items added to the ",[36,996,50],{},", apply the following CSS in the ",[36,999,1000],{},"\u003Cstyle>"," tag of the ",[36,1003,38],{},[156,1005,1009],{"className":1006,"code":1007,"language":1008,"meta":58,"style":58},"language-css shiki shiki-themes github-light github-dark","#app-bar-title {\n    flex-grow: 1;\n    justify-content: center;\n}\n","css",[36,1010,1011,1017,1029,1040],{"__ignoreMap":58},[164,1012,1013,1015],{"class":166,"line":167},[164,1014,50],{"class":197},[164,1016,309],{"class":170},[164,1018,1019,1022,1024,1027],{"class":166,"line":181},[164,1020,1021],{"class":335},"    flex-grow",[164,1023,865],{"class":170},[164,1025,1026],{"class":335},"1",[164,1028,871],{"class":170},[164,1030,1031,1034,1036,1038],{"class":166,"line":96},[164,1032,1033],{"class":335},"    justify-content",[164,1035,865],{"class":170},[164,1037,882],{"class":335},[164,1039,871],{"class":170},[164,1041,1042],{"class":166,"line":218},[164,1043,818],{"class":170},[65,1045,1047],{"id":1046},"centering-items-in-the-right-side-of-the-header","Centering Items in the Right Side of the Header",[10,1049,1050,1051,1053,1054,1001,1056,577],{},"To center items in the ",[36,1052,518],{}," area, add the following CSS to the ",[36,1055,1000],{},[36,1057,38],{},[156,1059,1061],{"className":1006,"code":1060,"language":1008,"meta":58,"style":58},"#v-toolbar__append {\n    flex-grow: 1;\n}\n",[36,1062,1063,1070,1080],{"__ignoreMap":58},[164,1064,1065,1068],{"class":166,"line":167},[164,1066,1067],{"class":197},"#v-toolbar__append",[164,1069,309],{"class":170},[164,1071,1072,1074,1076,1078],{"class":166,"line":181},[164,1073,1021],{"class":335},[164,1075,865],{"class":170},[164,1077,1026],{"class":335},[164,1079,871],{"class":170},[164,1081,1082],{"class":166,"line":96},[164,1083,818],{"class":170},[20,1085,1087],{"id":1086},"styling-header","Styling Header",[10,1089,1090],{},"One of the significant customization features we've added recently is the ability to style the header in different ways.",[10,1092,1093],{},"To style the header:",[76,1095,1096,1098],{},[79,1097,81],{},[79,1099,84],{},[10,1101,1102,1104],{},[55,1103],{"alt":89,"dataZoomable":58,"src":90,"title":91},[62,1105,91],{},[76,1107,1108],{"start":96},[79,1109,1110],{},"Select the desired option from the \"Header Options\" dropdown.",[10,1112,1113,1118],{},[55,1114],{"alt":1115,"dataZoomable":58,"src":1116,"title":1117},"\"Screenshot showing the header style options in the dashboard settings\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fheader-style-options.png","Screenshot showing the header style options in the dashboard settings",[62,1119,1117],{},[10,1121,1122],{},"The following options are available for header styling:",[41,1124,1126],{"id":1125},"default","Default",[10,1128,1129],{},"This option as it name suggest it is the default option set for header. In which the header will get hidden if we scrolled down.",[10,1131,1132,1137],{},[55,1133],{"alt":1134,"dataZoomable":58,"src":1135,"title":1136},"\"Image showing the dashboard with default header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fdefault-header.gif","Image showing the dashboard with default header",[62,1138,1136],{},[41,1140,1142],{"id":1141},"hidden","Hidden",[10,1144,1145],{},"Selecting this option completely hides the header, allowing you to use that space for other purposes.",[10,1147,1148,1153],{},[55,1149],{"alt":1150,"dataZoomable":58,"src":1151,"title":1152},"\"Image showing the dashboard with hidden header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fhidden-header.png","Image showing the dashboard with hidden header",[62,1154,1152],{},[41,1156,1158],{"id":1157},"fixed","Fixed",[10,1160,1161],{},"Selecting this option keeps the header fixed at the top. This means that when you scroll the page down, the header will remain visible.",[10,1163,1164,1169],{},[55,1165],{"alt":1166,"dataZoomable":58,"src":1167,"title":1168},"\"Image showing the dashboard with fixed header\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Ffixed-header.gif","Image showing the dashboard with fixed header",[62,1170,1168],{},[20,1172,1174],{"id":1173},"changing-dashboard-theme","Changing Dashboard Theme",[10,1176,1177],{},"In this section of the guide, you will learn how to change the Dashboard theme, where you can adjust the colors of the header, navigation sidebar, group and page backgrounds, the border color of groups, and the padding, sizing, and gaps between pages, groups, and widgets.",[10,1179,1180],{},"To edit the existing theme:",[76,1182,1183,1186],{},[79,1184,1185],{},"Go to the FlowFuse Dashboard sidebar.",[79,1187,1188],{},"Switch to the \"Theme\" tab.",[10,1190,1191,1196],{},[55,1192],{"alt":1193,"dataZoomable":58,"src":1194,"title":1195},"\"Screenshot showing the dashboard theme tab in the sidebar\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fdashboard-theme-tab.png","Screenshot showing the dashboard theme tab in the sidebar",[62,1197,1195],{},[76,1199,1200,1203],{"start":96},[79,1201,1202],{},"Click on the edit button next to the theme.",[79,1204,1205],{},"You can adjust the header color and the primary color (which applies to the navigation sidebar and elements like buttons and dropdowns) under the \"Primary\" section. In the \"Pages\" section, set the background color for pages, and in the \"Groups\" section, adjust the background color and border color of groups.",[10,1207,1208,1213],{},[55,1209],{"alt":1210,"dataZoomable":58,"src":1211,"title":1212},"\"Screenshot showing the theme properties dialog\"","\u002Fblog\u002F2024\u002F08\u002Fimages\u002Fdashboard-theme-settings.png","Screenshot showing the theme properties dialog",[62,1214,1212],{},[76,1216,1217],{"start":234},[79,1218,1219],{},"Under \"Sizing,\" adjust the page padding (the space between dashboard groups), the page border, group gap, group border radius (the thickness of the group border), and widget gap.",[10,1221,1222,1223,1227],{},"For more information on  theme, how to add new themes, and set themes for pages, refer to the ",[28,1224,1226],{"href":1225},"\u002Fblog\u002F2024\u002F05\u002Fnode-red-dashboard-2-layout-navigation-styling\u002F#understanding-dashboard-2.0-theme","Comprehensive guide: FlowFuse Dashboard layout, sidebar, and styling",". Additionally, this guide covers FlowFuse Dashboard layouts, themes, and custom styling in detail.",[20,1229,1231],{"id":1230},"conclusion","Conclusion",[10,1233,1234],{},"In this article, we explored FlowFuse Dashboard's new customization features. We focused on adding elements like buttons and logos to the header, and discussed styling options such as default, hidden, and fixed for headers. We also covered how to adjust dashboard themes to personalize colors and layout. These insights empower users to create more personalized and functional Node-RED dashboards.",[840,1236,1237],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":58,"searchDepth":181,"depth":181,"links":1239},[1240,1245,1250,1251],{"id":22,"depth":181,"text":23,"children":1241},[1242,1243,1244],{"id":43,"depth":96,"text":44},{"id":511,"depth":96,"text":512},{"id":977,"depth":96,"text":978},{"id":1086,"depth":181,"text":1087,"children":1246},[1247,1248,1249],{"id":1125,"depth":96,"text":1126},{"id":1141,"depth":96,"text":1142},{"id":1157,"depth":96,"text":1158},{"id":1173,"depth":181,"text":1174},{"id":1230,"depth":181,"text":1231},"md",{"navTitle":5,"excerpt":1254},{"type":7,"value":1255},[1256],[10,1257,12],{},"\u002Fblog\u002F2024\u002F08\u002Fcustomise-theming-in-your-dashboards",{"title":5,"description":12},"blog\u002F2024\u002F08\u002Fcustomise-theming-in-your-dashboards","0vdPeJXkvhBpxIDEFdPLRp37XG2yraA6uzcW9gRJcMI",1780070552059]