how to change the colour of white above the announcement bar ?

[Shadezs]

im currently using the shrine theme and im using a sections app announcememnt bar but i cant change the colour of the white above the announcement bar at the top of page to the pink, does anyoen one know how to fix this?

[Moeed]

Hey @Shadezs 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
:root {
    --safe-area-inset-top: env(safe-area-inset-top);
}
body {
    background-color: #FF7979 !important; /* Pink background */
}
html {
    background-color: #FF7979 !important; /* Pink background */
    padding-top: var(--safe-area-inset-top) !important;
}
@supports (padding: max(0px)) {
    body {
        padding-top: max(env(safe-area-inset-top), 0px) !important;
    }
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Shadezs]

hi, it kinda worked but it turned the background of the whole page pink, i have reverted the changes for now, is there anyway to fix this? 

[Moeed]

Got it! Try this code instead with the same steps mentioned above.

<style>
:root {
    --safe-area-inset-top: env(safe-area-inset-top);
}
html::before {
    content: "";
    display: block;
    height: var(--safe-area-inset-top);
    background-color: #FF7979 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
</style>

If this didn't work then feel free to share your collaborator request code in my private messages.

Best Regards,

Moeed 

[Shadezs]

sorry this code didnt work either everything stayed exactly the same