Change color for "GO!" button

• 

  andrebourdages · Member · Mar 30, 2017 at 11:54 am

  • Copy link
  • Add topic to favorites

  Hello,

  I apply this code and not work for th “GO!” button. Anybody have an idea why is not work?

  button, input[type=”button”], input[type=”reset”], input[type=”submit”], `.grid-wrapper #infinite-handle span button {
  background-color: #257cb0;
  }

  .widget-title label {
  color: #257cb0;
  }`

  A+

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

• 

  otpidusprime · Member · Mar 30, 2017 at 12:00 pm

  • Copy link

  Hello,
  Maybe it is being overwritten by this CSS code:

  button, input[type="button"], input[type="reset"], input[type="submit"], .grid-wrapper #infinite-handle span button {
      border: 1px solid;
      border-color: #000;
      border-radius: 0;
      background: #000;
      box-shadow: none;
      color: #fff;
      font-weight: 600;
      height: 55px;
      line-height: initial;
      padding-left: 2.6em;
      padding-right: 2.6em;
      padding-bottom: 1px;
      text-transform: uppercase;
      text-shadow: none;
      -webkit-transition: background .3s, color .3s;
      -moz-transition: background .3s, color .3s;
      -ms-transition: background .3s, color .3s;
      -o-transition: background .3s, color .3s;
      transition: background .3s, color .3s;
  }

  Because i can see the code mention in the question by you and this code above both present in the CSS.
  Try using “!important” with your code like this:
  button, input[type="button"], input[type="reset"], input[type="submit"],.grid-wrapper #infinite-handle span button {
  background-color: #257cb0 !important;
  }`
  and see if it works.

• 

  otpidusprime · Member · Mar 30, 2017 at 12:01 pm

  • Copy link

  Sorry for the above layout problems, use the “!important” code like this with your CSS code and see if it works:

  button, input[type="button"], input[type="reset"], input[type="submit"],
  .grid-wrapper #infinite-handle span button {
  background-color: #257cb0 !important;
  }

• 

  staff-loquaciousloon · Staff · Mar 30, 2017 at 3:39 pm

  • Copy link

  Hi there!

  It doesn’t look like that style is getting in the way – if I add the code you’ve mentioned @andrebourdages, the button changes color.

  @otpidusprime is right to point out that style though. Rather than adding a new style for button colors, I would suggest updating the style you already have for them.

  The style @otpidusprime copied into his post is in your Custom CSS. If you change that style’s background to #257cb0; you’ll change the colors of all of your buttons :)

  Regarding the

  .widget-title label {
  color: #257cb0;
  }

  issue – I believe the reason that isn’t working is that there’s an extra } just before it. Remove the extra one and see if that helps :)

  One other note for when working with CSS: try to avoid using !important in CSS whenever possible – it’s usually not needed (like here) and it can make it more difficult to troubleshoot your CSS down the road, since !important acts as an override. Generally it’s best to write more specific CSS if you need to, rather than rely on !important to force the code to work.

• 

  andrebourdages · Member · Mar 30, 2017 at 5:49 pm

  • Copy link

  Hello,

  I apply this code and it’s works.

  input[type=”submit”] {
  background: #257cb0;
  border-color: #257cb0;
  color: #abcabc;
  }

  Thanks for your help!

• 

  otpidusprime · Member · Mar 31, 2017 at 8:27 am

  • Copy link

  Great! Good to see it working :)