# UI template buttons inheriting node red css

**URL:** <https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333>\
**Category:** Dashboard\
**Created:** [20 May 2019 16:41 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333 "2019-05-20T16:41:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![allebarbieri](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allebarbieri/32/7116_2.png) [@allebarbieri](https://discourse.nodered.org/u/allebarbieri)\
**Post date:** [20 May 2019 16:41 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/1 "2019-05-20T16:41:42Z")

</div>

Hi,

is it possible to have a button defined in a ui\_template node inheriting the default node red css?  
In this way a change in the default theme style is automatically and properly updated in the ui\_template elements...

 ![Picture2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/15084ee41edd5997007e1ce5e799920b663338b3.png)  
PS: my template UI has the following code:

```auto
[{"id":"7de5293d.2e88d8","type":"ui_template","z":"38d689bb.d0e076","group":"f33a9d12.83f36","name":"CommonList","order":1,"width":"0","height":"0","format":"<style>\n .warned { color: orange }\n .inited { ng-init : \"\"}\n</style>\n\n<div>\n<table style=\"text-align: left; width: 100%;\"\nborder=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n<tbody>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_odl\">\n <label ng-class =\"{'warned': form_odl.$valid === false}\" >ODL</label>\n <input style=\"width:95%;\"\n ng-model=\"model_odl\" id=\"lab_odl\" name=\"input_odl\"\n ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^ODL-[0-9]{8}$/\"><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_odl, field : 'ODL', valid : form_odl.$valid}; send(out)\" style=\"width: 100px\">Carica ODL</button>\n </td>\n</tr>\n<tr>\n <td style=\"vertical-align: bottom;\">\n <form name=\"form_pn\">\n <label ng-class =\"{'warned': form_pn.$valid === false}\" >Part num./ ricetta</label>\n <input style=\"width:95%;\" ng-class =\"{'inited':msg.update_fields === true}\"\n ng-model=\"model_pn\" id=\"lab_pn\" name=\"input_pn\"\n ng-required= true ng-model-options=\"{ debounce: 200, allowInvalid: true }\" \n ng-pattern = \"/^[0-9]{11}[0-9A-Z]{2}$/\"\n ng-disabled = false><br>\n </form>\n </td>\n <td style=\"vertical-align: bottom;\">\n <button ng-click=\"out.payload = {val : model_pn, field : 'Cod.Cooltech', valid : form_pn.$valid}; send(out)\" style=\"width: 100px\">Carica PN</button>\n </td>\n</tr>\n</tbody>\n</table>\n\n</div>\n<br>\n<div>\n<hr style= \"border: 1px solid white;\">\n</div>\n\n\n\n<script>\n (function(scope) {\n // watch for msg in order to get every new message\n scope.$watch('msg', function(data) {\n if (typeof data.update_odl !== 'undefined')\n scope.model_odl = data.update_odl;\n if (typeof data.update_pn !== 'undefined')\n scope.model_pn = data.update_pn; \n });\n })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":110,"y":580,"wires":[["f11dc9c8.23b4b8","18f6b2c2.fb3ded"]]},{"id":"f33a9d12.83f36","type":"ui_group","z":"","name":"Dati test","tab":"c3bde9c2.3f2de8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c3bde9c2.3f2de8","type":"ui_tab","z":"","name":"Home","icon":"fa-home fa-lg","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 May 2019 17:47 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/2 "2019-05-20T17:47:41Z")

</div>

By default they will be as long as you set  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/235c72cf534eefcaa196bd75e4d4f9e896ae2eca.jpeg)  
in the Dashboard - Site settings tab

---

<div class="post-metadata">

**Author:** ![allebarbieri](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/allebarbieri/32/7116_2.png) [@allebarbieri](https://discourse.nodered.org/u/allebarbieri)\
**Post date:** [21 May 2019 05:30 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/3 "2019-05-21T05:30:10Z")

</div>

I already had "node red theme everywhere" setting selected but the buttons remain grey... 🤔

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [21 May 2019 05:33 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/4 "2019-05-21T05:33:39Z")

</div>

If you have experimenting with themes and find some things messing up after that, it sometimes helps if you clear browser cache.

---

<div class="post-metadata">

**Author:** ![bigdoods](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bigdoods/32/18179_2.png) [@bigdoods](https://discourse.nodered.org/u/bigdoods)\
**Post date:** [9 March 2020 14:25 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/5 "2020-03-09T14:25:35Z")

</div>

Hi - I am facing the same problem and I am looking to help restyle the buttons. Can anybody give a definitive answer if this is possible or not please?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b986f07e5df7d5778b3363c36a84ad651c8f4654.jpeg)

My code as follows:

```auto
<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <p id="status"></p>
    <p id="loaded_n_total"></p>
</form>

<script>
    function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "/fileupload");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

```

---

<div class="post-metadata">

**Author:** ![Digital-Thor](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@Digital-Thor](https://discourse.nodered.org/u/Digital-Thor)\
**Post date:** [15 March 2020 21:59 UTC](https://discourse.nodered.org/t/ui-template-buttons-inheriting-node-red-css/11333/6 "2020-03-15T21:59:24Z")

</div>

I figured out a work-around for the button problem here: [How to style UI template elements (buttons, text inputs)](https://discourse.nodered.org/t/how-to-style-ui-template-elements-buttons-text-inputs/22261/2)