Additional CSS

Hey @happyducky ??

As it turns out, we’ve just deprecated the Additional CSS section of our Style tab — we realized it offered little value over core’s Additional CSS section of Customize screen, and came with some annoying limitations, too. That section will continue working on existing forms that use it, but it won’t be available on newly created forms anymore.

Just so you know, everything you could do with that old screen you can do with core’s Additional CSS screen — we’re glad to help you find the right selectors for your customization, in case you need it.

Let us know!

Thank you, @ignaziohappyforms! Good to know.

I tried with the code below – border-style, border-radius and border-width do not work anymore (the rest appears to be ok). The same snippet works on another site with additional CSS in the plugin. Any idea what could be the reason?

input[type=submit].happyforms-button--submit,
input[type=submit][disabled].happyforms-button--submit,
button.submit.happyforms-button--submit,
button[disabled].submit.happyforms-button--submit {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	padding-left: 25px !important;
	padding-right: 25px !important;
	
	border-style: solid !important;
	border-radius: 5px !important;
	border-width: 2px !important;
	
	font-size: 20px !important;
	transition: .2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out !important;
}

Thanks!

• This reply was modified 3 years, 4 months ago by happyducky.
• This reply was modified 3 years, 4 months ago by happyducky.
• This reply was modified 3 years, 4 months ago by happyducky.

Hey there, @happyducky ??

Since you’re using a CSS rule that is the same ones used in our stylesheet files, and the Additional CSS is added on the top of other stylesheets—your CSS styles are given lower priority.

Adding one or more elements before the element you’re targeting will make your rule more specific and gets higher priority. Could you please try adding .happyforms-styles .happyforms-part--submit to your CSS stylesheet rules? It should look like this.

.happyforms-styles .happyforms-part--submit input[type=submit].happyforms-button--submit,
.happyforms-styles .happyforms-part--submit input[type=submit][disabled].happyforms-button--submit,
.happyforms-styles .happyforms-part--submit button.submit.happyforms-button--submit,
.happyforms-styles .happyforms-part--submit button[disabled].submit.happyforms-button--submit

I hope this helps! And let us know how that goes.

Hello @rayhappyforms, this is awesome, thank you very much! Everything works again!

Cheers! ??

• This reply was modified 3 years, 4 months ago by happyducky.

Happy to hear that, @happyducky ??

If you have other questions, let us know about it in a new topic.