Looked through the forum, went to school at W3 but I can't quite connect the dots. Played for several days and I know there is a style sheet issue but I'm not sure where it goes. Imported all sorts of examples, looked at a bunch of code but this one thing still eludes me. Also, on these buttons the colors are defined but don't show on the buttons. I'm thinking that's linked to the style sheet issue. All three buttons need to be separate at this time although if I truly understood the style sheet maybe they could be on the same sheet even though I want different colors for each.. The payload portion works and I can change the text and I'm thinking if I can sort out the color issue I will be able to change the colors as well. So, to summarize where should the style sheet go and at a minimum what should be in it? Is there a specific naming convention to make it work?
[{"id":"6ef9e3f6.838cfc","type":"ui_template","z":"62fea0ca.1bbe38","group":"90597d23.2423b8","name":"test 1","order":4,"width":3,"height":1,"format":"<style>\n/* Best so far to fit 1x1 area */\n.mybutton99 {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: #097479; /* Green */\n color: black; /* \"Font\" colour */\n/* padding: 15px 10px;*/ /* This seems to change the area of blue visible 15 - height 20 - width */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 15px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n\n<md-button class=\"mybutton99\" ng-click=\"send({topic:'clicked1', payload:'button 1 was clicked'})\">Test 1</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":130,"y":320,"wires":[["76919a80.f47aec"]]},{"id":"76919a80.f47aec","type":"debug","z":"62fea0ca.1bbe38","name":"11","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":270,"y":320,"wires":[]},{"id":"fcc4e2df.539ab","type":"ui_template","z":"62fea0ca.1bbe38","group":"90597d23.2423b8","name":"test 2","order":7,"width":3,"height":1,"format":"<style>\n/* Best so far to fit 1x1 area */\n.mybutton98 {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: #097479; /* Green */\n color: black; /* \"Font\" colour */\n/* padding: 15px 10px;*/ /* This seems to change the area of blue visible 15 - height 20 - width */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 15px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n\n<md-button class=\"mybutton98\" ng-click=\"send({topic:'clicked2', payload:'button 2 was clicked'})\">Test 2</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":380,"wires":[["388d47e7.d040a"]]},{"id":"4580aef6.3cbe8","type":"ui_template","z":"62fea0ca.1bbe38","group":"90597d23.2423b8","name":"test 3","order":10,"width":3,"height":1,"format":"<style>\n/* Best so far to fit 1x1 area */\n.mybutton97 {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: #097479; /* Green */\n color: black; /* \"Font\" colour */\n/* padding: 15px 10px;*/ /* This seems to change the area of blue visible 15 - height 20 - width */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 15px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n\n<md-button class=\"mybutton97\" ng-click=\"send({topic:'test3', payload:'button 3 was clicked'})\">Test 3</md-button>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":440,"wires":[["6871dbcb.9bb264"]]},{"id":"388d47e7.d040a","type":"debug","z":"62fea0ca.1bbe38","name":"22","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":270,"y":380,"wires":[]},{"id":"6871dbcb.9bb264","type":"debug","z":"62fea0ca.1bbe38","name":"33","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":270,"y":440,"wires":[]},{"id":"90597d23.2423b8","type":"ui_group","z":"","name":"Therm CSS","tab":"51ac6908.5837f8","order":1,"disp":false,"width":"6","collapse":false},{"id":"51ac6908.5837f8","type":"ui_tab","z":"","name":"Therm Test","icon":"fa-thermometer","order":1,"disabled":false,"hidden":false}]
