Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I’m trying to produce a transparent background on the Site Origin Widgets contact form – and I did some custom css that works (would be nice to be able to have transparency as a choice in the contact form design area :-) ).
.so-widget-sow-contact-form-default-9881c33d4b2d .sow-contact-form {
background-color: transparent;
}However, when I then made a change to padding of the contact form, it broke my background transparency, because the selector for the form’s parent changed. What I thought was a unique code for the instance of the form, turned out to be a unique code for the particular configuration of the form, and when I changed that configuration, the code changed.
.so-widget-sow-contact-form-default-66e098ae91fe .sow-contact-form {
padding: 0px;
border: #c0c0c0 none 0px;
background-color: #f2f2f2;
}Am I missing a way to override the form styling that won’t be affected by future changes to other elements of the form?
Hi George
Thanks for your question.
There are many ways you could approach this. The easiest might be to use the body class for the page and target any so-contact-form on that page. If you can provide a link to the page we’d be happy to help with this. You can use the Private Reply checkbox bottom right if necessary.
I didn’t think a body class would override the specificity of the Site Origin CSS but you’re right – that worked.
Thanks!
Awesome, nicely done :)
All the best with your site.