Support Forum

 
You must be logged in to post
Search Forums:


 






Wildcard Usage:
*    matches any number of characters
%    matches exactly one character

Support Forum Formidable Change font color for check box and radio fonts

Change font color for check box and radio fonts

Information/How to
Page:   1  
No Tags
UserPost

2:40 pm
December 17, 2010


Mike
1

Hi! Firstly, great plug-in!

We are trying to create a form on our site, which has a black background. Everything is working great, but the fonts associated with radio/check boxes are a dark purple and can't be read with a black background.

 

Is there a quick way to change the font color on those?

 

I appreciate any help or assistance you can offer.

5:22 pm
December 17, 2010


Steph
2

If you're not familiar with CSS, the easy answer is upgrade to pro. Sorry!

3:18 pm
December 28, 2010


dbarry
3

I just downloaded and installed the free Formidable and was impressed with how easy and intutive it is to use.  But I have the same issue as above with the font color in the field labels.  I've looked at my css and can not find where to make a change.  I have another form on the website using a different plugin for a "contact us" page and it accepts the theme font colors for the form.  Is there any advice outside of buying Pro that you can offer?  Thanks.

12:24 pm
December 29, 2010


Steph
4

I'll be making this change in the next release. Open formidable/css/frm-display.css and replace the styling there with this:

 

.with_frm_style .form-field label.frm_pos, .with_frm_style .form-field label.frm_pos_, .with_frm_style .form-field label.frm_pos_top, .with_frm_style .form-field label.frm_pos_left, .with_frm_style .form-field label.frm_pos_right, .with_frm_style .form-field label.frm_pos_none{font-size:12px;font-weight:bold;float:none;text-align:left;margin:0;padding:0;width:auto;display:block;}
.with_frm_style .form-field label.frm_pos_top, .with_frm_style .form-field label.frm_pos_{display:block;float:none;width:auto;}
.with_frm_style .frm_pos_top{display:block;}
.with_frm_style .frm_pos_left{float:left;padding-right:10px;width:150px;}
.with_frm_style .frm_pos_right{float:right;padding-left:10px;width:150px;}
.with_frm_style .frm_pos_none{display:none;}
.with_frm_style .form-field{margin-top:15px;}
.with_frm_style .form-field.frm_blank_field label{color:#be2e17;}
.with_frm_style .frm_blank_field input, .with_frm_style .frm_blank_field textarea, .with_frm_style .frm_blank_field select, .frm_form_fields_error_style, .with_frm_style input.error, .with_frm_style textarea.error, .with_frm_style select.error{border:1px solid #be2e17;}
.with_frm_style ul#frm_errors{list-style:square inside url(../images/error.png);margin:0;padding:0;}
.with_frm_style .frm_checkbox, .with_frm_style .frm_radio{display:block;margin:0;}
.with_frm_style input[type="radio"], .with_frm_style input[type="checkbox"]{width:auto;margin-right:3px;}
.with_frm_style fieldset{border:none; margin:0; padding:0;}
.with_frm_style p.submit{padding-top:20px;padding-bottom:20px;}
.with_frm_style .form-field p.description, .with_frm_style .form-field div.description{margin:0;padding:0;font-size:11px;font-weight:normal;text-align:left;font-style:normal;}
.with_frm_style .form-field input, .with_frm_style .form-field select, .with_frm_style .form-field textarea, #content .with_frm_style .form-field input, #content .with_frm_style .form-field select, #content .with_frm_style .form-field textarea{font-size:13px;}
.with_frm_style .form-field input, #wpcontent .with_frm_style .form-field select, .with_frm_style .form-field select, .with_frm_style .form-field textarea{border-width:1px;border-style:solid;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;width:400px;font-size:13px;padding:2px;}
.with_frm_style .form-field input.auto_width, .with_frm_style .form-field select.auto_width, .with_frm_style .form-field textarea.auto_width{width:auto;}
.with_frm_style .form-field input:focus, .with_frm_style .form-field select:focus, .with_frm_style .form-field textarea:focus, .with_frm_style .frm_focus_field input[type='text']{border-color:#dddddd;}
.with_frm_style .form-field .frm_radio label, .with_frm_style .form-field .frm_checkbox label{display:inline;}
.with_frm_style .form-field .frm_radio input[type="radio"], .with_frm_style .form-field .frm_checkbox input[type="checkbox"]{margin-right:5px;width:auto;}
.with_frm_style .form-field input[type="radio"],.with_frm_style .form-field input[type="checkbox"]{width:auto;}

11:33 am
January 2, 2011


dbarry
5

Steph – thanks for the reply and suggestion.  At first I didn't think it solved the problem but I deleted the page and started over and it works fine now.  Thank you.

9:04 pm
January 3, 2011


Steph
6

Maybe you could post a link to your form that I could look at?

7:03 pm
January 15, 2011


LadyM
7

Hi Steph,

 

I also have a black background but and cant see the field name text or the text displayed once a response is submitted because it is a dark grey.  I don't know where to go to change the text color in the CSS scripting.  Can you please help?  Thanks :-)

1:47 pm
January 17, 2011


Steve
8

LadyM,

I think steph answered this in an above post…but the css is found here:

formidable/css/frm-display.css –I would not recommend editing this file because you will lose any changes when you upgrade to the next version of formidable. Instead you should either upgrade to Formidable Pro so you can make the changes right from the formidable settings section or you should add the following CSS to your Theme CSS file:

.with_frm_style .form-field label.frm_pos,
.with_frm_style .form-field label.frm_pos_, .with_frm_style .form-field
label.frm_pos_top, .with_frm_style .form-field label.frm_pos_left,
.with_frm_style .form-field label.frm_pos_right, .with_frm_style
.form-field label.frm_pos_none {
color: #222222;
}
Replace the color: #222222; with whatever color you would prefer.
Information/How to
No Tags
Page:   1