Forms 2.0 Improvement - Custom CSS Always Priority

[Anonymous]

When using the "custom CSS" option in the Forms 2.0 builder, none of the custom CSS overides the CSS from the template, unless you mark it as important (using the !important; suffix at the end of all your CSS strings).

Per coding best pracitces, if you're putting up custom CSS on the form level, it should always overide the base CSS of the template. Also, per coding best practices, you should try and avoid using !important; as much as feasibly possible:
http://james.padolsey.com/usability/dont-use-important/

[Anonymous]

Great points Ben! - Jeff

[Anonymous]

Hey guys,

Thanks for the feedback.  

Custom CSS that you input via the modal should override the default template CSS given that the changes are at the same specificity as the template css.  

For example if the template css was:

.mktoForm textarea {color:blue}

... and you wanted to change blue --> red, you would have to make the edit as:

.mktoForm textarea {color:red}

If you were to add custom CSS only at:

textarea {color:red} 

the changes will not be reflected in your form.

That said, the easiest way to make css changes across the board using custom css is to use id based selectors and to insert the form in your page inside a div, e.g. <div id='customForm2.0'>

As none of the rules from the templates are by id, following the above method should give you the most control over elements via the custom css modal.

Hopefully this helps!

Thanks,

Jason

[Anonymous]

Thanks Guys
these ideas are helpful.

George