Overriding theme CSS with FPro styling

All Topics → → Overriding theme CSS with FPro styling

Hi There, I have added a for to a page on my site the styling seems to getting pulled from both the themes css and the Formidable css. Is there a way I can override the theme styling. I have checked and selected all the relevant options in the Formidable settings. The settings look good on the Form Setting > Form Styling page. My main problem is the checkboxes are not aligning correctly but I would like to have full control via the Formidable settings.

I note in another thread http://formidablepro.com/help-desk/form-display-problems/ the following:

There are three ways to fix this, either edit the Theme’s form.css file and eliminate the width and float attributes assigned to all inputs(easiest method) or you can edit the Formidable CSS and add a !important on the input classes to force the browser to ignore the form.css junk (not recommended). Your third option, is to create a new css file where you can override the form.css file and the formidable css file. This third option would allow you to leave the formidable and your commercial theme in tact and still make the specific changes to the CSS that need to be made.

My theme does not have a separate ‘form.css’ and I quite like the styling included with it for the subscriptions etc so I’d like to keep that if possible. I have added !important to several lines of the formidable css but it doesn’t seem to have any effect. Should I add it to all styles in the css? If so will this be overridden on an update? I don’t really have the time or the budget on this job to create a new css style sheet for the forms.

Do you have any suggestions? You can view the form in its current state here:  http://www.osullivansbar.ie/parties-special-events/

Thanks

It looks like the CSS that is causing problems for your check boxes is on line 641 of the bootstrap.css file. There is a float:left on the label. You can either comment out or delete that float and see if that affects your other forms(it shouldn't):
label {
padding-top: 6px;
font-size: 13px;
line-height: 18px;
float: left;
width: 130px;
text-align: right;
color: #404040;
}

Or you can add the following line of code to your theme's style.css file or whichever file your theme recommends making changes to.
#frm_form_3_container label {float:none;}

Note if you make changes to the formidable css file, these changes will be overridden when you update Formidable.

Thanks for your reply,

I have added the styling to remove the float on #frm_form_3_container label to the bootstrap file and it worked. However I'm still left with some issues to resolve. The form is not stretching to fill the available width and the input fields are not picking up their styling from formidable.

Is there a way to override the theme styles for these items so that I can style the formidable form from your settings page? Can I give the formidable forms a class of their own for example?

One more thing... is there a way to restrict visitors to selecting only 5 options from 17 listed in the checkboxes?

Formidable Pro styling will always be loaded before your theme's styling so the only way to do this in your case would be to remove the theme styling...Is the only other form on your site which you need to preserve the appearance of the subscribe to news letter field/form? Let me know where the the non-formidable forms are on your site and I can let you know which code can be removed safely to preserve those forms AND allow formidable styling to work properly.

Here is a post on limiting checkboxes. I haven't tried using this script so I am not positive that it works, but it may get you headed in the right direction.
http://formidablepro.com/help-desk/limit-checkbox-selection/

Thanks again,

Your offer is much appreciated. Form styling begins on line 600 in bootstrap.css. The search form is styled elsewhere and is not an issue here. Would you like me to send the bootstrap file to you or can you extract it yourself? I intend to use formidable for all other forms so the subscribe is really the only thing the theme css will control. I like the css3 transitions on the input boxes from the original theme (line 733 in bootstrap.css) so ideally if these can be kept for Formidable it would be great. I can tweak them after myself.

I will look at the limit checkbox solution this evening.

Many thanks.

K, taking a look at the reason the form isn't stretching all the way across the page, I am finding some HTML errors that may be causing the issue. This is the most critical one:
Error Line 71, Column 30: Unclosed element div.
<div class="background-plain">
But there are some other errors on that page too. Here is a list of all the HTML validation errors.

The reason I am hoping clearing up that HTML error helps, is because the only way I can see to get the form fields to stretch to the full length of the page is to remove the "p" out of this CSS in bootstrap.css line 29... something to do with the p tag and the margin:0 is affecting the form but I don't understand why. removing either the p or the margin:0 fixes stretch issue. Here's the code I am referring to:
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
cite,
code,
del,
dfn,
em,
img,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dd,
dl,
dt,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
}

ANy ideas what may be going on here?

If you don't want to remove one of those lines in the above message, you can try adding this with the other code you added:
.with_frm_style fieldset {width:598px;}

Ok,

Thanks Steve for the help here. Not sure how the p and margin:0 issue could be causing it. I added another form to another page using the same template and the width is fine, see: http://www.osullivansbar.ie/business-centre/

I take your suggestion also about setting the fieldset width to 598px but that means I would be stuck with that width for all forms, even say on a full-width template page, which might not be ideal.

UPDATE:: It might have something to do with the fact that the form was created with the free version of the plugin and then upgraded. In any case, changing the shortcode from [formidable id=3] to [formidable id=3 title=true description=true] has worked and now the width is fine.

I would still be very grateful for your help in editing the form styles from the theme bootstrap.css as you suggested earlier in order to be able to use the Formidable styling. The heights of the fields are still not right.

Thanks.

Okay, took a look at this and the main thing that needs to change is lines 650-665 of bootstrap.css. Change those to this to keep your formidable forms from using the styling while allowing your newsletter form to still use it...
#newsletter input,
#newsletter textarea,
#newsletter select,
#newsletter .uneditable-input {
display: inline-block;
height: 18px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: #808080;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 210px;
}

With the noted change, everything looks pretty good to me.

Hi Steve,

Thank you very much for all the help on this. Your solution worked perfectly and all is in order now. I should have seen it myself but I'm all the wiser now.

Great service and fantastic plugin. By far the best I've used. Will be recommending this for all my future installations.

Darren

Glad that got things in order...As you create other forms with different field types, you may run into a few small quirks. Let us know if you need help troubleshooting them.

Topic closed.