# Portal 2 - Set Different Colour for Banner area

**URL:** <https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686>\
**Category:** Flow Classic\
**Tags:** portal\
**Created:** [May 13, 2024, 2:47pm UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686 "2024-05-13T14:47:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mew](https://avatars.discourse-cdn.com/v4/letter/m/7C9FD7/32.png) [@mew](https://forum.novacura.com/u/mew)\
**Post date:** [May 13, 2024, 2:47pm UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/1 "2024-05-13T14:47:54Z")

</div>

In Portal 1, we were able to adjust the banner colour in the Portal to match our company branding guidelines. Is there a way to do similar in Portal 2?

Currently only option I found was to change the entire background. But we require that the page background be the default colour, which only the header/banner area have a different colour.

---

<div class="post-metadata">

**Author:** ![rovech](https://avatars.discourse-cdn.com/v4/letter/r/7C9FD7/32.png) [@rovech](https://forum.novacura.com/u/rovech)\
**Post date:** [May 16, 2024, 9:42am UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/2 "2024-05-16T09:42:29Z")

</div>

Hi Mahesh,  
I am not familiar with the exact options in the new portal, but when it comes to Branding in Portal2 there is a central feature for that:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/5d16448cc42e164a31f9a733835027d3e0a7c6e2.png)

Regards, Roel

---

<div class="post-metadata">

**Author:** ![mew](https://avatars.discourse-cdn.com/v4/letter/m/7C9FD7/32.png) [@mew](https://forum.novacura.com/u/mew)\
**Post date:** [May 16, 2024, 1:03pm UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/3 "2024-05-16T13:03:11Z")

</div>

Hi Roel,

I tried to find something here, but it seems the colour option for Background controls the colour for both the banner area and the rest of the page. I have raised it to novacura support, and they confirmed it’s currently not possible, but they might take it in as a request.

In portal 1, we used the custom.css file. But for now, there doesn’t seem to be an option for Portal 2

---

<div class="post-metadata">

**Author:** ![ivstde](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/ivstde/32/146_2.png) [@ivstde](https://forum.novacura.com/u/ivstde)\
**Post date:** [June 5, 2024, 11:40am UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/4 "2024-06-05T11:40:11Z")

</div>

Hi,

it is possible to override (almost) any of the page html settings by placing a html advanced portlet (somewhere inconspicuous 🙂 ) on the page and then using javascript (DOM) commands.

So for example i used this to change from my white theme to dark gray:

const myDiv = document.querySelector(‘.nc-portal-header’);  
myDiv.style.backgroundColor = ‘#515151ff’;

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/fe58b08d76da9a21a16398c8111ef66d6c29b678.png)

Its just a matter of manually finding the right class/id/tag to mess with 🙂

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/novacuratalk/original/1X/0bd1db2c1654e12cfaecca0fa3ddac159a9f7da0.png)

Hope this helps!

B R  
Ivan

---

<div class="post-metadata">

**Author:** ![Alluse](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.novacura.com/alluse/32/1013_2.png) [@Alluse](https://forum.novacura.com/u/Alluse)\
**Post date:** [June 5, 2024, 12:42pm UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/5 "2024-06-05T12:42:24Z")

</div>

That’s clever, didn’t know that was possible.

---

<div class="post-metadata">

**Author:** ![mew](https://avatars.discourse-cdn.com/v4/letter/m/7C9FD7/32.png) [@mew](https://forum.novacura.com/u/mew)\
**Post date:** [June 21, 2024, 9:40am UTC](https://forum.novacura.com/t/portal-2-set-different-colour-for-banner-area/686/6 "2024-06-21T09:40:54Z")

</div>

Thank! @ivstde! Will definitely look into this. Novacura has added a feature request to the Idea portal for this functionality. But will look into this option as a workaround.

Regards,

Mahesh
