Stylelize input form « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

slui
Member

Hi,

I'm really struggling to get a single input form stylized to match up with the other form input in the template such as search. I've read the documentation and I'm not getting it. I would really appreciate someone who could help out by telling me how to stylize this one input field.

I can then take this and stylize the rest. I've been working on this for 4 days and I'm at my wits end.

Sorry, I'm just not that bright at this. I've also used firebug to help me try to pinpoint the exact css to use and it hasn't helped.

You can scroll to the bottom of the page and see the subscriber form here.

http://bit.ly/UYESZ6

Thanks in advance.

Posted 12 years ago on Saturday December 15, 2012 | Permalink
slui
Member

Okay..I've managed to use Firebug to help me pinpoint the input container and I also manage to style it the way I want within Firebug.

<input id="input_3_1" class="medium " type="text" tabindex="1" value="" name="input_1" style="height: 16px; padding-top: 10px; padding-bottom: 10px; margin-top: -12px; width: 185px; padding-left: 2px;">

How do I go about creating the appropriate CSS to execute this?

I know that I need to target input_3_1 but I'm not sure how. I've looked in the documentation and have tried variations of what was there and I can't get the "style" to reflect in that one single box. Any help is greatly appreciated!!!!

Posted 12 years ago on Saturday December 15, 2012 | Permalink
slui
Member

I've made an attempt to isolate the issue and I've tried my best to use the documentation to stylize the white field box. For whatever reason, I'm only able to stylize the container itself but the container description

1.
body #gform_wrapper_6 .gform_body .gform_fields .gfield .gfield_description {border: 1px solid red}

2.
body .gform_wrapper .gform_body .gform_fields #field_6_1.gfield .ginput_container {border: 1px solid yellow; height: 38px;}

I can get number 2 to work but not number one. Does anyone know why? Is this a bug?

sl

Posted 12 years ago on Saturday December 15, 2012 | Permalink

slui

if you want to increase the size of that input field and change the border just use the following and not no. 2

.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea {
    border: 1px solid yellow;
    padding: 11px 0;
    width: 99.2%;
}

Posted 12 years ago on Sunday December 16, 2012 | Permalink

slui
Member

Thanks so much viennalimos. It worked nicely. Where did you find this in the documentation? I didn't see the use of .top_label input.large, etc..

Can you also explain to me why I have to do this? Why the input, select and textarea? I want to learn so that I can do this next time. Thanks.

Posted 12 years ago on Sunday December 16, 2012 | Permalink
slui
Member

Now that the height is correct, how do I go about doing the following:

1. Shifting the textarea up -15px so that I minimize the space above and it is consistent with all the other titles in the footer with space below it.

2. Adjusting the left side and right side padding so that the text is similar to the text inside the search form (higher up on the page).

Thanks.

Posted 12 years ago on Sunday December 16, 2012 | Permalink

viennalimos
Member

You mentioned firebug which no one can live without it , it will give you everything you need with a very little knowledge of CSS .
use the following code and your field will look exactly as your search field .

.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea {
    border: 1px solid #DDDDDD;
    color: #818181;
    font-size: 13px;
    padding: 10px 10px 10px 18px;
    width: 168px;
}

.gform_wrapper .gform_footer {
    clear: both;
    margin: 0;
    padding: 10px 0;
}

Posted 12 years ago on Sunday December 16, 2012 | Permalink