# Show Footer on each tab page

**URL:** <https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158>\
**Category:** Dashboard\
**Created:** [4 May 2021 09:42 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158 "2021-05-04T09:42:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jochen1980](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@Jochen1980](https://discourse.nodered.org/u/Jochen1980)\
**Post date:** [4 May 2021 09:42 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/1 "2021-05-04T09:42:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2021 10:12 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/2 "2021-05-04T10:12:25Z")

</div>

> [@Jochen1980](#):
>
> I bet it could be done with the template control but I can't imagine how?!

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.

```auto
<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 ...

```auto
<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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [4 May 2021 12:16 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/3 "2021-05-04T12:16:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2021 12:16 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/4 "2021-05-04T12:16:31Z")

</div>

good to know 🙂

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2021 13:38 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/5 "2021-05-04T13:38:27Z")

</div>

Sounds like someone should create a custom ui node 😉

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [4 May 2021 13:41 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/6 "2021-05-04T13:41:47Z")

</div>

> [@TotallyInformation](#):
>
> someone

Bart isn't coding at the moment Julian 😉

---

<div class="post-metadata">

**Author:** ![SonoraTechnical](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sonoratechnical/32/20033_2.png) [@SonoraTechnical](https://discourse.nodered.org/u/SonoraTechnical)\
**Post date:** [10 May 2021 00:25 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/7 "2021-05-10T00:25:49Z")

</div>

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);

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [24 May 2021 00:26 UTC](https://discourse.nodered.org/t/show-footer-on-each-tab-page/45158/8 "2021-05-24T00:26:31Z")

</div>

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