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 help - how to change the size of a box

  1. Gil Namur
    Member

    Hi there,

    Being a bit 'green' at css, I wonder if you could just give me an example of how I can change something.

    I'd like to change the color of price from red to green. Can I do this by adding something to my style.css and then use the CSS Class Name option in the form?

    I'd like to make a number field appear as only 2 characters wide. Even set to small, it's still large-ish. Again, can I do this by adding something to my style.css and then use the CSS Class Name option in the form?

    I know about the tutorial link but was hoping for a quick pointer or tip .. please please!
    Thanks and cheers,
    Gil

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  2. Gil, can you post a link to your form please? All you want to accomplish should be fairly easy with CSS.

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  3. Gil Namur
    Member

    Hey Chris,

    Thanks! The site in question is in maintenance (pre launch) mode right now but here is another site: http://www.mybusinessinfo.info/order-your-web-page/

    If I wanted the price to be green (rather than red) and the total to be red (rather than green)

    This form does not have a number field like I mentioned above. But what if I wanted to make the quantity field only 2 characters wide? Right now it's 6.

    Thanks!
    Cheers,
    Gil

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  4. The class you need to target for the price field is .ginput_product_price

    [css]
    body .gform_wrapper span.ginput_product_price {
        color: green;
    }

    Gil, You'll need to view the source on your other form, grab the id of the input you want to resize and then replace the ID ( #ginput_quantity_8_6 ) in the example below with the one from your form.

    [css]
    body .gform_wrapper input#ginput_quantity_8_6 {
        width: 20px;
    }

    screenshot: http://bit.ly/nyvNxb

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  5. Gil Namur
    Member

    Kevin! You ROCK!

    All worked .. just stuck on one. I used this to try and get a single line number field to shorten.

    body .gform_wrapper input#ginput_input_6_27 {
        width: 20px;
    }

    It did not shorten .. What did I miss? (its at the hidden site not the link I sent you)
    THANK YOU!

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  6. Gil Namur
    Member

    WAIT! I got it!

    [css]
    body .gform_wrapper .gform_body .gform_fields #field_6_27.gfield input[type=text] {width: 20px}

    THANKS!

    Posted 10 years ago on Saturday August 6, 2011 | Permalink
  7. Great news. Looks like you whipped up some good specific CSS to override other styles. Very nicely done.

    Posted 10 years ago on Saturday August 6, 2011 | Permalink

This topic has been resolved and has been closed to new replies.