# Dashboard CSS - custom and blue

**URL:** <https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055>\
**Category:** Dashboard\
**Created:** [5 March 2021 01:23 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055 "2021-03-05T01:23:52Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 April 2021 18:52 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/21 "2021-04-09T18:52:41Z")

</div>

Not very popular [Neumorphism](https://css-tricks.com/neumorphism-and-css/) is kind of challenge. Tried a bit but the structure of dashboard fights back pretty hard and I'm not that good at the art also to make it pretty.  
But if somebody likes it and wants to play with it or grab some ideas, I leave the files.

[light-white-theme.txt](https://discourse.nodered.org/uploads/short-url/pQuD1BaZdQrSx8ZyG42CT5gcqJ1.txt) (976 Bytes)  
[light-white-css.txt](https://discourse.nodered.org/uploads/short-url/t2LFor5LQDuOsdNWAlQOM0ltfT5.txt) (5.9 KB)

Theme file goes to `.node-red\lib\themes` folder and you can load it as custom theme from dashboard theme tab.  
CSS file has instructions inside.

Result is something like this.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/818f76fbb22dd633103bc41b7f49a17999492525.jpeg)

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [20 April 2021 08:33 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/22 "2021-04-20T08:33:33Z")

</div>

I put the files in ".node-red / lib / themes" and changed the extension of "light-white-css.txt" to .css.  
I miss something?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 April 2021 08:38 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/23 "2021-04-20T08:38:10Z")

</div>

Theme file **only** goes to `.node-red\lib\themes`  
The css can be provided via ui\_template node even by including the script or paste the content inside style tags

```auto
<style>
place css rules here
</style>

```

And the ui\_template should then be configured to site head  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0ee68150a697eec6492761fcecf8f3a5515dcc07.png)

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [20 April 2021 08:45 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/24 "2021-04-20T08:45:23Z")

</div>

Ok, thanks for your patience, but the theme shouldn't be displayed anywhere in the editor?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [20 April 2021 08:48 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/25 "2021-04-20T08:48:25Z")

</div>

The custom theme applies if you configure it to be used.  
Press the button and see -\> the custom theme file should be available.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df40f11fa234b2bff4ad5664e9573a353c122f09.png)

---

<div class="post-metadata">

**Author:** ![Giu-seppe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/giu-seppe/32/40489_2.png) [@Giu-seppe](https://discourse.nodered.org/u/Giu-seppe)\
**Post date:** [20 April 2021 08:58 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/26 "2021-04-20T08:58:47Z")

</div>

thanks, now everything works

---

<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:** [20 May 2021 08:59 UTC](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055/27 "2021-05-20T08:59:05Z")

</div>

Closed on 20 May 2021 08:59 UTC

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

[Previous page](https://discourse.nodered.org/t/dashboard-css-custom-and-blue/42055.md?page=1)