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

Store Design
,
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
KiavusPetstore_0-1721028914733.png1041×428 22.1 KB

2

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
Screenshot 2024-07-15 at 15.00.11.png1142×596 28.1 KB

1 Like
3

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

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

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

Hope this helps!

Best, Ajay

1 Like
4

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
2.png1229×576 34.8 KB

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

1 Like
5

Hello @KiavusPetstore ,

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

Anshul_arora_0-1721045822951.png
Anshul_arora_0-1721045822951.png1499×824 49.5 KB

I hope the code helps you.

Thank you.

1 Like
6

step.png
step.png1865×854 125 KB

  • 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
BSSTekLabs_0-1721049010009.png1858×848 84.9 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
7

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?

8 
.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
BSSTekLabs_0-1721053123611.png461×158 4.71 KB

9

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
Screenshot_1.jpg1276×581 32.3 KB

1 Like
10

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