Change elements position in Node Red

Hello, I've tried so hard to do a simple thing which is to change the position of the date so it will be in top, I tried with HTML and CSS but nothing worked, I honestly don't know what is the problem
image
this is my flow

[{"id":"b0c4208b.45aaa","type":"inject","z":"6cc68722.a40ec8","name":"every 10 mins","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"*/30 6-23 * * *","once":true,"onceDelay":"","x":366.0173645019531,"y":228.0104217529297,"wires":[["c230cec2.2ea6f"]]},{"id":"44d43132.691d3","type":"link out","z":"6cc68722.a40ec8","name":"Forecast trigger","links":["e23e2c7b.61e12"],"x":901.0173645019531,"y":208.0104217529297,"wires":[]},{"id":"977d4ac7.42c578","type":"function","z":"6cc68722.a40ec8","name":"Reload","func":"//Load flow context to variable\nvar select = flow.get('dropdown')||1;\n\n//If dropdown option is changed\nif (msg.topic=='dropdown') {\n    flow.set('dropdown',msg.payload);\n    node.send ({topic:msg.payload});\n    }\n    \n//If http connection is made, or triggered by inject\nelse if (msg.payload=='connect') {\n    node.send ({topic:select});\n    }\n\n//Or do nothing\nelse {node.send (null);}\n","outputs":"1","noerr":0,"x":626.0173645019531,"y":178.0104217529297,"wires":[["a371aaa.05db958"]]},{"id":"50a7e306.cd3a1c","type":"inject","z":"6cc68722.a40ec8","name":"New day","topic":"","payload":"connect","payloadType":"str","repeat":"","crontab":"00 00 * * *","once":false,"onceDelay":"","x":352.0173797607422,"y":168.0104274749756,"wires":[["977d4ac7.42c578"]]},{"id":"c53aa584.298678","type":"ui_ui_control","z":"6cc68722.a40ec8","name":"","x":326.0173645019531,"y":98.01042175292969,"wires":[["977d4ac7.42c578"]]},{"id":"c230cec2.2ea6f","type":"ui_button","z":"6cc68722.a40ec8","name":"Dash Refresh","group":"66c81cbd.907f94","order":18,"width":"1","height":"1","passthru":true,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-refresh fa-2x","payload":"","payloadType":"str","topic":"","x":606.0173645019531,"y":228.0104217529297,"wires":[["a371aaa.05db958"]]},{"id":"a371aaa.05db958","type":"darksky","z":"6cc68722.a40ec8","darksky":"","name":"","lon":"1.3345200","lat":"36.1652500","date":"","time":"","mode":"node","lang":"fr","units":"ca","x":785.0174140930176,"y":203.01045989990234,"wires":[["44d43132.691d3"]]},{"id":"68dde0b4.8a2ee","type":"function","z":"6cc68722.a40ec8","name":"Forecast","func":"const t = msg.topic;\nconst i = msg.data.daily.data[1];\nnode.send(i);","outputs":1,"noerr":0,"x":342.01737213134766,"y":451.0103950500488,"wires":[["b27cba66.d95328","127c6170.297d0f","2fe09240.10e28e","8a015d3e.3083e"]]},{"id":"e23e2c7b.61e12","type":"link in","z":"6cc68722.a40ec8","name":"Wunderground forecast parser","links":["44d43132.691d3"],"x":149.01733589172363,"y":449.0104103088379,"wires":[["68dde0b4.8a2ee"]]},{"id":"b27cba66.d95328","type":"function","z":"6cc68722.a40ec8","name":"date","func":"const i = (msg.time)*1000;\nnode.send({payload:i});","outputs":1,"noerr":0,"x":497.0173110961914,"y":393.0103931427002,"wires":[["d2e22f35.5ee7"]]},{"id":"d2e22f35.5ee7","type":"ui_text","z":"6cc68722.a40ec8","group":"d2f91378.ef41","order":6,"width":"6","height":"2","name":"Date","label":"","format":"<h2>{{msg.payload | date:\"EEE, d MMMM yyyy\"}}</h2>","layout":"col-center","x":893.0346908569336,"y":345.4651622772217,"wires":[]},{"id":"2fe09240.10e28e","type":"function","z":"6cc68722.a40ec8","name":"high temp","func":"const i = msg.temperatureHigh;\nnode.send({payload:i});","outputs":1,"noerr":0,"x":666.017333984375,"y":478.0104064941406,"wires":[["a3201877.17b018"]]},{"id":"8a015d3e.3083e","type":"function","z":"6cc68722.a40ec8","name":"low temp","func":"const i = msg.temperatureLow;\nnode.send({payload:i});","outputs":1,"noerr":0,"x":666.017333984375,"y":518.0104064941406,"wires":[["426e91e7.22f26"]]},{"id":"127c6170.297d0f","type":"function","z":"6cc68722.a40ec8","name":"icon","func":"let i = msg.icon;\n\n// Fix for Darksky displaying partly-cloudy-night\n// error, hopefully fixed soon...\nif (i == \"partly-cloudy-night\") {\n    i = \"clear-day\";\n    }\n    \nnode.send({payload:i});","outputs":1,"noerr":0,"x":659.0173511505127,"y":429.010461807251,"wires":[["b8343ab3.3d52e8"]]},{"id":"a3201877.17b018","type":"ui_text","z":"6cc68722.a40ec8","group":"d2f91378.ef41","order":4,"width":"2","height":"1","name":"","label":"temp ▲","format":"{{msg.payload}}°C","layout":"col-center","x":846.017333984375,"y":478.0104064941406,"wires":[]},{"id":"426e91e7.22f26","type":"ui_text","z":"6cc68722.a40ec8","group":"d2f91378.ef41","order":5,"width":"2","height":"1","name":"","label":"temp ▼","format":"{{msg.payload}}°C","layout":"col-center","x":848.0173492431641,"y":516.010404586792,"wires":[]},{"id":"b8343ab3.3d52e8","type":"ui_template","z":"6cc68722.a40ec8","group":"d2f91378.ef41","name":"icon Image","order":1,"width":"2","height":"2","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x wi wi-darksky-{{msg.payload}}\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":859.0346565246582,"y":421.7986831665039,"wires":[[]]},{"id":"66c81cbd.907f94","type":"ui_group","z":"","name":"Lamp","tab":"","order":1,"disp":true,"width":"6","collapse":false},{"id":"d2f91378.ef41","type":"ui_group","z":"","name":"after tomorrow","tab":"3388d18c.98828e","order":2,"disp":true,"width":"6","collapse":false},{"id":"3388d18c.98828e","type":"ui_tab","z":"","name":"Weather","icon":"cloud","order":14,"disabled":false,"hidden":false}]

Another thing I wanna ask about , the icons of darksky are too boring, do you have any suggestion for more colorful and live icons ?!

I think this post from Paul Reed may have something:

1 Like

It's a very small flow - just an inject node??

1 Like

Sorry, I edited the right flow, I belive it is a part of your flow Sir

...So it looks like this?

after

If so, go to the dashboard tab in your side panel and re-arrange the elements;

date

The weather icons which you are using are built into node-RED together with supporting CSS files.
If you wanted to use alternative icons, it's certainly possible, but you would need to load them from a static directory. This may help you, if you can find a suitable icon set to use.

6 Likes

Thank you very much

1 Like