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.

Form background colour

  1. Hi

    I've seen other posts where I've found info to change background colour, but I want to extend the colour so it covers the form title and has a bit of a margin on the left side like it does the right. See the link: http://www.hanburymortgages.co.uk/temp/remortgaging/

    This is what I've added to my theme style sheet:

    [css]
    body #gform_wrapper_2 {
        position: relative;
    	background-color:#CCC;
    }

    Am I adding the correct CSS?

    If it is going to bee too complicated then I may not bother but just wanted to lift the form off the page a bit.

    Thanks in advance.

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink
  2. Looks like you were headed in the right direction. You just need to add some padding values ( not margins ) to the form wrapper to make it look the way you want.

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

    screenshot: http://bit.ly/peMnzg

    Since you've absolutely positioned your submit button, you'll need to adjust that too to allow for the extra form padding.

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink
  3. Excellent, thanks.

    Also, I've added a form into a sidebar widget, and have an issue with lines appearing under the boxes. Guessing this has something to do with the theme stylesheet?

    See: http://www.hanburymortgages.co.uk/temp/buying-a-home/ and scroll to the bottom.

    Any ideas? thanks.

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink
  4. yep, it's inheriting the border from this list item rule on line 718 of your style.css file..

    [css]
    .box ul li {
        border-bottom: 1px solid #E4E4E4;
        float: left;
        width: 100%;
    }

    you'll need to override the border property for your forms.

    [css]
    .box .gform_wrapper ul li {
    	border-bottom: none
    }

    screenshot: http://bit.ly/pjn9LZ

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink
  5. You are a true legend! Thank you!

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink
  6. @aarontay You're very flattering but I do appreciate it. I'm pleased I could help.

    Posted 8 years ago on Wednesday September 14, 2011 | Permalink

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