I’m very happy I chose the X theme for many reasons, but one of them is that buttons used on other plugins, such as Contact 7 Forms, seem to automatically fit with the styling of the theme. But the problem I’m having now is the I’m using a plugin called WordPress User Frontend Pro and I want the button on this to look like the others on my site, but am not sure how to go about it. Here is a page I made just for the purposes of showing the problem. You’ll see a Contact 7 form, with a beautiful big blue button like the others on the site, then under it a WPUF form with its standard, rather dull-looking button.

http://diarypal.com/tests/

I have very little experience with CSS but I’m assuming that I could do this with the right CSS. The plugin has an option to input ‘CSS class name’. Could I get something from you to put in there that will style the button? Or could you give me come CSS styling that I can include in a message to WPUF to ask for their help?

Thank you!

Thank you for dropping by!

Sure, here is the css you need. I pickup the styling from your existing X button.

ul.wpuf-form .wpuf-submit input[type=submit] {
display:inline-block;
position:relative;
border:1px solid #ac1100;
cursor:pointer;
font-size:1.6rem;
line-height:1.3;
text-align:center;
vertical-align:middle;
color:#fff;
-webkit-transition:all .15s linear;
transition:all .15s linear;
padding:.563em 1.125em .813em;
}

ul.wpuf-form .wpuf-submit input[type=submit]:hover {
text-decoration:none;
color:#fff;
background-color:#df1600;
border-color:#600900;
}

ul.wpuf-form .wpuf-submit input[type=submit] {
color: #ffffff;
border-color: #58a3f3;
background-color: #58a3f3;
}

Hope this helps.

I guess I need to aks WPUF about this, but I’d just like to be clear about what I’m doing here before that. The CSS I’ve pasted into the Customizer is now – where? And I’m assuming that I need to put “ul.wpuf-form .wpuf-submit input[type=submit]” and the other class name (is that the right expression?) in a file somewhere in WPUF – is that right?

Thank you for your patience…

Thank you.

Could you try adding !important ?

ul.wpuf-form .wpuf-submit input[type=submit] {
display:inline-block!important;
position:relative!important;
border:1px solid #ac1100!important;
cursor:pointer!important;
font-size:1.6rem!important;
line-height:1.3!important;
text-align:center!important;
vertical-align:middle!important;
color:#fff!important;
-webkit-transition:all .15s linear!important;
transition:all .15s linear!important;
padding:.563em 1.125em .813em!important;
}

ul.wpuf-form .wpuf-submit input[type=submit]:hover {
text-decoration:none!important;
color:#fff!important;
background:#df1600!important;
border-color:#600900!important;
}

ul.wpuf-form .wpuf-submit input[type=submit] {
color: #ffffff!important;
border-color: #58a3f3!important;
background-color: #58a3f3!important;
}

Let me know.

The button is now more similar in shape and changes colour on hover. I wonder if it could be made to look EXACTLY like the button above it, the one in the Contact 7 form? I mean, exactly the same dimensions, came curvature on the corners, same black shadow underneath, exactly the same colours (well, I guess the colours I can adjust myself).

Also, this makes me wonder if I could make all my WPUF forms look exactly like my Contact 7 forms, i.e. with text fields full width and text across the top. Would that be doable, too, using CSS in the customizer? If so, that would be great.

Thanks again for your all your help. I’m looking forward to your reply.

The way to do that is to remove the form styles of your 3rd party form so that it’ll inherit the style of X. Please edit your form plugin and delete the styles for

ul.wpuf-form .wpuf-submit input[type=submit]

See result: http://prntscr.com/3p6h1a

We’d love to help you with replicating X button style however, you have existing form style that needs to be overridden and we don’t have support for 3rd party plugins.

Thank you for understanding.