How to change Portal header color
Hi,
I am trying to change the header portal color from the existing blue color to green as per the business requirements. I have created a new header portal in the Dynamic container and changed the color by creating a new mixin and color code. The background color is changed however it is just partial. When I zoomed in, I can see the underlay blue color as the new color is not entirely covered the portal box.
Could someone please advise/guide me where do I need to change the background color? I am not a UX/UI designer but this requirement has come down to me.
Kind regards,
Omer
***Edited by Moderator Marije to add Capability tags***
NCS Pte. Ltd
SG
Hi @OmerM16669398: Can you confirm if you are using Theme-Cosmos or UI Kit as a base for your UI?
If UIKit, can you explain what you mention as partial?
You can also try to override the background color of the css class flat-primary-header to achieve this.
Thanks.
Unisys
NZ
@ArulDevan I have opened the Skin of the application in Dev Studio --> from the Layouts --> Containers --> Under Containers I have Header Portal --> This is where I created a new Header Portal and used the required color
NCS Pte. Ltd
SG
Hi @OmerM16669398: Thanks for the reply. Still i couldn't understand what you mention as partial. Can explain about it? Are you referring to the blue borders outside the green header?
Thanks.
Unisys
NZ
@ArulDevan Yes. The blue border outside the green color. I need the complete box in green color.
NCS Pte. Ltd
SG
Hi @OmerM16669398: Performing the changes in the Header portal container will change the UI for the container. This container is wrapped inside a screen layout. So check the background configured for header in scree layout (i hope it is header left here).
(in skin select screen layout -> select header left -> expand header)
Note: this will change the header color for all the screen layouts used with same format.
The blue box might be because of a margin configuration in the Portal header Container. You can check this from skin - > Containers -> Portal header -> Box tab -> Margins.
Thanks
Commonwealth Bank of Australia
IN
Hello..! To to change Portal header color
Mixin is re-usable component with specific html attributes that can be used across your skin components(like layouts, headers etc..)
To create a new mixin.
1. Go to Mixin tab in your skin rule.
2. Under Backgrounds add a new mixin or use override the Action Background Hover.
3. You can specify the hexadecimal colur code in there or select the required color from the color picker. save it. Refer my screenshot
4. If new Mixin Refer the newly created mixin in your portal header background mixin.
Reflection of the Changes in the Portal:
Hope this is Helpful :)
Thanks || Swathi