Button settings being overridden

Hi,

I’ve styled the buttons in Custom CSS editor and I can see the changes of colours/border etc when I’m editing the page in LiveComposer, however when just browsing the site the button styles don’t take the custom CSS.

The buttons I’ve added using LiveComposer are fine, it’s the ones through ContactForm7 and PayPal Plugin. Is this is a theme thing or plugin thing?

Example on the contact page - http://wp.barnesfitness.com/contact/

Thanks

Dear Dano,

Thank you for reporting.

> … however when just browsing the site the button styles don’t take the custom CSS.

Could you please post your custom CSS code here?

Regards,
Kharis

Hi Kharis,

Thanks for taking a look!

I’ve adjusted the width with this code, but it won’t take the colours…

/* Contact Form Button*/
.wpcf7 input[type="submit"] {
  background-color: #69d2d2 !important;
  color: #fff;
  width: 98%;
  text-align:center;
  text-transform:uppercase;
  border-radius: 0px;
}

I also have this which styles the pop-up contact form that’s on Online Coaching > Find Out More

/* CONTACT FORM BUTTON */
a.contact-button, input[type='reset'], input[type='submit'] {
  background-color: #69d2d2 !important;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  padding: 0.5%;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 0px;
}

Thanks

Hello there,

Could you please try to use the following code?

#dslc-content #dslc-module-157 input[type="submit"].contact-button{
  background-color: #69d2d2 !important;
  color: #fff;
  width: 98%;
  text-align:center;
  text-transform:uppercase;
  border-radius: 0px;
}

Let me know how it works.

Warmest regards,
Kharis

> I also have this which styles the pop-up contact form that’s on Online Coaching > Find Out More

I noticed it’s fine already. Could you confirm if the issue remains?

Warmest regards,
Kharis

Thanks Kharis!

The code you’ve given me works for the Contact page! As I going to have to change it for each page it’s on? The Personal Training page will need those settings as well.

You’re correct, the pop-up contact form is fine, it has different CSS.

Thanks

Hello there,

> The Personal Training page will need those settings as well.

Could you please try to use the following?

#dslc-content #dslc-module-157 input[type="submit"].contact-button,
#dslc-content #dslc-module-83 input[type="submit"]{
  background-color: #69d2d2 !important;
  color: #fff;
  width: 98%;
  text-align:center;
  text-transform:uppercase;
  border-radius: 0px;
  border: 20px solid red;
}

I hope it helps.

Warmest regards,
Kharis

Thanks Kharis! I gave that contact form button class of ‘contact-button’ and used the same code with module number 83!

Could I ask one more thing - the button on the Skype page… I’m using the below, but I think I’m missing something?

#dslc-content #dslc-module-181 input[type="submit"].submit {
background-color: #fff !important;
 color: #69d2d2 !important; 
 font-size: 16px !important;
}

Thanks again!

Hello there,

Could you please try the following?

#dslc-content #dslc-module-181 input[type="submit"]#submit {
  background-color: #fff !important;
  color: #69d2d2 !important; 
  font-size: 16px !important;
}

I hope it helps.

Warmest regards,
Kharis

Kharis, that is perfect, thanks!

I’m still using that code with .input in order to edit the text, but it only affects the colour - not the size or weight.

#dslc-content #dslc-module-181 .input{
  color:#69d2d2;
  font-size: 5em;
}

Even with just #dslc-content #dslc-module-181 or #dslc-content #dslc-module-181 .plain it doesn’t style the text. Am I missing something simple?

Thanks again!

Hello there,

Could you please try the following?

#dslc-content #dslc-module-181 form .input{
  color: #69d2d2;
  font-size: 5em !important;
}

Warmest regards,
Kharis

Thanks, but that doesn’t work.