Shoreditch Theme Button Color Change

• 

  gamedayapplications · Member · Jul 29, 2018 at 11:59 am

  • Copy link
  • Add topic to favorites

  I have the Shoreditch theme and want to change the color of the buttons on the home page of http://www.thetelevisionreport.com. Right now they are blue and I want them to be gray. How do you do this?

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

• 

  garysixtyeight · Member · Jul 29, 2018 at 1:58 pm

  • Copy link

  Hi there,

  The colour can be changed by pasting the CSS below into My Sites > customize > CSS:

  .featured-content .hentry.has-post-thumbnail .button, .page-template-panel-page .hentry.has-post-thumbnail .button {
      background: #A9A9A9;
  }

  Adding custom CSS is only possible with a WordPress.com Premium or Business plan.

  I hope this helps :)

• 

  gamedayapplications · Member · Jul 29, 2018 at 2:12 pm

  • Copy link

  Thanks! How can I change the color of the Menu button at the top? In the mobile view it is still blue.

• 

  garysixtyeight · Member · Jul 29, 2018 at 2:27 pm

  • Copy link

  For the mobile menu, please add:

  .menu-toggle {
      background: #A9A9A9;
  }
  

• 

  gamedayapplications · Member · Jul 31, 2018 at 6:32 pm

  • Copy link

  Thanks these have all worked. Do you know how to change some things on the WordPress form? Like the color of the submit button? The length of the area to write info on the form?

• 

  garysixtyeight · Member · Jul 31, 2018 at 7:30 pm

  • Copy link

  For the submit buttons, please use:

  input[type=submit], .widget-small input[type=submit] {
      background: #A9A9A9;
  }

  The length of the area to write info on the form?

  Can you clarify which field in which form it is you’d like to change – the email field on the home page, the fields on the contact page etc?

• 

  gamedayapplications · Member · Aug 1, 2018 at 12:45 pm

  • Copy link

  The length of the Email field on the home page.

• 

  gamedayapplications · Member · Aug 1, 2018 at 12:46 pm

  • Copy link

  Also can I change what the button reads? Instead of Submit, I want it to say “Request Report”

• 

  gamedayapplications · Member · Aug 1, 2018 at 12:52 pm

  • Copy link

  And can I change the color of the area where you write in the email address? Instead of white.

• 

  garysixtyeight · Member · Aug 1, 2018 at 1:56 pm

  • Copy link

  Please try using the css below.

  The max-width and colour values can be changed to whatever you prefer.

  @media screen and (min-width: 896px) {
      .home .contact-form input[type=email]{
          max-width: 50%;
       }
  }
  
  .home .contact-form input[type=email]{
      background:#41e8f4;
  }

  For the “submit” text, that can be changed by using shortcodes when creating the form.

  https://en.support.wordpress.com/forms/contact-form/#how-to-add-a-contact-form-with-shortcodes

  submit_button_text Allows you to change the contact form button text from “Submit” to anything you like. In the example below, the button would display “Contact me!” inside the button:

  [contact-form submit_button_text='Contact me!'][contact-field label='Name' type='name'/][/contact-form]

• 

  gamedayapplications · Member · Aug 1, 2018 at 3:17 pm

  • Copy link

  Thanks! This has been a huge help. Last question. How do I make it so it reads “Email” inside the white box they need to fill in?

• 

  garysixtyeight · Member · Aug 1, 2018 at 3:37 pm

  • Copy link

  You’re welcome :)

  Placeholder can be used to add descriptive text inside an input field until it’s filled.

  https://en.support.wordpress.com/forms/contact-form/#how-to-add-a-contact-form-with-shortcodes

  Example:

  [contact-field label="Email" type="email" placeholder="Your Custom Text Here" required="true" /]