How to add Css file path to html file of custom node

General
1

I created custom node, i want to add CSS style like

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

to element in html. how to do that

2

You will need to give us some more clues I'm afraid as the answer depends on what you are trying to do and we can't guess that from what you've said so far.

Where is the CSS to be used? In the Editor, in some end user interface that you are creating? Dashboard?

3

Hi @kiran

You can include a <style> block in your custom node's html file to provide the CSS.

Make sure you use a css selector name that is unique for your node - for example, include the node type in the name. fadeIn is too generic and could clash with other things. my-custom-node-type-fadeIn would be less likely to clash.

4

Hey i have the same Problem like @kiran,

I would like to create a Dashboard with ui_text Node.
This Dashboard is Displayed for End Customer, when they say for Example Hello,
The Voice2Json should trigger a Message and send it at the ui_text node.

My first Question is: When this Message Arrive, is it possible to use a Fade in everytime it gets an new message?
And is there a Solution to use Google Fonts for this Text.

I know how to Style CSS, but where do i put my Styles or is it possible to modify the main css from the Dashboard.

Thanks in Advance

Mirco

5

@Mirco_H hi and welcome to the forum. This 11 month old topic was related to creating new types of node-red nodes (e.g. for other users to install into node-red).

Your question is very much unrelated (you are asking as user of node-red, how to apply CSS to parts of the dashboard)

I believe you will get much better help if you create a new topic with a good title. Something like "how to apply style to dashboard item when a message arrives" or similar.

1 Like