# One CSS for multiple Dashboard instances

**URL:** https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673
**Category:** Dashboard
**Created:** [3 May 2024 07:18 UTC](https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673 "2024-05-03T07:18:38Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)
#### Post date: [3 May 2024 07:18 UTC](https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673/1 "2024-05-03T07:18:38Z")

</div>

Hi,

We're running multiple NodeRED instances (under FlowFuse), each running its own Dashboard 2 configuration.  
Would it be possible to have one central ui-template node where all other Dashboard 2 sites get their CSS main from?

Thanks!

---

<div class="post-metadata">

### Author: ![homeplayer](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/homeplayer/32/12388_2.png) [@homeplayer](https://discourse.nodered.org/u/homeplayer)
#### Post date: [3 May 2024 07:33 UTC](https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673/2 "2024-05-03T07:33:58Z")

</div>

To achieve this, you can follow these steps:

1. **Host CSS centrally** : Host your main CSS file in a location accessible to all Node-RED instances. This could be a web server or a shared network location.
2. **Modify ui-template nodes** : In each Dashboard 2 configuration's ui-template node, reference the centrally hosted CSS file using a `<link>` tag in the `<head>` section of the template.

For example, your ui-template node template might look like this:

html

```auto
<head>
    <link rel="stylesheet" type="text/css" href="http://central-location.com/main.css">
</head>

```

Replace `"http://central-location.com/main.css"` with the actual URL where your CSS file is hosted.

1. **Ensure accessibility** : Make sure that the Node-RED instances have network access to the location hosting the CSS file. Adjust firewall settings if necessary.

Or;

1. Set the CSS content using `global.set`:

```auto
global.set('cssContent', '/* Your CSS content here */');

```

1. In your ui-template node, use `<style>` tags to include the CSS content:

html

Copy code

```auto
<head>
    <style>
        {{global.get('cssContent')}}
    </style>
</head>

```

---

<div class="post-metadata">

### Author: ![SynoUser-NL](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/synouser-nl/32/85195_2.png) [@SynoUser-NL](https://discourse.nodered.org/u/SynoUser-NL)
#### Post date: [3 May 2024 09:25 UTC](https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673/3 "2024-05-03T09:25:42Z")

</div>

Ah yes.. of course! Solution 2 is perfect for me.  
My train of thought about this was all wrong. Simple is best.

Thank you!

---

<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: [17 May 2024 09:26 UTC](https://discourse.nodered.org/t/one-css-for-multiple-dashboard-instances/87673/4 "2024-05-17T09:26:08Z")

</div>

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