Changing colors of announcement bar and content-container

[Untenmaille]

Hello!

I'm trying to change the colors of announcement bar and content container. The colors wont change to the live-version of the site, but I can see the change in the editor-view. The color I was trying to do with the editor was gradient of yellow, but I wouldn't mind if the color would be something like: #fffec8.

The site is called https://untenmaille.fi and the theme used is Sense.

Editor view:

Live view:

I think these changes need to be added via CustomCSS? I could use help with the code and where to add it. 😅

[Moeed · Accepted solution]

Hey @Untenmaille 

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>
.utility-bar {
    background: #fffec8 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Raj-webdesigner · Accepted solution]

Add this css on your edit code > base.css file

.image-with-text .image-with-text__content{
   background: radial-gradient(#fff 20%, #fffec8 100%);
}
.announcement-bar-section .utility-bar{
    background:#fffec8;
}

[Moeed · Accepted solution]

Hey @Untenmaille 

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>
.utility-bar {
    background: #fffec8 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Untenmaille]

Thanks for this, the announcement-bar works now! However I didn't get the part with 'image-with-text' working yet with Raj's tips.

[Raj-webdesigner · Accepted solution]

Add this css on your edit code > base.css file

.image-with-text .image-with-text__content{
   background: radial-gradient(#fff 20%, #fffec8 100%);
}
.announcement-bar-section .utility-bar{
    background:#fffec8;
}

[Untenmaille]

I added the code you made to base.css and it didn't change the color of the box.


Any ideas why?

[Raj-webdesigner · Accepted solution]

Sir, You Remove this line in bottom of base.css file and add top of base.css file.

.image-with-text .image-with-text__content{
   background: radial-gradient(#fff 20%, #fffec8 100%);
}

[BSS-TekLabs]

- Here is the solution for you @Untenmaille 
- Please follow these steps:

 

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

.utility-bar.utility-bar--bottom-border {
 background: #fffec8 !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.