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.

Styling a Background Color

  1. Dusty
    Member

    Hey guys,

    I'm trying to style a background color for my form and am encountering a few issues.

    My goal is to create a neat background color that forms a box around my form and to make the corners of the box rounded. I would like the amount of color showing to be proportional on both the left and right sides of the form.

    I added the following CSS:

    body #gform_wrapper_2 {background-color: #CCC;position: relative; padding: 20px 0 20px 20px;}

    However, as you can see on the following link, there's a massive amount of gray showing on the right side. I would like for this box to be proportional on both sides.

    http://dev.bitcadet.com/versatube/building-kits/classic-carport/pricing/

    Any ideas?

    Posted 12 years ago on Thursday May 31, 2012 | Permalink
  2. David Peralty

    Try:

    .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 88% !important;
    }

    The width of the inputs is based on a percentage of the width of the form.

    Posted 12 years ago on Thursday May 31, 2012 | Permalink
  3. Dusty
    Member

    Thanks, David.

    This resolved the issue.

    Also, what's the best way to add rounded corners to the background color?

    Posted 12 years ago on Thursday May 31, 2012 | Permalink
  4. David Peralty

    Take a look at this:
    http://css-tricks.com/snippets/css/rounded-corners/

    Posted 12 years ago on Thursday May 31, 2012 | Permalink
  5. Dusty
    Member

    Thanks, David!

    Posted 12 years ago on Thursday May 31, 2012 | Permalink
  6. David Peralty

    No problem. Good luck and let us know if anything else comes up. :)

    Posted 12 years ago on Thursday May 31, 2012 | Permalink

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