# Template Button - How do I Change its Appearance?

**URL:** https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846
**Category:** General
**Created:** [27 October 2021 19:24 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846 "2021-10-27T19:24:55Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [27 October 2021 19:24 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/1 "2021-10-27T19:24:55Z")

</div>

Hi All,

I have made the most basic of basic dashboard buttons...

```auto
[
    {
        "id": "5773e8c258209a92",
        "type": "debug",
        "z": "bb0c8939b7b482ce",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 350,
        "y": 250,
        "wires": []
    },
    {
        "id": "3e94509d52886ac7",
        "type": "ui_template",
        "z": "bb0c8939b7b482ce",
        "group": "c713dff5.21ab3",
        "name": "Press_Me",
        "order": 1,
        "width": "2",
        "height": "2",
        "format": "<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\">Some text</div>\n<md-button\n ng-mousedown=\"send({payload: true})\"\n ng-mouseup=\"send({payload: false})\"\n >Press_Me\n</md-button>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 180,
        "y": 250,
        "wires": [
            [
                "5773e8c258209a92"
            ]
        ]
    },
    {
        "id": "c713dff5.21ab3",
        "type": "ui_group",
        "name": "Test",
        "tab": "a2b4d00e.93a548",
        "order": 1,
        "disp": false,
        "width": "10",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a2b4d00e.93a548",
        "type": "ui_tab",
        "name": "Test",
        "icon": "book",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Press on it with any mouse button and hold the button in, it sends `true` .... Release the mouse button and it sends `false` .... Press and hold the mouse button, it sends `true` then drag the cursor off the button and release, it does not send an accompanying `false` ... (Acts like a latched button).... Great!!

Now, the question is: How can I change the appearance of this button by using a `.png` file in my static folder? I would like the button to have a unpressed and a pressed `.png` image/icon which changes on mouse click?

Are there any easy solutions to this?

TIA  
Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [27 October 2021 20:24 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/2 "2021-10-27T20:24:34Z")

</div>

Hello ..

instead of simply sending a msg with those Angular ng- click events ..  
you could trigger intermediate functions that do the extra job of changing the background image of your buttons (and also send the msg to NR)

**Example code:**  
(in the example i just change the css color but you have code commented out to test for `backgroundImage`)

```auto

<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >Press_Me 1
</md-button>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >Press_Me 2
</md-button>

<script>

(function(scope) {
  
scope.mousedown = function(event) {
// event.target.style.backgroundImage = "url('btn_down.png')";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
// event.target.style.backgroundImage = "url('btn_up.png')";
event.target.style.color = "blue";
scope.send({payload: false})
}

})(scope);

</script>

```

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 10:56 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/3 "2021-10-28T10:56:52Z")

</div>

Thanks for coming back to me!!

I plugged it in, the colour change works a treat!!

---but---

Couldn't get the image to change... an excerpt from the code:

`event.target.style.backgroundImage = "url('/home/ed/.node-red/node-red-static/png/Left_Arrow_Button1')";`

I tried the above as well as:

`event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1')";`

(`/home/ed/.node-red/node-red-static` is obviously the static directory as set in settings.js)

Another question that is going to come up once the button pic changes, will be "How do I set the 'initial' picture of the button before it is pressed?"

As you can gather, I am of the "codingly challenged" society!!

TIA  
Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 October 2021 11:08 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/4 "2021-10-28T11:08:26Z")

</div>

hello ..

> [@eddee54455](#):
>
> url('/home/ed/.node-red/node-red-static/png/Left\_Arrow\_Button1

1. you need to add the extension `.png` after each image (Left\_Arrow\_Button1.png)
2. make sure the images are in `png` folder under the `node-red-static` folder you defined in settings.js

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 11:14 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/5 "2021-10-28T11:14:43Z")

</div>

Bwahahahaha.... What an ass I am!! .... Shows my inexperience!!

Shotto! Working!!

A quick way to "scale" it maybe? (so it only shows one image)....

![screenshot-127.0.0.1_1880-2021.10.28-13_13_09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d238f493e227a9ca91fb8ffcc6d6a99b60abe881.png)

(And no background if possible)

TIA  
Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 October 2021 11:26 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/6 "2021-10-28T11:26:24Z")

</div>

> [@eddee54455](#):
>
> Another question that is going to come up once the button pic changes, will be "How do I set the 'initial' picture of the button before it is pressed?"

missed that part .. hmm .. maybe with inline css style on each element or define styles in `<style>` tags  
`<md-button style="background-image= url('/png/btn_initial_state.png');" ...`

> [@eddee54455](#):
>
> A quick way to "scale" it maybe?

im not sure but you can experiment with different background-repeat , background-size image css  
a list of them on [w3schools](https://www.w3schools.com/html/html_images_background.asp)

note.as you have noticed the css name is a bit different with how you call it js.  
for example css : `background-image` will be `backgroundImage` camelcase? in JS

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 12:37 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/7 "2021-10-28T12:37:08Z")

</div>

Thanks for the pointer!!!!!

And... Believe it or not, one critical bit I have missed till now:

> [@UnborN](#):
>
> bit different with how you call it js.  
> for example css : `background-image` will be `backgroundImage` camelcase?

Cheers  
E

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 13:26 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/8 "2021-10-28T13:26:14Z")

</div>

Ok, got the image scaling right and kinda understand it too!! Bonus!!

The camelCase hint explains why everything I tried didn't work (Remember, not only am I a NooB, but also an honorary member of the DNA...."National Dyslexic's Association")

I just cant seem to get the initial image to work... I know it's something basic, just a whole lot of clueless on my side... I must apologise @UnborN .... I'm not so bright at this!!

Here is what I have got so far, but the initial image is not working..

```auto
<div id="{{'my_'+$id}}" style="backgroundImage=url('/png/Left_Arrow_Button.png')">UnBorn</div>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >1
</md-button>
<md-button
    ng-mousedown="mousedown($event)"
    ng-mouseup="mouseup($event)"
    >2
</md-button>

<script>
//style="{{'color:'+theme.base_color}}" 
//style="backgroundImage= url('/png/Left_Arrow_Button.png')"

(function(scope) {
scope.mousedown = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1.png')";
event.target.style.backgroundRepeat = "no-repeat";
event.target.style.backgroundSize = "100% 100%";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button.png')";
event.target.style.backgroundSize = "100% 100%";
event.target.style.color = "blue";
scope.send({payload: false})
}

})(scope);

</script>

```

Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 October 2021 13:34 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/9 "2021-10-28T13:34:48Z")

</div>

wait a second .. what image background you want to change ? the div's ?  
i was under the impression that it was the md-button's.  
if its for the md-button then the initial inline css style should be on the md-button

```auto
<md-button style="background-image=url('/png/Left_Arrow_Button.png')"
   ng-mousedown="mousedown($event)"
   ng-mouseup="mouseup($event)"
   >1
</md-button>

```

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 13:56 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/10 "2021-10-28T13:56:19Z")

</div>

Ok... Noob Alert... Start running!!

I have not an inkling of what the div's do... I am parroting to the n'th degree... But if I do try the code you put in above, the initial image "unclicked", looks like (1) until it's clicked and released, then it looks like (2) .... See below:

![screenshot-127.0.0.1_1880-2021.10.28-15_52_28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9a3fd59f96d4675fc8500f1ea11908a81c0b1092.png)

To explain, I would like both buttons to look like (2) initially, before even clicked...

I tried adding the section but no change was visible - Immediately I deployed it, the buttons both looked like (1) until they were clicked...

Thanks so much for your time and help!!

Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 October 2021 16:13 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/11 "2021-10-28T16:13:37Z")

</div>

> [@eddee54455](#):
>
> I would like both buttons to look like (2) initially, before even clicked...

can you tell us the file names + extensions of the images (x3) for :

1. initial image
2. mousedown image
3. mouseup image

> [@eddee54455](#):
>
> I have not an inkling of what the div's do

ahem! .. someone has some studying to do 😉 .. div is an html element that is more or less a container for other elements or text  
for a better description read [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div)  
or even better an HTML, CSS, JS crash course [here](https://www.youtube.com/playlist?list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8)

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 16:42 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/12 "2021-10-28T16:42:57Z")

</div>

Might sound a bit cryptic, but initial image would usually be the same as mouseup image...

Up: ![Up_Arrow_Button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/d/bd8f42fd6c8786734e7447ec8e0b61a6b6f6c955.png)  
Down: ![Up_Arrow_Button1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/958c04257cb65947117129449ae7a2779153632a.png)

> [@UnborN](#):
>
> ahem! .. someone has some studying to do 😉 .. div is an html element that is more or less a container for other elements or text

Already having a brainfreeze.... But will try!!

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [28 October 2021 17:13 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/13 "2021-10-28T17:13:07Z")

</div>

> [@eddee54455](#):
>
> but initial image would usually be the same as mouseup image

so initial image should be `/png/Left_Arrow_Button.png`

like this ?

```auto
<div id="{{'my_'+$id}}">UnBorn</div>

<md-button
    style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"
    ng-mousedown="mousedown($event)" ng-mouseup="mouseup($event)">1</md-button>

<md-button
    style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"
    ng-mousedown="mousedown($event)" ng-mouseup="mouseup($event)">2
</md-button>

<script>

(function(scope) {
    
scope.mousedown = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button1.png')";
event.target.style.color = "red";
scope.send({payload: true})
}

scope.mouseup = function(event) {
event.target.style.backgroundImage = "url('/png/Left_Arrow_Button.png')";
event.target.style.color = "blue";
scope.send({payload: false})
}

})(scope);

</script>

```

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 17:39 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/14 "2021-10-28T17:39:50Z")

</div>

Brilliant!! That works a treat!!

I struggled to get that single line out: `style="background-image: url('/png/Left_Arrow_Button.png'); background-repeat: no-repeat; background-size: 100% 100%;"`

Dromedary text, amongst other things, messed me around....

I will try and read up on the crash course... If for nothing else, just to try find out how to get rid of the "default" blue/green background...

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [28 October 2021 21:42 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/15 "2021-10-28T21:42:25Z")

</div>

And.... after well a lot of scratching..... I found this:

`background-color:transparent`

Added it to this line:

`style="background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; background-color:transparent; background-size: 100% 100%;"`

And now I have this:  
 ![screenshot-127.0.0.1_1880-2021.10.28-23_41_28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d276af26e4d6e4b83558d4d3eab7ca40cb31669.png)

Happiness in the land!!

Edit: Made bigger and clearer.... old eyes et al:

![screenshot-127.0.0.1_1880-2021.10.28-23_53_10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbcfbfb8399be585e4e097aa32ae3b51f7257a93.png)

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [8 November 2021 12:27 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/16 "2021-11-08T12:27:07Z")

</div>

Hi Andy,

I have been trying a few things and come up with a question regarding "cramming" of 2x Buttons onto a single tile/widget...

With these nodes, I can get an up and a down arrow onto a single tile...

```auto
[
    {
        "id": "49d39c46ac6b092b",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile",
        "order": 10,
        "width": 1,
        "height": 1,
        "format": "<div id=\"{{'my_'+$id}}\" \nstyle=\"{{'color:'+theme.base_color}}\" ></div>\n\n\n<md-button \n style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\"\n >\n</md-button>\n\n<md-button \n style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%;button-size: 100% 25%\"\n ng-mousedown=\"mousedownB($event)\"\n ng-mouseup=\"mouseupB($event)\"\n >\n</md-button>\n\n<script>\n(function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 50,
        "wires": [
            [
                "4ff1e912ccebdb0e"
            ]
        ]
    },
    {
        "id": "4ff1e912ccebdb0e",
        "type": "debug",
        "z": "c5c2730f3af33875",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 380,
        "y": 50,
        "wires": []
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

```

Now, the question is: I can scale the "icon" perfectly, it works beautifully, but the widget has a "scroll bar" come up when I resize it down to a single "tile" vertically....  
2 Tiles vertical span:  
 ![screenshot-127.0.0.1_1880-2021.11.08-14_23_37](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c9e2c9e5b13067bb33e8b47517f7a4fcad57d6b.png)  
1 Tile:  
 ![screenshot-127.0.0.1_1880-2021.11.08-14_25_42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/743aab357220859ef48e03bf4e4f9f3189330e9a.png)

Any idea as to how I can get rid of the scroll bar?

Regds  
Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [8 November 2021 13:12 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/17 "2021-11-08T13:12:39Z")

</div>

Hi Ed,

the dimensions of your widget is so small that its little difficult to control its size precisely.  
you can try to give your `ui_template` a unique class name so you can target it with css

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4acef1c5388950c879170d4a7b90b37667f833a.png)

then at the top of the code

```auto
<style>
    .myButtons {
  overflow: hidden; /* Hide scrollbars */
}
</style>

...

```

i havent tested it fully since i dont have your button images

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [10 November 2021 18:06 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/18 "2021-11-10T18:06:44Z")

</div>

Take a look at these if you would be so kind...

Here is the template:

```auto
[
    {
        "id": "49d39c46ac6b092b",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile",
        "order": 1,
        "width": 1,
        "height": 1,
        "format": "<div id=\"{{'my_'+$id}}\" \nstyle=\"{{'color:'+theme.base_color}}\" ></div>\n\n\n<md-button \n style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\"\n >\n</md-button>\n\n<md-button \n style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%;button-size: 100% 25%\"\n ng-mousedown=\"mousedownB($event)\"\n ng-mouseup=\"mouseupB($event)\"\n >\n</md-button>\n\n<script>\n(function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\nevent.target.style.backgroundRepeat = \"no-repeat\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\nevent.target.style.backgroundSize = \"100% 25%\";\nevent.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 50,
        "wires": [
            [
                "4ff1e912ccebdb0e"
            ]
        ]
    },
    {
        "id": "4ff1e912ccebdb0e",
        "type": "debug",
        "z": "c5c2730f3af33875",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 380,
        "y": 50,
        "wires": []
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

```

And the associated png files:

![Dn_Arrow_Button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4dc02355a0c012abc8827c9b9f9fc0238b7b6c6.png)

![Dn_Arrow_Button1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/31d6d864a349e9dcce1f9b698272ce0fc4ad7d49.png)

![Up_Arrow_Button](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fb708fc917f794ac9b1002079c7e751fbac1bab5.png)

![Up_Arrow_Button1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/155398c5f9dab47a8cf0d26160916fa680a7f266.png)

This might give you more of an idea...

Thanks for the help!!

Ed

---

<div class="post-metadata">

### Author: ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)
#### Post date: [10 November 2021 18:59 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/19 "2021-11-10T18:59:20Z")

</div>

i see .. the problem was that the **md-button** element had a default style with a set `min-width`.  
that didnt allow the widget to show up in the 1x1 size.  
(without showing scrollbars that is)

so create a style tag and override that property

```auto
<style>
    .md-button {
        min-width: 0px;
    }
</style>

```

**Flow:**

```auto
[{"id":"49d39c46ac6b092b","type":"ui_template","z":"5847b7aa62131d37","group":"0778f2d6568500cc","name":"Up/Dn + Press - Single Tile","order":1,"width":"1","height":"2","format":"<style>\n .md-button {\n min-width: 0px;\n }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 25px 20px; button-size: 25px 20px\" ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 25px 20px; button-size: 25px 20px\"\n ng-mousedown=\"mousedownB($event)\" ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":380,"y":1460,"wires":[["4ff1e912ccebdb0e"]]},{"id":"4ff1e912ccebdb0e","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1460,"wires":[]},{"id":"0778f2d6568500cc","type":"ui_group","name":"Group 1","tab":"026fcdc7367db27f","order":1,"disp":true,"width":"1","collapse":false,"className":""},{"id":"026fcdc7367db27f","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":2}]

```

---

<div class="post-metadata">

### Author: ![eddee54455](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/eddee54455/32/43350_2.png) [@eddee54455](https://discourse.nodered.org/u/eddee54455)
#### Post date: [11 November 2021 12:20 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/20 "2021-11-11T12:20:34Z")

</div>

Hi Andy,

Thanks for coming back to me!

Here is what I have accomplished:

```auto
[
    {
        "id": "a666512dc3f3d340",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile 3",
        "order": 4,
        "width": 1,
        "height": 1,
        "format": "<style>\n .md-button {\n min-width: 0%;\n min-height:0%;\n overflow: hidden\n }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownB($event)\" \n ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 230,
        "wires": [
            []
        ]
    },
    {
        "id": "b4bfe2d1ec854367",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile 3",
        "order": 3,
        "width": 1,
        "height": 2,
        "format": "<style>\n .md-button {\n min-width: 0%;\n min-height:0%;\n overflow: hidden\n }\n</style>\n\n\n<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<md-button style=\"background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\">\n</md-button>\n\n<md-button style=\"background-image: url('/png/Dn_Arrow_Button.png'); background-repeat: no-repeat; \n background-color:transparent; background-size: 100% 25%; button-size: 100% 25%\"\n ng-mousedown=\"mousedownB($event)\" \n ng-mouseup=\"mouseupB($event)\">\n</md-button>\n\n<script>\n (function(scope) {\n\nscope.mousedownT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Upper\", payload: true})\n}\n\nscope.mouseupT = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Upper\", payload: false})\n}\nscope.mousedownB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n// event.target.style.backgroundRepeat = \"no-repeat\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"red\";\nscope.send({topic:\"Lower\", payload: true})\n}\n\nscope.mouseupB = function(event) {\nevent.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n// event.target.style.backgroundSize = \"100% 25%\";\n// event.target.style.buttonSize = \"100% 25%\";\nevent.target.style.color = \"blue\";\nscope.send({topic:\"Lower\", payload: false})\n}\n\n})(scope);\n\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 170,
        "y": 190,
        "wires": [
            []
        ]
    },
    {
        "id": "0778f2d6568500cc",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "026fcdc7367db27f",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "026fcdc7367db27f",
        "type": "ui_tab",
        "name": "Tab 3",
        "icon": "dashboard",
        "order": 2
    }
]

```

If you look at the below screen capture, as long as I spread the "dual button" across two tiles vertically, the scroll bar disappears and both arrows are visible...

![screenshot-127.0.0.1_1880-2021.11.11-14_18_31](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/ccb6af679866428cf0486fdf419cd89559bdac2d.png)

To recap, I am trying to fit both the up and down buttons onto a single tile, trying to get a similar effect to this:

![screenshot-127.0.0.1_1880-2021.11.11-14_19_36](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90ca7872eac18a1bbc045fb3b1cace8bb9c34585.png)

Almost there!!

Thanks heaps yet again!!

Regds  
Ed

[Next page](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846.md?page=2)