Show Footer on each tab page

Dashboard
1

Hi,
I would like to show a footer on each dashboard page.
I bet it could be done with the template control but I can't imagine how?!
Could anybody please give me some help?

BR
Jochen

2

Yes it can but as you probably know, a template node puts a card onto the dashboard (meaning if you add a ui template node, you will have an extra card in the layout)

If you already have a template node on your "home" page, then you can simply add the below to that template.

<style>
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
    }
</style>

<script>
    $("#nr-dashboard-footer").append('<div class="footer"><p>My Footer</p></div>');
</script>

Alternatively, if you have to add a ui-template node (because you dont have one on your home page) then you could hide the card ...

<style>
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: red;
        color: white;
        text-align: center;
    }
</style>

<script>
    //append a custom footer into #nr-dashboard-footer
    $("#nr-dashboard-footer").append('<div class="footer"><p>My Footer</p></div>');
    //hide this card. NOTE: a960b1e5.8aec is the Node id as seen in the INFO panel on the sidebar
    $('[node-id="a960b1e5.8aec"]').hide(); 
</script>

NOTE: both of these work but I would consider them hacks.

As there is an element named nr-dashboard-footer (check your browsers devtools) I suspect there might be a better solution.

3 Likes
3

That element is there "to be hacked" for exactly this purpose - so yes - appending something to it is the way to go.

2 Likes
4

good to know :slight_smile:

5

Sounds like someone should create a custom ui node :wink:

6

Bart isn't coding at the moment Julian :wink:

3 Likes
7

Thank you gentlemen. That was handy... Thanks for leaving it out there to hack.

if you want the footer color to match the title bar color just use:
background-color: var(--nr-dashboard-widgetColor);

4 Likes
8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.