Contact form Submit button color

• 

  nmegan · Member · Oct 9, 2013 at 6:22 pm

  • Copy link
  • Add topic to favorites

  Okay…last question for a while! I’ve added a contact form to my Contact page and am trying to figure out how to change the color of the submit button at the very bottom. I used the Inspect Element and tried the code below but no luck. Any help would be appreciated. That blue looks really wrong.

  .contact-form-46 .pushbutton-wide input [type=”submit”] {
  color: #FFFFFF !important;
  }

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

• 

  thesacredpath · Member · Oct 10, 2013 at 2:34 am

  • Copy link

  Hi there, the submit button background color is a CSS3 linear gradient. If you want just a solid color for the button, add the following to your custom CSS and edit the background color code:

  button,
  html input[type="button"],
  input[type="reset"],
  input[type="submit"] {
  	background: #CC0000;
  }

  If you wish to keep the gradient, you will have to have two colors, a top color and a bottom color and replace the color codes in the following multiple background declarations. The reason there are so many is because some browsers have their own way of doing gradients. In the following, the first color number in each background declaration is the top color, and the second the bottom color. The first background declaration with only one color number is the fall-back for older browsers that do not support gradients.

  button,
  html input[type="button"],
  input[type="reset"],
  input[type="submit"] {
  	background: #fafafa;
  	background: -moz-linear-gradient(top,  #589fe6 60%, #468cd4 100%);
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#589fe6), color-stop(100%,#468cd4));
  	background: -webkit-linear-gradient(top,  #589fe6 60%,#468cd4 100%);
  	background: -o-linear-gradient(top,  #589fe6 60%,#468cd4 100%);
  	background: -ms-linear-gradient(top,  #589fe6 60%,#468cd4 100%);
  	background: linear-gradient(top,  #589fe6 60%,#468cd4 100%);
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#589fe6', endColorstr='#468cd4',GradientType=0 );
  }

• 

  nmegan · Member · Oct 10, 2013 at 3:43 am

  • Copy link

  Thank you so much for taking the time to reply in such detail. I’ll copy and keep this info for future reference. For now, I’m happy with a solid color and with your help I was even able to remove the “box-shadow”!

  Thanks again!

• 

  thesacredpath · Member · Oct 10, 2013 at 3:47 am

  • Copy link

  You are welcome.

• 

  adminjsa · Member · Oct 19, 2013 at 12:11 am

  • Copy link

  So, I was able to get the gradient to work like a charm. However, my issue is that there is a thin strip of color underneath the button (but I’m assuming still part of the button) that I can’t seem to get to change…my other question is how to change the hover color of the button.

• 

  adminjsa · Member · Oct 19, 2013 at 12:27 am

  • Copy link

  I figured out how to change the color of the hover…but that little strip underneath will be the bane of my existence…

• 

  thesacredpath · Member · Oct 19, 2013 at 4:20 am

  • Copy link

  @adminjsa, your site is self-hosted, which means we do not have access to the dashboard of your site, and looking at the public side, I am not seeing any contact page listed in the menu, which means I cannot look at it. If you can make the contact page public, I can take a look and see what we can do about the color beneath the button. Also, can you confirm that you are talking about this site: http://jsasanantonio.com/ ?

• 

  adminjsa · Member · Oct 19, 2013 at 1:50 pm

  • Copy link

  I am! And yes, I can make that page public! Thank you so much!

• 

  adminjsa · Member · Oct 19, 2013 at 1:52 pm

  • Copy link

  Ok, it should be public now!

• 

  thesacredpath · Member · Oct 19, 2013 at 4:46 pm

  • Copy link

  Thanks a lot! Below is the code to change the button color. I included a background color declaration as well as text color and a border radius just in case.

  .contact-submit .pushbutton-wide {
      background-color: #5896ac;
      border-radius: 5px;
      color: #FFFFFF;
  }

• 

  adminjsa · Member · Oct 19, 2013 at 5:18 pm

  • Copy link

  wonderful! thank you so much!

• 

  thesacredpath · Member · Oct 19, 2013 at 5:46 pm

  • Copy link

  You are welcome.

• 

  thesacredpath · Member · Oct 19, 2013 at 5:50 pm

  • Copy link

  @nmegan, I see you have hidden the footer credits on your site, and those have to remain visible per the Terms of Service here (#11 Attribution). If you can make those visible again, that would be awesome.

• 

  adminjsa · Member · Oct 19, 2013 at 5:51 pm

  • Copy link

  Ok. So I changed the theme of the site, and added a login widget. That all seems to be working fine. Except for that the Forums page still allows for non-members to view it. I double and triple checked the settings…and all of the pages except for the forums page is doing what it should. Also…the top part (again, only on the forums page) where it has the yellow accent line and page title, is further up, almost smooshed up to the top. Any idea how to fix these issues?

• 

  thesacredpath · Member · Oct 19, 2013 at 6:03 pm

  • Copy link

  @adminjsa, we can help you with CSS and theme specific questions since you are using a theme that was created here, but your site is self-hosted and using the software from WordPress.org, and the best place to ask about that would be at http://wordpress.org/support/ . We don’t have access to your dashboard, so we cannot help with this particular issue.

  Just off the top of my head though, if you are using the widget visibility feature, check the login widget to make sure you have not excluded it from your forum pages.

• 

  adminjsa · Member · Oct 19, 2013 at 6:05 pm

  • Copy link

  Hmm. Alright then. Thanks for your help!

• 

  thesacredpath · Member · Oct 19, 2013 at 6:14 pm

  • Copy link

  You are welcome.

• 

  nmegan · Member · Nov 2, 2013 at 3:10 am

  • Copy link

  I moved it down…hope that’s okay. :-)