Hi,
I need to change the background of the entire home screen.
the one top bar marked as red needs to change and the one marked as in blue needs to change.can i get the correct css ?
Also tell me how to remove the current header 8th wonder should changed to custom header by css.
Here are some good CSS resources…
Have seen already but no use.
My customer wants me to change the color of the top header to black.
For another app of myself I would like to hide it all together.
Is this possible? If so how?
Or who could help me with this?
Btw I checked some of the custom css resources but didn’t find the answer.
Many thanks!
Tim
Here is a new resource for CSS. You may also make a request from within the app if it’s not already there.
This is an implementation of it, for just one tab. Please let me know if you need to hide it on all tabs.
For this, please submit a request.
thanks thin dinh!
Based on the one I was able to let ChatGPT create the other ideas.
Perhaps we should make a custom ChatBot for this 
#page-root:has(.auth) div[class*=“desktop-nav-bar”],
#page-root:has(.auth) div[class*=“mobile-nav-bar”],
#page-root:has(.auth) div[class*=“unified-side-bar”] {
background-color: black !important;
}
#page-root div[class*=“desktop-nav-bar”],
#page-root div[class*=“mobile-nav-bar”],
#page-root div[class*=“unified-side-bar”] {
background-color: black !important;
}
The auth class is useful for when you need it on specific tabs (so you add a component with that class to those screens).
If you need it on all tabs, then this part should be enough
CSS Tricks#page-root div[class*=“desktop-nav-bar”],
#page-root div[class*=“mobile-nav-bar”],
#page-root div[class*=“unified-side-bar”] {
background-color: black !important;
}
Hi ThinDinh,
Thanks for your feedback again.
I’ve implemented the custom css mentioned below, however this also obscures the menu icons and back button in the interface, see screenshot. Do you know of a modified version that still shows it?
Many thanks for your support!
#page-root div[class*="desktop-nav-bar"],
#page-root div[class*="mobile-nav-bar"],
#page-root div[class*="unified-side-bar"] {
background-color: black !important;
}
/* Ensuring that the container holding the logo and name is always visible */
.mobile-nav-bar___StyledHeader-sc-15t4b3x-1 .mobile-nav-bar___StyledDiv2-sc-15t4b3x-3,
.mobile-nav-bar___StyledHeader-sc-15t4b3x-1 .unified-nav-bar___StyledDiv2-sc-1vuo1l1-3 {
display: flex;
align-items: center;
}```So the nav bar still needs to be in that color, but the menu and back icons has to be in a color that is visible?
Yes exactly
#page-root div[class*="desktop-nav-bar"],
#page-root div[class*="mobile-nav-bar"],
#page-root div[class*="unified-side-bar"] {
background-color: black;
}
[data-testid="menu-left-button"], span[class*="unified-nav-bar"] {
z-index: 1000;
color: white;
}
#page-root div[class*="desktop-nav-bar"] svg,
#page-root div[class*="mobile-nav-bar"] svg,
#page-root div[class*="unified-side-bar"] svg,
div[class*="desktop-nav-bar___StyledDiv"] {
color: white;
}
Perhaps you would like to try this alternative:
#page-root nav, #page-root nav > div, #nav-root > div {
background-color: black;
}
this is perfect thanks!