# CSS School, buttons and things not making sense

**URL:** https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986
**Category:** Dashboard
**Created:** [17 April 2020 00:12 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986 "2020-04-17T00:12:32Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 11:19 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/21 "2020-04-18T11:19:15Z")

</div>

Yes, I get the cascading. For now I don't want them to cascade. Or I think I don't.

I messed around for a long time to get the _volume_ one and I am happy.  
Problem: I can't set a payload to be sent when I click it. Work in progress.

The `oXo` is a `template` node which is the right size/shape.  
Again: I can't/don't get a payload when pressed.  
I added the extra (group 3) but when I do that, the button's size and shape change.

So I am getting very frustrated that _Group2_ size/shape is as wanted.  
(Save nothing happens when I click)  
So I add the extra line (but refer it to the copy and it is in _Group3_, but it all gets messed up.

I am seriously at a loss to what is happening.

Does that help with what I am doing and why?

AARRGGHH!!!!

Ok..... Got ya!

I'll dig a bit more.

I got the pre-fixes and appendages mixed up.

SILLY ME!

But I still am not getting anything when I click on the button.

---

<div class="post-metadata">

### Author: ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [18 April 2020 14:22 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/22 "2020-04-18T14:22:31Z")

</div>

Quick addition that I hope might help for styling.  
Defining a style for

```auto
button {
    //sample
    background-color: “black”;
}

```

will apply the style to all `<button>`s on the page.

```auto
.button {
    //sample
    background-color: “yellow”;
}

```

Will instead set the style only for elements with the button class, but since that name is just a choice for yourself it doesn’t have to apply to just buttons. Instead that styling is placed on all elements thar you give the `class="button"` to.

```auto
#thisSpecificButton {
    //sample
    background-color: “red”;
}

```

This style will only apply to elements with the ID set to “thisSpecificButton”. You’re only supposed to use an ID once on a page. It won’t give an error if you don't (sadly) but it might give you a whole pile of other crap to deal with.

In summary, styling a tag (`button`) will apply the style to all elements with that _tag_ on a page, styling a class (`.button`) will apply the style to all elements with that _class_, styling an if (`#thisSpecificButton`) will apply the style to all elements with that _id_ (which should be one at most).

———  
As for sending the payload, that’s an angular attribute you’ve to add/set, done through the `ng-click="send({foo: 'bar'})"` structure. If you don’t add that, nothing will be send back to the output of the node.

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [18 April 2020 15:13 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/23 "2020-04-18T15:13:09Z")

</div>

[This thread](https://discourse.nodered.org/t/customize-dashboard-css/23139) makes interesting CSS reading...  
Don't know if you have seen it Andrew.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 21:51 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/24 "2020-04-18T21:51:11Z")

</div>

> [@afelix](#):
>
> As for sending the payload, that’s an angular attribute you’ve to add/set, done through the `ng-click="send({foo: 'bar'})"` structure.

Ummmmm.

`{foo:'bar'}` as in `{payload: 'something'}`?

This is what I now have in the `template` node:

```auto
<style>
/* Best so far to fit 1x1 area */
.buttonX {
  border: none;
  border-radius: 8px;
  text-align: center;
/* background-color: #097479; */ /* Green */
  background-color: black;
  color: white; /* "Font" colour */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px; /* Was 0 20 */
  cursor: pointer;
}
</style>
<button class="buttonX" click="send({topic:'clicked', payload:'button was clicked'})">x-x</button>

```

(Putting aside the click part just now)  
This is what I see:

![Screenshot from 2020-04-19 07-52-51](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/354ff71aecf8474f365aa67bf9a18f62fa5852df.png)

Wow! It works.

Now to the real hard stuff.

Using `fa-icons`.

They introduce more problems - as I seem to remember.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 21:51 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/25 "2020-04-18T21:51:38Z")

</div>

Thanks Paul.

Yeah, a whole new world in which I can play - or make a big mess.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 22:01 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/26 "2020-04-18T22:01:59Z")

</div>

Ok, this is what I have now that sends two messages. (Down and Up)

```auto
<style>
/* Best so far to fit 1x1 area */
.buttonY {
  border: none;
  border-radius: 8px;
  text-align: center;
/* background-color: #097479; */ /* Green */
  background-color: black;
  color: white; /* "Font" colour */
  padding: 15px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 0px 0px; /* Was 0 20 */
  cursor: pointer;
}
</style>
<button class="buttonY" ng-mousedown="send({payload: 'Down'})" ng-mouseup="send({payload: 'Up'})">y-y</button>

```

I now have the two templates working.  
The only _problem_ is that the buttons look like `text` boxes rather than buttons when I put the mouse over them. (Needs a bit of work)

It may be good to de-activate the others to avoid confusion at this time and ultimately delete them.

I'm keeping them for now so I can see what to NOT do. 😉

And trying to get the font-awesome icons working too.

---

<div class="post-metadata">

### Author: ![shel](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shel](https://discourse.nodered.org/u/shel)
#### Post date: [18 April 2020 22:33 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/27 "2020-04-18T22:33:23Z")

</div>

I'm trying to understand your code and the colors of the buttons. If you would help me out and post your working code here it would sure help me out.  
Thanks

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 22:51 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/28 "2020-04-18T22:51:11Z")

</div>

Ok, but first an overview of what I am wanting:

I want a **universal** button which I can use to:  
a - send a message when pressed.  
b - be able to send a pulse of messages (alternating is ok) **while** pressed and stop when button released.  
c - support icons rather than only text.  
d - be _disabled_, like the normal `button` node.  
e - External setting of text, messages sent, colours and frequency of pulses.

This is a really good piece of code I have but it is still _work in progress_ as I am still not getting everything.

But for now, it is pretty good, considering what I know.

```auto
[{"id":"1af2f09d.78ede7","type":"trigger","z":"b25fd092.bcc758","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":350,"y":2220,"wires":[["a623b9cd.ea0d1"]]},{"id":"dae7b752.80137","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xYx","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.buttonZ {\n border: none;\n border-radius: 8px;\n text-align: center;\n/* background-color: #097479; */ /* Green */\n background-color: black;\n color: {{msg.colour}}; /* \"Font\" colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n<button class=\"buttonZ\" ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":180,"y":2220,"wires":[["fefe68c5.d7552","1af2f09d.78ede7","f2874f3.7e158b"]]},{"id":"a623b9cd.ea0d1","type":"function","z":"b25fd092.bcc758","name":"toggle","func":"let msg1 = {};\nlet msg2 = {};\n\nvar x = context.get(\"counter\") || 0;\nvar y = context.get(\"triggered\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg.payload = \"A\";\n msg1.payload = \"RELEASED\";\n context.set(\"triggered\",0);\n msg2.colour = \"lime\";\n return [msg,msg1,msg2];\n}\n\nif (x === 0)\n{\n msg.payload = \"B\";\n y = y + 1;\n if (y === 1)\n {\n msg1.payload = \"PRESSED\";\n context.se(\"triggered\",y);\n }\n msg2.colour = \"red\";\n} else\nif (x === 1)\n{\n msg.payload = \"A\";\n msg2.colour = \"lime\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\n\n\nreturn [msg,null,msg2];","outputs":3,"noerr":0,"x":510,"y":2220,"wires":[["ceef713f.f81548"],["5a077180.9f9b3"],["dae7b752.80137"]]},{"id":"fefe68c5.d7552","type":"debug","z":"b25fd092.bcc758","name":"Internal","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":350,"y":2180,"wires":[]},{"id":"f2874f3.7e158b","type":"switch","z":"b25fd092.bcc758","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":340,"y":2260,"wires":[[],["a623b9cd.ea0d1"]]},{"id":"a3f2c8e1.068f48","type":"change","z":"b25fd092.bcc758","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":150,"y":2180,"wires":[["dae7b752.80137"]]},{"id":"ceef713f.f81548","type":"debug","z":"b25fd092.bcc758","name":"OUTPUT1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":2180,"wires":[]},{"id":"5a077180.9f9b3","type":"debug","z":"b25fd092.bcc758","name":"OUTPUT2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":530,"y":2260,"wires":[]},{"id":"7204f82c.81f198","type":"inject","z":"b25fd092.bcc758","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":2140,"wires":[["a3f2c8e1.068f48"]]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]

```

Load the code, deploy and press the `setup` button.  
Then go to the graphics side and press the button.  
See what happens. (It blinks.)  
But now I am stuck with getting the `font-awesome` icon to work, the disabled part, the single message part....

A fair way to yet go.

---

<div class="post-metadata">

### Author: ![shel](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@shel](https://discourse.nodered.org/u/shel)
#### Post date: [18 April 2020 22:51 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/29 "2020-04-18T22:51:31Z")

</div>

I got one button to sorta work so in the interest of playing nice here is the flow

```auto
[{"id":"2e26aefc.06bed2","type":"ui_template","z":"62fea0ca.1bbe38","group":"90597d23.2423b8","name":"creme rounded mybutton01","order":33,"width":3,"height":"2","format":"\n<style>\n/* Best so far to fit 1x1 area */\n.myButton11 {\n\tbox-shadow: 0px 1px 0px 0px #1c1b18;\n\tbackground:#eae0c2;\n\tbackground-color:#eae0c2;\n\tborder-radius:15px;\n\tborder:2px solid #333029;\n\tdisplay:inline-block;\n\tcursor:pointer;\n\tcolor:#505739;\n\tfont-family:Arial;\n\tfont-size:14px;\n\tfont-weight:bold;\n\tpadding:12px 16px;\n\ttext-decoration:none;\n\ttext-shadow:0px 1px 0px #ffffff;\n}\n.myButton11:hover {\n\tbackground:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);\n\tbackground-color:#ccc2a6;\n}\n.myButton11:active {\n\tposition:relative;\n\ttop:1px;\n}\n</style>\n<button class= \"myButton11\" ng-click=\"send({topic:'test old', payload:'button 11'})\" ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\">Pirate</button>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":700,"y":240,"wires":[["a9ed7e0c.03f8d8"]]},{"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}]

```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [18 April 2020 23:24 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/30 "2020-04-18T23:24:21Z")

</div>

This is the next step I have done:

(Little change, but better explained with nodes.)

```auto
[{"id":"38cd517d.0fb536","type":"ui_template","z":"b25fd092.bcc758","group":"d9a63921.b84ff","name":"Best so far xYx","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.buttonZ {\n border: none;\n border-radius: 8px;\n text-align: center;\n/* background-color: #097479; */ /* Green */\n background-color: black;\n color: {{msg.colour}}; /* \"Font\" colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px; /* Was 0 20 */\n cursor: pointer;\n}\n</style>\n<button class=\"buttonZ\" ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\">Press</button>\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":190,"y":2250,"wires":[["e96092a8.e8144","e13c2e4a.46e068","8c2a542f.45926"]]},{"id":"e96092a8.e8144","type":"debug","z":"b25fd092.bcc758","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":370,"y":2210,"wires":[]},{"id":"eec9803d.fe293","type":"inject","z":"b25fd092.bcc758","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":2170,"wires":[["ce623893.6bdb08"]]},{"id":"ce623893.6bdb08","type":"change","z":"b25fd092.bcc758","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":2210,"wires":[["38cd517d.0fb536"]]},{"id":"e13c2e4a.46e068","type":"trigger","z":"b25fd092.bcc758","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":360,"y":2250,"wires":[["59a76ffd.36cbe8"]]},{"id":"59a76ffd.36cbe8","type":"function","z":"b25fd092.bcc758","name":"toggle","func":"let msg1 = {};\n\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg1.colour = \"lime\";\n msg.payload = \"A\";\n return [msg,msg1];\n}\n\nif (x === 0)\n{\n msg1.colour = \"red\";\n msg.payload = \"B\";\n} else\nif (x === 1)\n{\n msg1.colour = \"lime\";\n msg.payload = \"A\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"x":540,"y":2250,"wires":[["e83c2a45.e115f8"],["38cd517d.0fb536"]]},{"id":"8c2a542f.45926","type":"switch","z":"b25fd092.bcc758","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":350,"y":2290,"wires":[["d40d3833.9b044"],["59a76ffd.36cbe8","963bdf65.68597"]]},{"id":"2aff6364.caae34","type":"comment","z":"b25fd092.bcc758","name":"Blinky button.","info":"","x":360,"y":2170,"wires":[]},{"id":"e83c2a45.e115f8","type":"function","z":"b25fd092.bcc758","name":"TOGGLE OUTPUT","func":"\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":2230,"wires":[[]]},{"id":"d40d3833.9b044","type":"function","z":"b25fd092.bcc758","name":"BUTTON PRESSED","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":2270,"wires":[[]]},{"id":"963bdf65.68597","type":"function","z":"b25fd092.bcc758","name":"BUTTON RELEASED","func":"\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":2310,"wires":[[]]},{"id":"d9a63921.b84ff","type":"ui_group","z":"","name":"Group 3","tab":"273de47d.2d2bac","order":3,"disp":true,"width":"7","collapse":false},{"id":"273de47d.2d2bac","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 00:22 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/31 "2020-04-19T00:22:56Z")

</div>

Next paragraph:

## Inline CSS - stuck.

(w3school account still locked - sorry)

Ok, I get that the code needs to be _inside_ the `<style>` part of the line.

eg:  
`<h1 style="color:blue"> This paragraph will be blue </p> </body>`  
(Or I hope that is correct.

But now I am getting stuck when the lines become l l l l l o o o o o o o n n n n n n n g g g g g g g e e e e e e r r r r r r r r and longer.

I know there is a horizontal scroll, but it is difficult for me to parse at this stage.

I guess there isn't a way to split the line into multiple lines?

I've tried to get the next level of the _CASCADING_ part working, but am (again) stuck

Code:  
(This is for the whole page - as it were.)

```auto
[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.baseline {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: {{msg.colour}}; /* \"Font\" (forground) colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":640,"y":150,"wires":[[]]},{"id":"474463e0.9fa954","type":"inject","z":"8bb4de19.f72c88","name":"Setup","topic":"","payload":"lime","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":150,"wires":[["c2f01962.ad363"]]},{"id":"c2f01962.ad363","type":"change","z":"8bb4de19.f72c88","name":"Set","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"},{"t":"set","p":"text","pt":"msg","to":"This","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":150,"wires":[["2c4eab16.b45734"]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

```

So it sets green text and back background.

This is the code for the button.

```auto
[{"id":"e4b5eb8.2799498","type":"debug","z":"8bb4de19.f72c88","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":560,"y":380,"wires":[]},{"id":"193c7b50.6968d5","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"","order":1,"width":"1","height":"1","format":"<button class=\"baseline\" ng-mousedown=\"send({payload: 'Down'})\" ng-mouseup=\"send({payload: 'Up'})\">Press</button>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":400,"y":380,"wires":[["ffa80d13.3b74e","96e75956.1e94a","e4b5eb8.2799498"]]},{"id":"ffa80d13.3b74e","type":"trigger","z":"8bb4de19.f72c88","op1":"Down","op2":"0","op1type":"str","op2type":"str","duration":"-350","extend":false,"units":"ms","reset":"Up","bytopic":"all","name":"Repeat","x":550,"y":420,"wires":[["e1481326.12a3a8"]]},{"id":"96e75956.1e94a","type":"switch","z":"8bb4de19.f72c88","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Down","vt":"str"},{"t":"eq","v":"Up","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":540,"y":460,"wires":[[],["e1481326.12a3a8"]]},{"id":"e1481326.12a3a8","type":"function","z":"8bb4de19.f72c88","name":"toggle","func":"let msg1 = {};\n\nvar x = context.get(\"counter\") || 0;\nif (msg.payload == \"Up\")\n{\n context.set(\"counter\",0);\n msg1.colour = \"lime\";\n msg.payload = \"A\";\n return [msg,msg1];\n}\n\nif (x === 0)\n{\n msg1.colour = \"red\";\n msg.payload = \"B\";\n} else\nif (x === 1)\n{\n msg1.colour = \"lime\";\n msg.payload = \"A\";\n}\n\nx = (x + 1) % 2;\n\ncontext.set(\"counter\",x);\n\nreturn [msg,msg1];","outputs":2,"noerr":0,"x":730,"y":420,"wires":[[],["193c7b50.6968d5"]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

```

They are **not** connected.  
So: obviously it doesn't work because the _feedback_ needs to go to the first part of the code.  
That isn't practical as I don't want all buttons flashing (blinking) when I press (and hold) one.

So I it is wired up _correctly_ for the needs, but getting the second part to accept the input is where I am (now) stuck.

I'm guessing I need to use the `inline` coding to do that. But.... How?

As I said: `inline` needs to be _contained_ in the `style` part.  
There is no `style` part in the second part.  
So, (semi-rhetorical) do I just wrap that line in a `<style>` bracket?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 April 2020 00:34 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/32 "2020-04-19T00:34:37Z")

</div>

> [@Trying\_to\_learn](#):
>
> Ok, I get that the code needs to be _inside_ the `<style>` part of the line.
> 
> eg:  
> `<h1 style="color:blue"> This paragraph will be blue </p> </body>`

Inside the `<style></style>` tags must only be CSS (e.g. `.myClass{}`

> [@Trying\_to\_learn](#):
>
> But now I am getting stuck when the lines become l l l l l o o o o o o o n n n n n n n g g g g g g g e e e e e e r r r r r r r r and longer

Html and CSS do not need to be on one line. Anything inside quotes (like the click="send(...)" ) Should be on one line

EDIT...  
I miss read - you are referring to a style `attribute` inside a html element (even though you wrote "`<style>`" which is not inline)

So, why can't you make a CSS class instead? Why do you have soo many style properties that cause you to have such long lines?

When you get back into your CSS class, perhaps you read about multiple classes. Then you'll figure out you can do things like this...

```auto
<button class="rounded red large">click me I'm big red and rounded<button>

<button class="rounded blue small">click me I'm a small blue button<button>

```

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 00:50 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/33 "2020-04-19T00:50:52Z")

</div>

Just to declare what I am doing and why:  
`baseline` is the name for the page layout/_style_?  
and in _subsequent_ (lower down) nodes, the buttons will be made from it's definitions.  
`baseline` is a working title until I get a better handle on how things are working.

> [@Steve-Mcl](#):
>
> Inside the `<style></style>` tags most only be CSS (e.g. `.myClass{}`

(Forgiving the spelling mistake)

Yeah. Ok.

I have _edited_ the code in the lower (second) `template` node like this:

```auto
<style>

<button class="baseline" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

</style>

```

and so I need to use {msg.colour} to become what was defined higher up by `color:` in the other `template` node.

There is is clearly (well: maybe still not that clear to me) in the line:  
` color: {{msg.colour}}; /* "Font" (forground) colour */`

I'm stuck.

Oh, but what I did see/notice:  
If I leave the (`template`) node as shown and deploy, I don't see a thing.  
Yeah, because I haven't declared any `<style>`.  
But as it is `inline` and not defined, shouldn't it default to the higher order's values?

That's where the _cascading_ part comes in - yes?

Yeah, I need taking out the back and shooting for not getting this. But this is really a whole new world for me.

UPDATE:

Ok, modified the code in the `template` node to:

```auto
<style>
.baseline{ color: {{msg.colour}};}

</style>

<button class="baseline" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

```

Which is probably better.

I see the button. But still no colour change when button pressed.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 April 2020 01:08 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/34 "2020-04-19T01:08:28Z")

</div>

> [@Trying\_to\_learn](#):
>
> Ok, modified the code in the `template` node to:
> 
> ```auto
> <style>
> .baseline{ color: {{msg.colour}};}
> 
> </style>
> 
> <button class="baseline" ng-mousedown="send({payload: 'Down'})"  
> ng-mouseup="send({payload: 'Up'})">Press</button>
> 
> ```
> 
> Which is probably better.
> 
> I see the button. But still no colour change when button pressed.

That's not really how you should be doing it.

```auto
<style>
.button {/*button styles*/}
.inactive{ color: grey;}
.active{ color: blue;}
</style>

<button class="button {{msg.state}}" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

```

... then send what state you want the button via msg.state ("active" or "inactive" in this example).

I'm not saying it'll work straight away (I don't know how the ui\_template reacts to messages) BUT the idea is you setup all your CSS styles and apply classes to you elements (either statically or dynamically) - no messing about with parts of the CSS or styles. Just set the classes.

Then you can move away from worrying about changing colours in your code - you just edit the CSS & EVERYTHING CONTINUES TO WORK

Didn't someone give you a sample of controlling the classes a couple of days back? The thread that started you off down this rabbit hole)

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 01:28 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/35 "2020-04-19T01:28:26Z")

</div>

> [@Steve-Mcl](#):
>
> That's not really how you should be doing it.
> 
> ```auto
> <style>
> .button {/*button styles*/}
> .inactive{ color: grey;}
> .active{ color: blue;}
> </style>
> 
> <button class="button {{msg.state}}" ng-mousedown="send({payload: 'Down'})"  
> ng-mouseup="send({payload: 'Up'})">Press</button>
> 
> ```
> 
> ... then send what state you want the button via msg.state ("active" or "inactive" in this example).

I do appreciate the reply.

But I get derailed because:  
you open the `<style>` and have an `.inactive` and `.active` line. Ok. I'll let that ride for now.

But then you have: `"button {{msg.state}}"`

Where is the association between {{msg.state}} and .active/.inactve?

I'm stuck (for now) on the colours. (foreground)

I'm looking at the w3school stuff again, and though I can get it, I am (for reasons unknown to me) there is no continuity.

So I tried that - slight modifications - and it doesn't work.

```auto
<style>
.button{}
.red{color:red;
.lime{color:lime};
</style>

<button class="button {{msg.colour}}" ng-mousedown="send({payload: 'Down'})"  
ng-mouseup="send({payload: 'Up'})">Press</button>

```

And the GUI side of things gets messed up from (green) to (red)

![Screenshot from 2020-04-19 11-23-22](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e022ae986eba41db5449caf4bbea4d5d6c33ffb2.png)

Ignore the text. That is a visual indication to me the output is cycling.

The _new_ button does blink/flash. But not the colours I want.  
It only flashes red and grey colours.

Sorry ~~Paul.~~ Steve.

I'm not trying to be difficult.

I just somehow am not seeing things as others.  
See?

It seems I can only have 1 part of the many parts working at once.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 01:40 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/36 "2020-04-19T01:40:34Z")

</div>

Ah!

Ok.

Kinda get it.

So, in your example the message received by the `template` node is either:  
`msg.state = active` or `msg.state = inactive`.

With you.

So I changed all that to `msg.colour` and was sending:  
`msg.colour = red` or `msg.colour = lime`  
with the two lines above being changed as I showed.

```auto
<style>
.button{}
.red{color:red;
.lime{color:lime};
</style>

```

Ok. Got it.

But the button flashed `red` and (I think) `grey`. Definitely NOT `lime`.

I changed the `lime` to `green`. Same.

So something else is going on. But then there is the GUI side which basically derails the whole thing there too.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 April 2020 01:50 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/37 "2020-04-19T01:50:14Z")

</div>

> [@Trying\_to\_learn](#):
>
> Where is the association between {{msg.state}} and .active/.inactve?

> [@Steve-Mcl](#):
>
> then send what state you want the button via msg.state ("active" or "inactive" in this example).

You're missing a whole bigger picture.

Imagine this scenario (it happens)

You setup 2000hrs of html, littered with style attributes, getting all nice and pretty.

Then you (or the boss) needs all buttons and links that are bright blue to be light grey.

So you change 422 style attributes.

Them you realise some of this stuff is done in code. So you search you dynamic code for "blue" and for "#0000ff" then a while later you find it was actually "#0000EE".

So 47 hours later you are done.

Then the boss says, I need every button height adjusted to be finger friendly - oh and add some nice shadows.

This is not productive stuff, it's error prone, it's all over the place (i.e. your have colour coming through from code in `msg.color`, you have some things styled by attributes, etc etc)

Here's the flip side...

You setup 2000hrs of html, getting all nice and pretty. No inline styles, everything done in CSS

Then you (or the boss) needs all buttons and links that are bright blue to be light grey.

you spend 5 minutes changing the classes

  

I know it's hard to believe or see why sometimes people suggest a way of doing something - because people cannot convey in a short forum reply all the reasons they tell you to do something a certain way.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 April 2020 01:55 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/38 "2020-04-19T01:55:21Z")

</div>

> [@Trying\_to\_learn](#):
>
> I changed the `lime` to `green` . Same

Try not to name classes like the actual thing you want. One day you may decide you don't like lime or you want your errors to be dark orange.

A better way of doing classes is the state you are trying to achieve.

E.g., name your classes like `success`, `error`, `warning`

That way, in the future, you don't need to search and replace all the limes, just update the `success` class.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 02:01 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/39 "2020-04-19T02:01:42Z")

</div>

I think we are both reading the same book, but just on different pages.

I am at page 1. (probably not even done reading it.)

Maybe not even past opening the book.

I get the idea of the _Cascading Style Sheets_. It is good. I get the hierarchy.

You define the _book_ layout.  
Then you can define _page_ layouts.  
Then you can define _paragraph_ layouts.

So, this is my take on that at this stage:

```auto
[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.baseline {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: {{msg.colour}}; /* \"Font\" (forground) colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":640,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

```

All by buttons are `black` (backgrounds) and their text is `lime`.

I then create a button from said template:

```auto
[{"id":"2c4eab16.b45734","type":"ui_template","z":"8bb4de19.f72c88","group":"d3bcf885.d668a","name":"Base Line","order":8,"width":"1","height":"1","format":"<style>\n/* Best so far to fit 1x1 area */\n.baseline {\n border: none;\n border-radius: 8px;\n text-align: center;\n background-color: black; /* Backfound colour */\n color: {{msg.colour}}; /* \"Font\" (forground) colour */\n padding: 15px 0px;\n text-decoration: none;\n display: inline-block;\n font-size: 14px;\n margin: 0px 0px;\n cursor: pointer;\n}\n</style>\n\n","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":640,"y":150,"wires":[[]]},{"id":"d3bcf885.d668a","type":"ui_group","name":"Group 1","tab":"de5134a7.f0a0d","order":1,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":6}]

```

But it is a button.  
It's _text_ colour needs to be changed from an outside part.

I got it working but the problem with how I did it is:  
ALL buttons would change their colour as I pressed that one button.

So I need to go from _External_ (or maybe _Internal_) CSS to _Inline_ for the buttons.

That way - if I get it right:  
The button colours are set by the higher node at start up.

As I press a button it gets a signal from _else where_ and changes its colour.

For now, that is what I would like to do.

Recap:  
I have several buttons on a page all _defined_ by ONE `template` node.  
(in my example: `baseline`.)

As a button is pressed, its colour changes. None of the other buttons change.

I can post what I have as the overall general flow which has the problem of changing all button colours if you want and you can show me what to edit to get each button to work locally.

I see you have posted something else, so to not trip you on with mistimed posts, I'll stop now.

---

<div class="post-metadata">

### Author: ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [19 April 2020 02:04 UTC](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986/40 "2020-04-19T02:04:36Z")

</div>

> [@Steve-Mcl](#):
>
> Try not to name classes like the actual thing you want. One day you may decide you don't like lime or you want your errors to be dark orange.

Yes, I see that, but at this stage/level, I seem to be having trouble with even that.

Alas (again digressing to the w3school site) their examples are so contrived..... I can do them and was going through them quite easily. Even to my surprise.

I think the reason I was doing that was because they were **SO** contrived they have little practical use.

I don't think what I am wanting to do is outside (or even near the edge) of what CSS is supposed to do.

Yet, I can't translate any of their examples to what I need.

[Previous page](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986.md?page=1)

[Next page](https://discourse.nodered.org/t/css-school-buttons-and-things-not-making-sense/24986.md?page=3)