My ongoing quest with dashboards and pictures


Ok, I have got the "background picture" part working - see attached.

But now my question is how to put a picture on the OTHER part - again: see attached.

I know it will be a dumb question but not knowing the terms for what is what - well "background" is easy enough but.....

I have seen great dashboards to which I can only aspire at this time, but would like to understand how to make, but when I asked, I didn't get a reply. (Sulk - kidding)

And "displays" like 7 segment displays and the old "nixi tube" type. Very nostalgic but also very nice.

I am also wanting to add icons but again am only in the shallow end and am only starting out with them.

I need to make a full GUI screen for remote control of a system and though the background picture is nice, the rest of the screen where the things are kind of ...... stops it being as nice as it could be.

Adding pictures to the other area would go a fair way to make it that much better.

Thanks in advance.

What do you call the other part?



see here - Getting image in dashboard



You can look at the CSS styles of any of the dashboard elements using the browser’s Dev Console (F12). Use the “Select Element” button in the upper left (at least on Chrome) and click the “background” of the group you are interested in. You can even experiment with various styles (including the background-* styles) until you get it looking the way you want. Then you can put the same CSS directives inside a ui_template node – just be aware that your styles will apply across all dashboard elements and pages, and can cause conflicts with (or be overridden by) the current theme styling.

1 Like


I shall try to get my head around that.