# 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:** 8\
**Page:** 2

<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:** [11 November 2021 13:24 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/21 "2021-11-11T13:24:18Z")

</div>

Hi

1. `min-height:0%` in style tags. set it to a pixel value maybe 10px - 15px.  
you dont need any more the overflow:hidden either.
2. use `px` instead of `%` for all sizes for better accuracy, as in my flow above (forgot to mention it in the previous post)

One trick to pinpoint the exact size in pixels is to right click on the image/element and choose **"Inspect"**  
Thats going to select the element in your browser's **developer's tools** and on the right side you'll see the css styles attached to it.

Double clicking on the pixel value of (lets say _background-size_) and using the up/down arrows you can increment/decrement the size till you get it right (without scrollbars). Note down the values and apply to the actual code.

---

<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 14:40 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/22 "2021-11-11T14:40:04Z")

</div>

Interesting reading!! and looking at!!

![screenshot-127.0.0.1_1880-2021.11.11-16_31_14](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e250f0c586dd44bccd040e3970575657e30299ae.png)

Although I can adjust the arrow sizes etc, I cant seem to adjust this bit:

 ![Screenshot_20211111_163539](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa688d89b4306cec8e584632c30bda7c73d962b1.png)

(the size of the light red square)

It's almost as if each button is a 1x1 size, no matter what I have tried, the actual "button" itself (or its area allocated to it) does not scale down... Feel so foolish...LOL....

Regds  
Ed

Edit:

> [@UnborN](#):
>
> use `px` instead of `%`

I will keep it as a % meantime... Layout is still in limbo, % seems to be more flexible, albeit not as accurate

---

<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:** [11 November 2021 14:55 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/23 "2021-11-11T14:55:38Z")

</div>

plan B .. change the md-buttons to divs ..

```auto
<div style="background-image: url('/png/Up_Arrow_Button.png'); background-repeat: no-repeat; 
   background-color:transparent; background-size: 90% 90%; width: 25px; height: 25px" ng-mousedown="mousedownT($event)"
    ng-mouseup="mouseupT($event)">
</div>

```

---

<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 15:43 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/24 "2021-11-11T15:43:12Z")

</div>

I think I have done it right... See below:

```auto
[
    {
        "id": "2b1bfd96912a18a8",
        "type": "ui_template",
        "z": "c5c2730f3af33875",
        "group": "0778f2d6568500cc",
        "name": "Up/Dn + Press - Single Tile 5",
        "order": 4,
        "width": 1,
        "height": 1,
        "format": "<div \nid=\"{{'my_'+$id}}\" \nstyle=\"{{'color:'+theme.base_color}};\nbackground-image: url('/png/Up_Arrow_Button.png'); \nbackground-repeat: no-repeat;\nbackground-color:transparent; \nbackground-size: 100% 25%; \nwidth: 25px; \nheight: 25px\">\n</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": 210,
        "wires": [
            [
                "4ff1e912ccebdb0e"
            ]
        ]
    },
    {
        "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
    }
]

```

But still no change...

---

<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:** [11 November 2021 20:11 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/25 "2021-11-11T20:11:13Z")

</div>

i mean .. totally replace them as divs .. not to be md-buttons anymore  
because its pretty pointless with so many css styling changes to keep them as [material-design](https://material.angularjs.org/latest/demo/button) buttons 😉

**[EDIT]** resized % of images and added `cursor:pointer` css style

```auto
[{"id":"251a3e9c2d2fc7cd","type":"ui_template","z":"5847b7aa62131d37","group":"510d1d4036ab811e","name":"Up/Dn + Press - Single Tile 5","order":4,"width":1,"height":1,"format":"\n<div class\"imagebutton\"\nstyle=\"background-image: url('/png/Up_Arrow_Button.png');\ncursor: pointer;\nbackground-repeat: no-repeat;\nbackground-color:transparent;\nbackground-size: 90% 60%; width: 25px; height: 25px\"\nng-mousedown=\"mousedownT($event)\"\nng-mouseup=\"mouseupT($event)\">\n</div>\n\n<div class\"imagebutton\"\nstyle=\"background-image: url('/png/Dn_Arrow_Button.png'); \ncursor: pointer;\nbackground-repeat: no-repeat; \nbackground-color:transparent; \nbackground-size: 90% 60%; width: 25px; height: 25px\" \nng-mousedown=\"mousedownB($event)\"\nng-mouseup=\"mouseupB($event)\">\n</div>\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":580,"y":620,"wires":[["33d54fd75103dac3"]]},{"id":"33d54fd75103dac3","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":830,"y":620,"wires":[]},{"id":"510d1d4036ab811e","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}]

```

---

<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:** [12 November 2021 13:32 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/26 "2021-11-12T13:32:16Z")

</div>

Thanks Andy!!

I couldn't get your code to work as posted, but it gave me some major steps in the right direction... Copy/Paste/Guess to the Max!!

And it actually worked!!

Here's what I came up with ultimately:

```auto
[
    {
        "id": "d52180de48148c7f",
        "type": "ui_template",
        "z": "68e5c71acc43e814",
        "g": "7cdc27954f172ea5",
        "group": "62350f50d4b09ff8",
        "name": "Up/Dn Tile",
        "order": 21,
        "width": 1,
        "height": 1,
        "format": "<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n<div class top\nstyle=\"background-image: url('/png/Up_Arrow_Button.png');\n cursor: pointer;\n background-repeat: no-repeat;\n background-color: transparent;\n background-size: 90% 90%; \n width: 90%; \n height: 90%\"\nng-mousedown=\"mousedownT($event)\"\nng-mouseup=\"mouseupT($event)\"\n></div>\n\n<div class bottom\nstyle=\"background-image: url('/png/Dn_Arrow_Button.png');\n cursor: pointer;\n background-repeat: no-repeat;\n background-color: transparent;\n background-size: 90% 90%;\n width: 90%; \n height: 90%\"\nng-mousedown=\"mousedownB($event)\"\nng-mouseup=\"mouseupB($event)\"\n></div>\n\n<script>\n(function(scope) {\n scope.mousedownT = function(event) {\n event.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n scope.send({topic:\"Top\", payload: true})\n }\n scope.mouseupT = function(event) {\n event.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n scope.send({topic:\"Top\", payload: false})\n }\n scope.mousedownB = function(event) {\n event.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n scope.send({topic:\"Bottom\", payload: true})\n }\n scope.mouseupB = function(event) {\n event.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n scope.send({topic:\"Bottom\", payload: false})\n }\n})(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 250,
        "y": 2290,
        "wires": [
            [
                "443a53aea21939e3"
            ]
        ]
    },
    {
        "id": "62350f50d4b09ff8",
        "type": "ui_group",
        "name": "Radio",
        "tab": "554e77d51ad13f2d",
        "order": 1,
        "disp": false,
        "width": 24,
        "collapse": false,
        "className": ""
    },
    {
        "id": "554e77d51ad13f2d",
        "type": "ui_tab",
        "name": "PCR1000",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

If I might ask, what does this actually do? [quote="UnborN, post:25, topic:52846"]  
added `cursor:pointer` css style  
[/quote]

Now the frequency adjustment looks a hang of a lot better on the front-end:

![screenshot-127.0.0.1_1880-2021.11.12-15_29_05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d63851620f1c175fe8cff7f07ada496fc1010219.png)

As an offspring from this, do you know whether it is possible to make a button split vertically instead of horizontally? (as in Left/Right arrows, opposed to Up/Down)

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:** [12 November 2021 16:04 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/27 "2021-11-12T16:04:43Z")

</div>

very nice 👍

`cursor:pointer` changes the mouse cursor for the element.  
A more complete list [here](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)

> [@eddee54455](#):
>
> Left/Right arrows

Try with a container div set to `display:flex` ? (i can never remember these styles) .. had to look them up  
and `transform: rotate()` ..

**Example :**

```auto
[{"id":"d52180de48148c7f","type":"ui_template","z":"5847b7aa62131d37","group":"62350f50d4b09ff8","name":"Up/Dn Tile","order":21,"width":"2","height":1,"format":"<div id=\"{{'my_'+$id}}\" style=\"{{'color:'+theme.base_color}}\"></div>\n\n\n<div style=\"display:flex; flex-direction:row; width: 100%; height: 100%;\">\n\n <div \n style=\"background-image: url('/png/Up_Arrow_Button.png');\n transform: rotate(-90deg);\n cursor: pointer;\n background-repeat: no-repeat;\n background-color: transparent;\n background-size: 90% 90%;\n width: 90%; \n height: 90%\"\n ng-mousedown=\"mousedownT($event)\"\n ng-mouseup=\"mouseupT($event)\"\n ></div>\n\n <div \n style=\"background-image: url('/png/Dn_Arrow_Button.png');\n transform: rotate(-90deg);\n cursor: pointer;\n background-repeat: no-repeat;\n background-color: transparent;\n background-size: 90% 90%;\n width: 90%; \n height: 90%\"\n ng-mousedown=\"mousedownB($event)\"\n ng-mouseup=\"mouseupB($event)\"\n ></div>\n\n</div> \n\n\n\n<script>\n(function(scope) {\n scope.mousedownT = function(event) {\n event.target.style.backgroundImage = \"url('/png/Up_Arrow_Button1.png')\";\n scope.send({topic:\"Top\", payload: true})\n }\n scope.mouseupT = function(event) {\n event.target.style.backgroundImage = \"url('/png/Up_Arrow_Button.png')\";\n scope.send({topic:\"Top\", payload: false})\n }\n scope.mousedownB = function(event) {\n event.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button1.png')\";\n scope.send({topic:\"Bottom\", payload: true})\n }\n scope.mouseupB = function(event) {\n event.target.style.backgroundImage = \"url('/png/Dn_Arrow_Button.png')\";\n scope.send({topic:\"Bottom\", payload: false})\n }\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":550,"y":620,"wires":[["d1e9cc937a2a6269"]]},{"id":"d1e9cc937a2a6269","type":"debug","z":"5847b7aa62131d37","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":620,"wires":[]},{"id":"62350f50d4b09ff8","type":"ui_group","name":"Radio","tab":"554e77d51ad13f2d","order":1,"disp":false,"width":24,"collapse":false,"className":""},{"id":"554e77d51ad13f2d","type":"ui_tab","name":"PCR1000","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [11 January 2022 16:04 UTC](https://discourse.nodered.org/t/template-button-how-do-i-change-its-appearance/52846/28 "2022-01-11T16:04:46Z")

</div>

Closed on 11 January 2022 16:04 UTC

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

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