Alter colours in contact forum

• 

  kaylarperry · Member · May 24, 2016 at 5:15 pm

  • Copy link
  • Add topic to favorites

  Hi there, wondering if there is a code to change the colour in a contact form? If possible, I would like the fields (i.e. the text of name, email, company website and comment) to appear as a certain colour: RGB 57,192,196.

  The page I’m referring to is: https://kaylarperry.com/contact/

  The blog I need help with is: (visible only to logged in users)

• 

  carladoria · Member · May 24, 2016 at 8:18 pm

  • Copy link

  Hi there,
  Try the following:

  .contact-form input[type='text']{
      background-color: rgb(57,192,196);
  }
  
  .contact-form textarea {
      background-color: rgb(57,192,196);
  }

  Paste this code in My Sites > Customize > CSS

  [Moderator’s note – added code tags]

• 

  kaylarperry · Member · May 25, 2016 at 1:04 am

  • Copy link

  Thanks! That ended up changing the text boxes for the name, company and comment areas of the form – rather than the actual text of the categories (i.e. name, company etc)- which is still fine, but it left out the email entry space on the form (which still appears as the original light grey).

• 

  carladoria · Member · May 25, 2016 at 1:57 am

  • Copy link

  Oops, I understood you wanted to change the fields background colors. Although, I’m not now sure if you want to change the titles of the contact form fields or the text that is written by the user.
  Just in case, I provide both CSS.
  To change the titles of the contact form:

  .contact-form label {
      color: rgb(57,192,196);
  }
  To change the text that is written inside each box:
  
  .contact-form input[type='text'] {
      color: rgb(57,192,196);
  }
  To make sure all the fields above are in the same color (including the entry email) use this code and set your preferred color:
  
  .contact-form input[type='text'] {
      background-color: lightgrey;
  }
  
  .contact-form input[type='email'] {
      background-color: lightgrey;
  }
  .contact-form textarea {
      background-color: lightgrey;
  }

  I hope everything works now!

  [Moderator’s note – added code tags]

• 

  kaylarperry · Member · May 25, 2016 at 2:19 am

  • Copy link

  Got it (I changed the colours of the titles). Thanks!!!

• 

  siobhyb · Member · May 25, 2016 at 11:38 am

  • Copy link

  Thanks so much for all of your help on the forums @carladoria. :)

• 

  carladoria · Member · May 25, 2016 at 1:08 pm

  • Copy link

  @siobhyb Glad to help :)

• 

  kathrynwp · Staff · May 25, 2016 at 9:47 pm

  • Copy link

  carladoria – I echo Siobhan’s thanks, your help is appreciated!

  In future, could you please put any code, including CSS, in between the code tags? You can use the toolbar buttons for that, or using the backtick symbol also works. Thanks!

• 

  carladoria · Member · May 25, 2016 at 11:32 pm

  • Copy link

  @kathrynwp No problem! will do that :)

• 

  kathrynwp · Staff · May 26, 2016 at 12:28 am

  • Copy link

  Thanks, Carla!