Changing colors of announcement bar and content-container

Changing colors of announcement bar and content-container

Untenmaille
Visitor
1 0 0

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:
Näyttökuva 2024-07-11 kello 15.05.49.png

Live view:
Näyttökuva 2024-07-11 kello 15.07.24.png

 

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

Replies 3 (3)

Moeed
Shopify Partner
4304 1105 1353

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:

Moeed_0-1720700388881.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Raj-webdesigner
Shopify Partner
316 73 74

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;
}

 

 

 

Rajwebdesigner_0-1720700856188.png

 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


BSS-TekLabs
Shopify Expert
391 123 131

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

step.png

- 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:

BSSTekLabs_0-1720708844795.png

 

BSSTekLabs_1-1720708857251.png

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency