Hi!
I’d like to make a GUI with a header and a footer.
Now I have to add the groups on every page with the same functionality, and the code looks very disgusting.
Is it possible to add a new feature that enables a customizable header and footer?
Using the ui_template you should be able to inject code into the section of the site so you could possibly add thing that would then appear on every page ? - Or at least place all the common code there and then only add some smaller fragments to each page.
If you want total control there are other dashboards available such as the node-red-contrib-uibuilder project that provides a lightweight framework that you can then bring whatever libraries you like.
I figured out how to get an image/ logo into my header, but my header name is on top of it. Is there a way to position the header name? I did notice that the size of the image = the size of the name.
Thanks,
Mike
Sorry not quite sure what you mean. Do you have a screenshot or something that shows the problem ?
I want the text.. Just to the right of the image.
can you provide the part of your flow creating the header/footer? (remember to use the backtic's before and after the flow)
[{"id":"ed078032.ffab7","type":"ui_template","z":"cbfed81f.36c5d8","group":"faaf5ece.888c1","name":"","order":0,"width":0,"height":0,"format":"<style>\n .md-toolbar-tools h1{\n background-image: url(\"/image/nsk1.png\"), no-repeat;\n color: white;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":80,"y":40,"wires":[[]]},{"id":"c433379f.740438","type":"ui_chart","z":"cbfed81f.36c5d8","name":"","group":"faaf5ece.888c1","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":210,"y":40,"wires":[[],[]]},{"id":"faaf5ece.888c1","type":"ui_group","z":"","name":"Default","tab":"5bc43eb1.b0715","disp":true,"width":"6","collapse":false},{"id":"5bc43eb1.b0715","type":"ui_tab","z":"","name":"Home 12345","icon":"dashboard"}]
Set the background image on .md-toolbar-tools instead of .md-toolbar-tools h1 and use
background-repeat: no-repeat;
background-position: 60px 40px;
background-size: 60px 50px;
Note the numbers are off, you will haave to play with them, use a code inspector to figure ot the size you want..
2 Likes
Thank you @zenofmud!
Is .md-toolbar-tools h1 where I can control the bar title? I would like to center it vertically. I would also like to make the bar a little thinner.
One of the things I do when playing with CSS settings is to add border: solid 1px red; to each of the CSS selectors I'm trying to play with. So in this case, I might add that to .md-toolbar-tools h1 and add border: solid 1px green; to .md-toolbar-tools so I can see which block I'm working with. You can change the thickness to see the better.
Remember that the H1 element is inside the md-toolbar-tools div wo it is constrained by it's properties unless you override them. You will need to play with height, width and text-align
2 Likes
Thanks again @zenofmud!
I think that your tips will be very helpful. I tried to look at the code within node-red-dashboard to see if I could find a way to isolate my image in CSS, but didn't have any luck.
Is there a way to make my image be independent, so that I can position it between the tab selector and the h1 section?
If you mean you want the image between the hamburger menu and the text (tab-23456) then yes
you can but it will take some fudging. You could set the text-align to right then play with the width of the H1. That willl move the text away from the hambutger menu and you can position the image whre you want.
Problem solved!
<style>
.md-toolbar-tools{
background-image: url("/image/logo.png");
background-repeat: no-repeat;margin-left: 60px;
margin-left: 0;
background-size: 125px 39px;
background-position: 50px;
}
.md-toolbar-tools h1{
text-align: right;
width: 250px;
}
</style>
I don't see where to mark solved, but thanks @zenofmud!
Mike
3 Likes
You should see a check box on one of your posts you can click
I wish I had one, but I don't. I wonder if it is because I didn't start the topic.
Yup, you can only mark a topic you started as solved.
1 Like
No problem. Will let you work out how to make those white bits transparent 
The white bits between the letters?
