# Injecting payload value into ui-template

**URL:** <https://discourse.nodered.org/t/injecting-payload-value-into-ui-template/88911>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [24 June 2024 15:39 UTC](https://discourse.nodered.org/t/injecting-payload-value-into-ui-template/88911 "2024-06-24T15:39:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![stef68600](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@stef68600](https://discourse.nodered.org/u/stef68600)\
**Post date:** [24 June 2024 15:39 UTC](https://discourse.nodered.org/t/injecting-payload-value-into-ui-template/88911/1 "2024-06-24T15:39:31Z")

</div>

hello,  
I am looking for a solution to dynamically change the background color of the dashboard v1.0.  
I searched but I'm not very experienced in pure code.  
my need :  
I have two payload variables:  
msg.colorbas  
msg.colorbas  
that I want to use as a variable in a ui-template.  
the code works well with constants.  
Thank you for your help 😉

```auto
body {
    background: -webkit-linear-gradient(
    55deg,
    {{msg.colorbas}} 0%, /*#181718 */ 
    {{msg.colorhaut}} 100% /*#92539B */
    );
    -webkit-touch-callout: none !important;
}

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 June 2024 16:52 UTC](https://discourse.nodered.org/t/injecting-payload-value-into-ui-template/88911/2 "2024-06-24T16:52:09Z")

</div>

Hello @stef68600 and welcome to the forum.

I think you basically just need to wrap the code you posted above in `<style>` tags.

I left out the `-webkit-touch-callout: none !important` bit because I have no idea what it's for 😃

```auto
<style>
body {
    background: -webkit-linear-gradient(
    55deg,
    {{msg.colorbas}} 0%, /*#181718 */ 
    {{msg.colorhaut}} 100% /*#92539B */
    );
}
</style>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/471207d38474a29573a7268318c1adddead16b3b.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 July 2024 18:11 UTC](https://discourse.nodered.org/t/injecting-payload-value-into-ui-template/88911/5 "2024-07-10T18:11:52Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.