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.

Stylelize input form

  1. 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 7 years ago on Saturday December 15, 2012 | Permalink
  2. 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 7 years ago on Saturday December 15, 2012 | Permalink
  3. 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 7 years ago on Saturday December 15, 2012 | Permalink
  4. 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 7 years ago on Sunday December 16, 2012 | Permalink
  5. 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 7 years ago on Sunday December 16, 2012 | Permalink
  6. 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 7 years ago on Sunday December 16, 2012 | Permalink
  7. 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 7 years ago on Sunday December 16, 2012 | Permalink