Hey everyone, I wanted to share a fun project I’ve been working on to customize my smart home dashboard. I’ve been using Node-Red for a while now, and I decided to take my setup to the next level by creating a custom CSS theme. It’s been a great way to personalize my interface and make it more visually appealing!
I started with the default ‘Dark’ theme and made some tweaks to the color scheme and layout. Here’s a quick before-and-after comparison:
Before Customization
After Adding Custom CSS
The process was pretty straightforward. I imported a custom CSS flow into Node-Red and adjusted the styles to match my preferences. I added gradients to the background, changed the card panels to have a slight transparency, and rounded the corners for a smoother look. I also adjusted the font sizes and colors to make everything more readable.
If you’re interested in trying something similar, here’s a snippet of the CSS I used:
css
/* Custom Gradient Background */
body {
background: -webkit-linear-gradient(
55deg,
#009785 0%,
#245aa5 50%,
#b800e9 100%
);
}
/* Card Panel Customization */
ui-card-panel {
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
I’ve also been experimenting with adding custom styles for specific widgets, like the clock on my dashboard. By creating a new CSS class and applying it to the widget, I was able to increase the font size and make it stand out more.
This project has been a great way to dive deeper into Node-Red and CSS, and I love how much more polished my dashboard looks now. If anyone has tips for further customization or has tried something similar, I’d love to hear about it!
Happy tinkering! 