Any way to get a single header/footer that would remain consistent across all dashboards where I've inserted said header/footer?
As in - the header could contain the clock, weather, etc. --- something I'll always want to see.
The footer could contain links to several different dashboards themselves.
The middle (between header & footer) would display whatever dashboard link I have selected
This would allow each page to be easily scalable/enhanced as well as have a consistent feel, and I could easily navigate between hypothetical pages such as "Cameras", "HSM", "Sonos Controllers", "Basement", "Kitchen", etc.
I could obviously hard-code around this by putting the same header/footer on each dashboard I create, but I'm hoping there's some kind of dynamic approach I can use such that I only have to maintain the header/footer in one place.
My best thought would be a custom virtual device, which has a header/footer attribute with html code.
On each dashboard, you could insert a tile at the top/bottom that uses the attribute template, and displays the desired attribute. Depending on your need for this to be displayed local/cloud, this might have to source via a custom App or GitHub file, so that the attribute stays under the required 1024 characters
2 Likes
It'd all be local, for the record. Some of what you said is over my head, I'll have to do some research on your response, that said, thank you! This will hopefully get me moving in the right direction
This pointed me in the right direction, thanks!
Step 1: I created a "header" dashboard, that is only the stuff I want in my header
Step 2: I used iFrame Advanced custom device type, created a virtual device with the URL of the dashboard mentioned in Step 1
Step 3: On my NEW dashboard, I put a tile of the device I created in Step 2 on top. It works swimingly, except ...
Backgrounds. I'm hoping to get the header to be completely transparent such that it will show the background created in Step 3. I realize this may be illogical. Here is what I mean. In this screen shot, the TOP version of the header is just manually-inserted tiles. I set them all to transparent. The second version of the header is the embedded header. It inherits the "transparent" background from the header virtual device. I don't think there's a way to accomplish a seamless background, is there? (snort version: the embedded "header" (row 2) is covering up my background, any way to avoid this?)
Try this:
On your header dashboard add this Custom CSS (click the cog icon, select Advanced, then select CSS, paste the text below into the large, empty text box that is displayed):
html { background-color: rgba(0,0,0,0) !important; }
In the settings for your iFrame device, make sure the style preference setting includes this option:
background-color:rgba(0,0,0,0);
Finally, in the dashboard that includes the iFrame as a tile, add the following to it's Custom CSS:
#tile-35 { background-color: rgba(0,0,0,0) !important; }
changing #tile-35 to the tile id for your header tile.
This last adjustment can also be used to make any tile backgrounds transparent in the header dashboard as well, or you can define it in the Templates section of the dashboard configuration if you prefer.
2 Likes
This worked, thank you so much!!!! I have one final hurdle to overcome before I'm beyond satisfied with my dashboard overhaul. I don't think I can achieve it, but I'll start that question as a separate thread. Your help is so appreciated, thank you!! Screenshot so you can see it worked - you can tell it's the header tile rather than individual tiles due to the extra triple-dots at the upper-right \m/
2 Likes
