[Michael HParticipant]

Hello

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!

[RadModerator]

Hi Michael,

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.

[Michael HParticipant]

Thanks very much. I’ve put that into the custom CSS box in the X Customizer. I was going to then paste “ul.wpuf-form .wpuf-submit input[type=submit]” to the ‘CSS Class Name’ in my WPUF admin. But I realised that it only allows me to do so for each field, not for a button.

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…

[Michael HParticipant]

I’ve found a box now in the WPUF for ‘Custom CSS Codes’, which I think will apply to every form.
I tried putting both the whole code you sent me and also just the first line, but with no result.
I will ask WPUF about this, but any pointers you could give me to help me understand the process will be appreciated!

Thank you.

[RadModerator]

You’re welcome Michael!

[Michael HParticipant]

Could you give me any suggestions about why it hasn’t worked so far?

[RadModerator]

I just tested the code given above at your test page, and it works perfectly. Do you have any cache plugin installed? If so, please disable it just for testing.

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.

[Michael HParticipant]

Yes, it’s working! Excellent.

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.

[ChristianModerator]

Hey Michael,

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.

[Michael HParticipant]

Thanks for this explanation, and for all your help.

[Michael HParticipant]

I’ve just done what you said, i.e. deleted the CSS in WPUF, and it came out perfectly. Thanks again!

[AmanMember]

You’re welcome Michael

[Author]

Posts