Hello guys. I wonder if it is possible to change color and size of 1 ui_text widget (NOT all widgets in a group)? I succeeded with ui_template, but all widgets in the group changed. I think that it is possible to do with "msg.ui_control", but I don't know exactly how to do that. Can anyone give me an example? Where can I find what properties can be changed, and possible values. (I don't know much about HTML and CSS)
You should have something like this as your CSS selector;
Given that -
Tab Name: CSS Tester
Group Name : Test HTML
CSS <style>
#CSS_Tester_Test_HTML .nr-dashboard-text p {
background-color: red;
height: 2.0em;
font-size: 1.5em;
}
This will change the size etc. of the text in the widget. Have a look at Elements in the console (usually right click on the bit you are interested in in the ui tab of the browser and select 'inspect') to find any other parts of the ui-card-panel you want to change
@Buckskin , thanks for your reaction to my question. As I said, I am not an expert at this. So same more information to this subject would be welcome.
- Where do I place this code? Should it be in a ui_template node or a function node?
- What is the variable 'p' exactly refering to?
I already found out about inspecting inspecting web pages.
yes it should go in a ui-template
the html <p>
If you "inspect" the text you see something like this.
<p class="label" ng-bind-html="me.item.getLabel()">My text is</p>
<p class="value" ng-bind-html="me.item.getText()">Hello World!</p>
The label and text are each contained in HTML <p> ... </p> tabs
Now try right clicking in the inspector on the p tag and select Copy CSS path (That's what I do in Firefox, other browsers may be slightly different). You should get something like this
html body#nr-dashboard.nr-dashboard-theme.layout-column md-content._md.layout-column.flex section.layout-row.flex md-content._md.flex div#Tab_Demo.masonry-container ui-card-panel#Demo_Demo.visible div.nr-dashboard-cardpanel.layout-column div#Demo_Demo_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-text._md.layout-row.layout-align-space-between-center.nr-dashboard-widget-text.visible p.label
My UI tab is called Demo and my group is also called Demo, so the bit of the CSS path which is specific to the group is #Demo_Demo.visible (<div id="Demo_Demo" class="visible"> ... <div>)
And the text widget is a <div class="nr-dashboard-text"> ... </div>
So the CSS we need to specify in a template node is
<style>
#Demo_Demo p {
color: red;
height: 2.0em;
font-size: 1.5em;
}
</style>
Note that this will turn all <p> text in the group red, you can confine the effect to just ui-text widgets with
<style>
#Demo_Demo .nr-dashboard-text p {
color: red;
height: 2.0em;
font-size: 1.5em;
}
</style>
Edit - I see you asked about changing just one text widget.
Use the node id like this
<style>
[node-id="5020df5c1134df77"] p.value {
color: red;
height: 2.0em;
font-size: 1.5em;
}
[node-id="5020df5c1134df77"] p.text {
color: yellow;
height: 2.0em;
font-size: 1.5em;
}
</style>
@jbudd , thanks for your extended explanation. I tried last solution you offered for only ONE widget. Copied the code and changed it to right node-id, and put it in a template node "Style". But it doesn't look that it has any effect on ui_text node "Totaal Verbruik".
Can you post a simple flow with just your template and two text elements so we can fix it?
[{"id":"db093249f6a5ce36","type":"ui_text","z":"79c709b9.e9273","group":"44bfa717147f7502","order":12,"width":2,"height":1,"name":"Totaal Verbruik","label":"kWh","format":"{{msg.payload | number: 1 }}","layout":"row-center","className":"","x":1220,"y":740,"wires":[]},{"id":"00720bcfeba0d4dc","type":"inject","z":"79c709b9.e9273","name":"Boot","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":910,"y":780,"wires":[["482040e7803f2929"]]},{"id":"482040e7803f2929","type":"template","z":"79c709b9.e9273","name":"Style","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n [node-id=\"db093249f6a5ce36\"] p.value {\n color: red;\n height: 2.0em;\n font-size: 1.5em;\n }\n [node-id=\"db093249f6a5ce36\"] p.text {\n color: yellow;\n height: 2.0em;\n font-size: 1.5em;\n }\n</style>","output":"str","x":1050,"y":780,"wires":[[]]},{"id":"5859353695b25b46","type":"inject","z":"79c709b9.e9273","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"12.3","payloadType":"num","x":1000,"y":740,"wires":[["db093249f6a5ce36"]]},{"id":"44bfa717147f7502","type":"ui_group","name":"Energy flow (kWh)","tab":"5c9d4b33.90508c","order":5,"disp":true,"width":"8","collapse":false,"className":""},{"id":"5c9d4b33.90508c","type":"ui_tab","name":"EBS -Vandaag- ","icon":"home","order":1,"disabled":false,"hidden":false}]
Put your CSS in a template node. Edit - A Dashboard Template node!
You don't have to connect any wires to it.
@jbudd , thanks very much. I had to change "p.text" to "p.label", but now it's working!!
I will show you final result later on. 
Also beginning to get a grip on all of this too!!!
@jbudd , this is what I tried to make. It's not GREAT, but good enough for me.
@zenofmud , @Buckskin , thanks for the help from all of you.!!!
3 Likes
Ah, you spotted my "deliberate" mistake! 
Nice looking dashboard, well done.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
