Re: Changing color of e-mail and country box - Sense theme

Solved

Changing color of e-mail and country box - Sense theme

KiavusPetstore
Tourist
11 0 1

Hi guys,

 

I'd like to change the color of the box ''email'' and ''country/valuta'' to the color #95B4F0.

 

Can anyone help me with that code?

Website is kiavuspetstore.com

 

KiavusPetstore_0-1721028914733.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
9562 1923 1959

This is an accepted solution.

Code updated

.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
color: #FDFBF7 !important;
}
.newsletter-form__field-wrapper .field:after,
.localization-form__select:after {
border: unset !important;
box-shadow: unset !important;
}
.newsletter-form__field-wrapper .newsletter-form__button .icon,
.newsletter-form__field-wrapper .field__label {
color: #FDFBF7 !important;
}

Screenshot_1.jpg

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
9562 1923 1959

Hi @KiavusPetstore 

Please go to Online Store > Themes > Customize > Theme settings > open Custom CSS, add this code, and save change.

 

.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
}

Screenshot 2024-07-15 at 15.00.11.png

 

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

KiavusPetstore
Tourist
11 0 1

Perfect Dan, thank you for your fast reply! I forgot to ask, is it also possiblle to make the text inside the blue white (#FDFBF7) now?

Dan-From-Ryviu
Shopify Partner
9562 1923 1959

This is an accepted solution.

Code updated

.disclosure .localization-form__select,
.newsletter-form__field-wrapper .field__input {
background: #95B4F0 !important;
color: #FDFBF7 !important;
}
.newsletter-form__field-wrapper .field:after,
.localization-form__select:after {
border: unset !important;
box-shadow: unset !important;
}
.newsletter-form__field-wrapper .newsletter-form__button .icon,
.newsletter-form__field-wrapper .field__label {
color: #FDFBF7 !important;
}

Screenshot_1.jpg

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

leoking
Excursionist
17 0 2

Hey can you please help me on my recent post it would be very appreciated 

ajaycthomas
Shopify Partner
1 0 1

You can achieve this by adding the following CSS code to your theme file, just above the </head> closing tag:

 

<head>
<!-- Other head content -->
<style>
div#FooterCountry-country-results,
.country-filter,
input#country-filter-input,
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large,
input#NewsletterForm--sections--20160497025290__newsletter {
background-color: #95B4F0 !important;
}
</style>
</head>

This code will change the background color of the "email" and "country/value" boxes to #95B4F0.

Hope this helps!

Best, Ajay



Visit https://www.sweans.com

GTLOfficial
Shopify Partner
551 117 108

Hello @KiavusPetstore 

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the bottom of the file.

.newsletter-form__field-wrapper .field__input, .disclosure .localization-form__select {
background: #95B4F0 !important;
}

and the result will be
2.png


If this was helpful, hit the like button and mark the job as completed.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: [email protected] - Skype: ritesh_27dh

Anshul_arora
Navigator
453 128 97

Hello @KiavusPetstore ,


Please add the below code at the bottom of the theme.liquid file before </body> tag and save for the desired change.

 

 

<style>
input#NewsletterForm--sections--20160497025290__newsletter,
button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large
{
background: #95B4F0;
}
</style>

 

Anshul_arora_0-1721045822951.png


I hope the code helps you.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

BSS-TekLabs
Shopify Partner
2350 701 826

- Here is the solution for you @KiavusPetstore 
- 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.

.newsletter-form__field-wrapper .field__input, .localization-form:only-child .localization-form__select  {
 background: #95B4F0 !important;
}

- Here is the result you will achieve:

BSSTekLabs_0-1721049010009.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.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 701 826
.newsletter-form__field-wrapper .field__input, .localization-form:only-child .localization-form__select  {
 background: #95B4F0 !important;
}
.newsletter-form__field-wrapper .field__input::placeholder, .newsletter-form__field-wrapper .field, .localization-form:only-child .localization-form__select {
  color: white !important;
}

You can use this code if you want the color white @KiavusPetstore 

BSSTekLabs_0-1721053123611.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now