Changing background color of input forms

Adrien_Taylor1
New Member
5 0 0

Hi everyone, 

I'm new to Shopify and launced my site www.OffcutCaps.com just over a week ago. It's going well but I'd really like to change the background color of the input forms for: email signup, contact form, and the dropdown variants menu in products. I want to change it from white to match the same color as the site's background, #dadad2. 

Have tried a lot of things and read a bunch of posts but still no luck. Would have massive gratitude to anyone who can help me solve this. Thanks!

Adrien

0 Likes
Kyle_K
Shopify Staff
Shopify Staff
119 0 16

Hi Adrian,

You can make this change by going to your timber.sccs file and locatiing this section of css below. 

textarea,
select {
  border: 1px solid $colorBorder;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 0 1em;
  color: #333 !important;
}

You then add the last line called background-color: #dadad2; 

textarea,
select {
  border: 1px solid $colorBorder;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 0 1em;
  color: #333 !important;
  background-color: #dadad2; 
}

Update this change in your timber.scss file and that will change the background color of those inputs fields for your contact form. 

To update the color for your product variants drop-down you need to go to your timber.scss file and update your

select { 

css field with background-color: #dadad2. See this screenshot for an example. 

Your Guru,
Kyle

Jason
Shopify Expert
10039 119 1876

Another option would be to use something like the below. Whilst I am not find of ever using the !important decloration, it can offer a quick fix.

/* change background colour of select elements & some input fields to transparent */

select, input[type="text"],input[type="email"] {
    background-color: transparent!important;
}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Adrien_Taylor1
New Member
5 0 0

Thanks so much, Kyle - much appreciated. 

Have managed to chane the form input background colour but not having any luck with the variant menu. This is what my select field looks like at the moment, could you please give me proper code I can copy and paste in instead? 

select {
  -webkit-appearance: none;
  background: {
    image: url('{{ "ico-select.svg" | asset_url }}');
    repeat: no-repeat;
    position: right 10px center;
    color: #fff !important;
  }
  background-color: #dadad2;
  padding-right: 28px;
  text-indent: 0.01px;
  cursor: pointer;

Also, how would I go about changing the colour of the placeholder text in the forms (things like "Your email"). I'd like to make it white. 

And finally, is there an easy way to make the "Share" "Tweet" "Pin it" button background  #dadad2 instead of white on the product pages and make the text for each white? 

Thanks so much for your help.

0 Likes
Adrien_Taylor1
New Member
5 0 0

Thanks Jason. Would I find this in the timber file too?

0 Likes
Jason
Shopify Expert
10039 119 1876

You can pop that right down the bottom of that stylesheet - theme.scss.liquid.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Kyle_K
Shopify Staff
Shopify Staff
119 0 16

Hi Adrien,

See your code below. You don't need to add background-color, but it looks like you just need to change the "color" tag, as it is already being injected for the background. 

select {
  -webkit-appearance: none;
  background: {
    image: url('{{ "ico-select.svg" | asset_url }}');
    repeat: no-repeat;
    position: right 10px center;
    color: #dadad2 !important;
  }

To change the social icons, find .social-sharing.is-clean a {  -- and make changs to the border, add background color, and change color for the text. 

.social-sharing.is-clean a {
    border: 1px solid #dadad2;
    color: #FFF;  
    height: 30px;
    line-height: 30px;
    background-color: #dadad2;
}

For the your placeholder text trying adding the following to the bottom of your Timber.scss file.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Your Guru,
Kyle

0 Likes
Adrien_Taylor1
New Member
5 0 0

That's brilliant, thanks again so much Kyle!

0 Likes
artbythorv
New Member
1 0 0

Where is the timber? I am looking to do the same thing for my page store.thehouseofredvelvet.com I want the email submission form on the bottom, and the contact page form areas to not turn black when you click on them. Thank you for any help. 

0 Likes