Hey everyone! I wanted to share my experience with customizing the Node-Red dashboard using CSS. I’ve been working on this for a while and thought it might be helpful for others who are looking to personalize their dashboards without diving too deep into coding. Here’s how I approached it:
First, I started by selecting the default ‘Dark’ theme in Node-Red. It’s a great base to work with, but I wanted something more vibrant and unique. I decided to focus on changing the background gradient and adjusting the card panels for better visibility.
Here’s the CSS code I used to achieve the look I wanted:
css
/* Custom Gradient Background */
body {
background: -webkit-linear-gradient(
55deg,
#009785 0%,
#245aa5 50%,
#b800e9 100%
);
}
/* Transparent Card Panels */
ui-card-panel {
background-color: rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
/* Rounded Corners for Groups */
#Homey_Dashboard_Navigation {
background-color: transparent !important;
border-radius: 10px !important;
}
I imported this CSS into Node-Red by copying the code and pasting it into a new template node. After deploying, the changes took effect immediately. The best part is that all my existing widgets and functionality remained intact, only the visual aspect was enhanced.
If you’re looking to take it further, you can add more styles for specific elements like buttons or text. For example, to change the font size of your time display, you can add:
css
.show-time {
font-size: 64px;
font-weight: 800;
color: #FFFFFF;
}
This approach allows you to tweak different parts of your dashboard without affecting the overall structure. It’s all about finding the right balance between aesthetics and usability.
I hope this helps someone out there looking to give their Node-Red dashboard a fresh look! Happy customizing! 