# Change elements position in Node Red

**URL:** <https://discourse.nodered.org/t/change-elements-position-in-node-red/9065>\
**Category:** Dashboard\
**Created:** [16 March 2019 19:56 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065 "2019-03-16T19:56:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sakura](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@sakura](https://discourse.nodered.org/u/sakura)\
**Post date:** [16 March 2019 19:56 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/1 "2019-03-16T19:56:05Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f8924538056745f91ff841f035810d9b23f42ea7.png)  
this is my flow

```auto
[{"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 ?!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [16 March 2019 20:06 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/2 "2019-03-16T20:06:50Z")

</div>

I think this post from Paul Reed may have something:

> [@Local weather group for Dashboard](https://discourse.nodered.org/t/local-weather-group-for-dashboard/387/24):
>
> I've also just switched to Darksky, but not got around to fully complete it. However, this is what I've got so far. The only changes I think you'll need to make is to set up the Darksky node with your own credentials & location. [{"id":"16739c3e.cad3d4","type":"function","z":"a444a9ff.e7a408","name":"Rain intensity","func":"const i = msg.payload.precipIntensity\*25.4;\nnode.send({payload:i});","outputs":1,"noerr":0,"x":750,"y":170,"wires":[["3f48dcc5.211744"]]},{"id":"868f4534.3b4098","type":"f…

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [16 March 2019 20:43 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/3 "2019-03-16T20:43:00Z")

</div>

> [@sakura](#):
>
> this is my flow

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

---

<div class="post-metadata">

**Author:** ![sakura](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@sakura](https://discourse.nodered.org/u/sakura)\
**Post date:** [16 March 2019 20:46 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/4 "2019-03-16T20:46:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [16 March 2019 21:19 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/5 "2019-03-16T21:19:20Z")

</div>

...So it looks like this?

![after](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cce025b83562f276adcfca008f25a6eb9b5df9c9.png)

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

![date](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/683377f891ce84fc1fe5a792aad0af2655dd98c5.png)

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](https://github.com/Paul-Reed/weather-icons), if you can find a suitable icon set to use.

---

<div class="post-metadata">

**Author:** ![sakura](https://avatars.discourse-cdn.com/v4/letter/s/898d66/32.png) [@sakura](https://discourse.nodered.org/u/sakura)\
**Post date:** [16 March 2019 21:55 UTC](https://discourse.nodered.org/t/change-elements-position-in-node-red/9065/6 "2019-03-16T21:55:59Z")

</div>

Thank you very much