PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

CSS modification

Gravity Support Forums » Plugin Support » Gravity Forms

  1. panoptic
    Member

    http://dev.panopticdesign.com/volunteer-form/

    I would like to modify the form CSS to accomplish two things with the form input boxes and drop down menus:

    (1) Use a sans serif font (Arial) rather than the default serif (Times) font.

    (2) Increase the size of the input text which is much too small in the default settings.

    I love your plugin and I understand the potential issues with modifying the plugin CSS however there should be some consideration for simple modifications including general form typography (font, color and sizes).

    Thank you.

    Posted 13 years ago on Wednesday March 2, 2011 | Permalink

  2. Carl Hancock
    Administrator

    You can change form styles by adding custom CSS to your themes stylesheet that targets the form elements. You add the custom CSS to your themes stylesheet (or custom stylesheet if it has one), so plugin updates do not overwrite your changes.

    You can read about how to target form elements with CSS here:

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    You can change font, sizes, etc. by doing this.

    Posted 13 years ago on Wednesday March 2, 2011 | Permalink

  3. Kevin Flahaut
    Administrator

    I'm not sure what you're talking about making "some consideration for simple modifications". You're able manipulate almost anything you want to via CSS if you know what you're doing.

    There are plugin defaults that you can either override with CSS placed in your theme stylesheet, or you can completely turn off the CSS output on the settings page and roll your own CSS entirely.

    The majority of the fonts are not defined by the plugin CSS, they're intended to inherit those properties from the parent theme. If you want to change those, you can do that in your theme stylesheet.

    Here's a guide that will help you target specific form elements to manipulate them to your preference.

    http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

    Posted 13 years ago on Wednesday March 2, 2011 | Permalink

  4. travin
    Member

    Lets say I have 2 classes already for a form I had made. How do I make the gravity form take on the look of my current classes, specifically, where do I make the required adjustments to the CSS. (please bear with me, I am a little clueless on some of this stuff). I already have the class in the theme's style sheet. I want it to apply to all Gravity Forms on this site.

    Here is what I have:

    The form I want Gravity Forms to look like is here:

    http://www.financialexpertspro.com/credit-monitoring

    The form classes are as follow:

    td.fldLabels {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #d63a00;
text-decoration: none;
font-weight: bold;
padding: 3px;
text-align: left;
border: none;
}
td.fldNames {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #1d2f3b;
text-decoration: none;
font-weight: bold;
padding: 3px;
text-align: left;
border: none;
}
.fldNames input {
	border: 2px solid #c4cbd0;
	background-color: #f4f3f3;
	width: 120px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #182402;
	text-decoration: none;
	font-weight: bold;
	padding: 2px;
	vertical-align: middle;
}
.fldNames input:focus {
	border: 2px solid #d63a00;
	background-color: #ffffff;
}

    Thanks in advance

    Posted 13 years ago on Friday March 4, 2011 | Permalink

  5. Kevin Flahaut
    Administrator

    This should get you close. The forms aren't in tables like your current form so they're not going to be exactly the same. You may have to tweak it a bit to suit.

    /* apply styles to the labels */

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #d63a00;
	text-decoration: none;
	font-weight: bold
}

/* apply styles to all of the standard text inputs and select boxes */

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select,
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	border: 2px solid #c4cbd0;
	background-color: #f4f3f3;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #182402;
	text-decoration: none;
	font-weight: bold;
	vertical-align: middle
}

/* apply focus styles to the inputs */

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
	border: 2px solid #d63a00;
	background-color: #ffffff
}

    Just study the visual guide and CSS targeting samples linked above and in the documentation and you'll get the hang of it pretty quickly.

    Posted 13 years ago on Friday March 4, 2011 | Permalink

  6. travin
    Member

    Ok, thanks. Do I put this code in the stylesheet, header, footer?

    Posted 13 years ago on Friday March 4, 2011 | Permalink

  7. Kevin Flahaut
    Administrator

    That would go at the end of your theme's style.css file or wherever you add custom CSS rules to your theme. In some theme's it in a custom.css file or others actually have a place in the admin to add custom CSS.

    Posted 13 years ago on Friday March 4, 2011 | Permalink

  8. travin
    Member

    Last question:

    I am trying to make the form open a new window and a target url. I looked at the appropiate posting and found this code:

    // The Gravity Form New Page JScript
jQuery(document).ready(function() {
jQuery(".gform_wrapper form").attr("target", "_blank");
});

    I put code seen about in the header.php file here but the form still redirects in the parent page. How can I fix this problem as well?

    Thanks

    Posted 13 years ago on Saturday March 5, 2011 | Permalink

  9. Kevin Flahaut
    Administrator

    Are you sure you're enqueuing the jQuery library on your page?

    Posted 13 years ago on Saturday March 5, 2011 | Permalink