A bit of help with font sizes on Dashboards

Dashboard
1

This isn't too important but it is a bit "niggily" for me.

(See attached)

All those buttons!

Most of them are ok. Their names are visible.

But then there are the ones with the yellow around them.

The text is just a bit too big for the button.

The only way I can think of to fix it is to make the font a bit smaller.
But that is a but beyond me at this point.

Could someone help with this problem? (Either: The text being too big and another way of doing it or a smaller font)

Screenshot%20from%202018-11-24%2006-43-28
Screenshot from 2018-11-24 06-43-28.png1360Ă—768 404 KB

2

In the button label, you can put html, so for example you could do:

<font size="1">This is really tiny text.</font>
1 Like
3

Don't worry.

Just worked it out.

I put the text between the < > font size things.

As much as I like the reply I can't contextualise it.

This is the button code.

[{"id":"1f926c29.8b0ab4","type":"ui_button","z":"381d953d.4cf092","name":"","group":"fb4c0f10.54dea","order":55,"width":"2","height":"1","passthru":false,"label":"CameraPi T1","color":"black","bgcolor":"{{msg.background}}","icon":"","payload":"{\"DEVICE\":\"CameraPi\", \"COMMAND\":\"Test1\",\"state\":1}","payloadType":"json","topic":"","x":1330,"y":1530,"wires":[["eb6efaec.ad60f8"]]},{"id":"fb4c0f10.54dea","type":"ui_group","z":"","name":"Buttons 1","tab":"3776e46e.a7d894","order":3,"disp":false,"width":"20","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

Could you show me how to do what you say?

I'm not up to speed with all the syntax and formatting of that kind of stuff.

4

Look in the "label" field

[
    {
        "id": "84d7cecd.66369",
        "type": "ui_button",
        "z": "dc84661.55bfb98",
        "name": "CameraPi T1",
        "group": "87f4394f.43b5c8",
        "order": 55,
        "width": "2",
        "height": "1",
        "passthru": false,
        "label": "<font size=\"1\">CameraPi T1</font>",
        "tooltip": "",
        "color": "black",
        "bgcolor": "{{msg.background}}",
        "icon": "",
        "payload": "{\"DEVICE\":\"CameraPi\", \"COMMAND\":\"Test1\",\"state\":1}",
        "payloadType": "json",
        "topic": "",
        "x": 750,
        "y": 1260,
        "wires": [
            []
        ]
    },
    {
        "id": "87f4394f.43b5c8",
        "type": "ui_group",
        "z": "",
        "name": "Buttons 1",
        "tab": "ad2753ba.28b55",
        "order": 3,
        "disp": false,
        "width": "20",
        "collapse": false
    },
    {
        "id": "ad2753ba.28b55",
        "type": "ui_tab",
        "z": "",
        "name": "Master Control",
        "icon": "dashboard",
        "order": 5
    }
]
5

Again, thanks.

I'll look at it in a second.

In the mean time MY solution stucks.

This is what I did:

[{"id":"7e66d18f.090138","type":"ui_button","z":"381d953d.4cf092","name":"","group":"fb4c0f10.54dea","order":54,"width":"2","height":"1","passthru":false,"label":"<font size=\"2\">EyeSpyPi T1 </font>","color":"black","bgcolor":"{{msg.background}}","icon":"","payload":"{\"DEVICE\":\"EyeSpyPi\", \"COMMAND\":\"Test1\",\"state\":1}","payloadType":"json","topic":"","x":1118,"y":1530,"wires":[["5c68de91.f34648"]]},{"id":"fb4c0f10.54dea","type":"ui_group","z":"","name":"Buttons 1","tab":"3776e46e.a7d894","order":3,"disp":false,"width":"20","collapse":false},{"id":"3776e46e.a7d894","type":"ui_tab","z":"","name":"Master Control","icon":"dashboard","order":5}]

Which is nice on the GUI side of things.... B-U-T.....
On the edit side of things it gives this:

Which is kinda yucky.
Is there a way around that?
(If you haven't already told me in that second post)

***** MY BAD ******

I stupidly didn't fill in the NAME field at the bottom so it displayed the LABEL field.

Screenshot%20from%202018-11-24%2007-36-33
Screenshot from 2018-11-24 07-36-33.png1360Ă—768 197 KB

6

If you fill in the name field of (any) node it will show that rather than anything else.

1 Like
7

DC,

Yeah, it is an OLD bad habit I seem to have.

I am/was going through making all those buttons.

In making them I forgot to do the NAME field and only did the LABEL field.
So when something like this happens, I shoot myself in the foot.

(Somewhere in my genetic history I must be related to either a centipede or a millipede for the number of times I have shot myself in the foot)

8

Just another quick quirky thing I am seeing.

I put the line:

<font size="1">CameraPi T1</font>

In the Label field.

(Drum roll, dumb question about to happen)

Why is the text all uppercase on the web page?

9

Because that is how we have styled it by default.

1 Like
10

I found this link:

Uppercase stuff

And there is an option for:

&lt;style&gt;

    .nr-dashboard-theme .nr-dashboard-button .md-button {

        text-transform:lowercase;

    }

&lt;/style&gt;

(Written by a smart person)

Ok. I get it.

So, now curiosity kicks in: (And I don't always like it myself, but I am a curious person)

I'm guessing there is some way of having "mixed case" messages shown?
It would be weird if it can't.

Not that it is of that much importance. I just noticed it and asked.

In this recent adventure, I have found some really nice/neat stuff for buttons/templates which I shall have to research, because they look really nice.

11

If you lookup CSS text-transform you'll see all its options:
https://www.w3schools.com/cssref/pr_text_text-transform.asp