[incacola_mattParticipant]

I have added a contact form 7 to a page. (i cant show you as i’m on localhost). I have added the following css to the page to style the form:

.wpcf7-form p {
color:#fff;
margin-top:10px;
}

.wpcf7-form textarea {
background:#fff;
padding:5px 0px 5px 7px;
border:0px
}

.wpcf7-form input {
background:#fff;
padding:5px 7px;
margin-bottom:8px;
border:0px
}

.wpcf7-form {
padding:20px;
margin-bottom:30px;
}

But i want to style the button like the 3D square button on your button page http://theme.co/x/demo/integrity/1/shortcodes/buttons/ – i want it like the 4th one down – the green one. (i wold like to change the colour from green perhaps – but want the same style) –

Can you help with the correct css that i need to add please?

Kind regards

Matt

[John EzraMember]

Hi there,

Thanks for writing in! You will need the right button selector for this to work. We are not able to see your site so we aren’t able to tailor our advise further. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.yourButtonSelector {
    color: #fff;
    border-color: #555555;
    background-color: #888888;
    padding: 0.6em 1.2em 0.85em;
    font-size: 19px;
    box-shadow: 0 0.25em 0 0 #555555, 0 4px 9px rgba(0, 0, 0, 0.75)!important;
}

Hope this helps – thanks!

[incacola_mattParticipant]

Thanks – but how do I

– make the button wider and deeper?
– change the wording
– change the font colour and font shadow colour

Regards

matt

[RupokMember]

Hi Matt,

Thanks for writing back. I think that’s already covered on the code but I am breaking down for you :

#1. Change the padding value from above suggested code. Increase this to make id wider and deeper. You can use pixel (px) value instead of em for better understanding. Like : padding: 10px 20px;

#2. When you are adding button, you can change the text. If you are using Contact Form 7 then you can change the text from form editor.

#3. That’s also on the above code. Just change the values of color and box-shadow properties with your own.

Hope this makes sense.

Cheers!

[incacola_mattParticipant]

perfect, thank you!

[DarshanaModerator]

Glad we were able to help 🙂

[incacola_mattParticipant]

hi i added the code you suggested and all good except one thing. When i try to use the botton i get a yell border around the button after it has submitted. This yellow border shows when there is an error in fields AND ASLO when i have successfully submitted the form. I attache three iamges. 1 original form not submitted showing button as shold be. 2. with yellow boarder after failed submition and 3 showing yelllow border after success.

How can i stop this showing pelase? It does not show when i ht submit on your forum submit button (see 4th image)

[RupokMember]

Hi there,

Thanks for updating. You can try :

.yourButtonSelector:focus {
  outline: none!important;
}

Hope this helps.

Cheers!

[incacola_mattParticipant]

hi almost! See attached image, i think i ned just a little more help please!
– how do i change the widget title colour
– how do i make the ‘category’ and ‘pages’ widgets background same as rest of footer (dark grey 222)
– how do i make the ‘category’ and ‘pages’ widgets font colour dark grey 222 (without it changing the tag cloud font?
See image attached to see what css i have at moment.

Thank you 🙂

[incacola_mattParticipant]

Oops ignore last comment above – posted it to the wrong thread (sorry)

[RupokMember]

Hi there,

It’s okay. You can consider this thread as closed.

Cheers!

[Author]

Posts