Additional CSS

  • Resolved happyducky

    (@happyducky)


    4 years, 6 months ago

    Hi guys,

    I have been using your plugin for a while now and it is fantastic!

    I just started a new project and installed the latest version 1.13.6. Unfortunately, the Additional CSS option in the Style tab is missing. The rest of my sites that run the same version have it…

    Could please let me know how to activate this?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Ignazio Setti

    (@ignaziohappyforms)

    4 years, 6 months ago

    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!

    Thread Starter happyducky

    (@happyducky)

    4 years, 6 months ago

    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 4 years, 6 months ago by happyducky.
    • This reply was modified 4 years, 6 months ago by happyducky.
    • This reply was modified 4 years, 6 months ago by happyducky.
    Ray Loyloy

    (@rayhappyforms)

    4 years, 6 months ago

    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.

    Thread Starter happyducky

    (@happyducky)

    4 years, 6 months ago

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

    Cheers! 🙂

    • This reply was modified 4 years, 6 months ago by happyducky.
    Ray Loyloy

    (@rayhappyforms)

    4 years, 6 months ago

    Happy to hear that, @happyducky 😊

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

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Additional CSS’ is closed to new replies.