Can I change the color of a Node Red Compass

Hello, I'm trying to change the color of a compass depending of the received values, I inspected the code in the browser then added a template with

<style>
   path {
color: #00900e;
}
</style>

but it filled other components with the color, I didn't find any id for the compass, is there any other way to do so ??

Yes you can, but this is where you need to learn a bit about CSS. CSS is short for cascading style sheet which means that everywhere it can apply it will and it will cascade to the child elements.

A CSS statement is made of two parts, the selector and the rules. The rules are like color or margin or fill or border while slectores are like div.foo (a div with a class of 'foo') or #case1 p (any

who is a child of an element with an ID of 'case1')

If you what to change the default styling, a good place to start is to take a CSS tutorial so you will get familiar with the terminology

Secondly, you should play with a code editor in the browsers. FireFox, Chrome and Safari all have code editors (You may have to enable them) to allow you to look at the generated html and see the CSS applied to an element. You could also look at the page source to determing what selector you should use. More exact selectors will override more general selectors and while I understand this may confuse you, that is why I started by saying take a tutorial.

Once you have and have tried some selectore and rules feel free to ask for more help and people will be happy to guide you so you can solve your problem and learn something along the way.

2 Likes