Changing the background color of the fields

  • Profile Image
    brendonl
    Asked on September 27, 2016 at 07:33 AM

    Hi I'm trying to remove borders around the individual fields so that i can create a look of the form being split into sections.  I have tried a fee different option of CSS, b cant seem to get it.

    Thanks 

  • Profile Image
    Jan
    Answered on September 27, 2016 at 11:02 AM

    Those lines are the background color of the form container. We can change the background color to light gray so that it'll look the same as the other fields. Please try inserting this custom CSS code:

    .supernova .form-all, .form-all {
    background-color: #cccccc !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes.

    Hope that helps. Thank you.

  • Profile Image
    brendonl
    Answered on September 28, 2016 at 09:37 AM

    Hi Jan,

    Thanks for the response. Except this solution changes the entire form to one colour. What I'm trying to achieve is to have sections of the form shaded different colours. There by emphasizing a group of information to be filled out.

    Thanks

  • Profile Image
    Jan
    Answered on September 28, 2016 at 11:04 AM

    The CSS code I provided above will remove all other colors in the form container. If you want to assign a different color on a field, then you can get the selector id of the field and apply CSS into it.

    In Google Chrome, you just need to right click the field and choose "Inspect". The developer tools will appear and you'll see the assigned id (id_15) to the "Job Title" field. You can now target this element using this code:

    #id_15 { background-color: green !important; }

    Here's the result:

    Here's a guide on How-to-Inject-Custom-CSS-Codes. We can help you in regards to CSS. You just need to provide the field that you want to change and your preferred color.

    Hope that helps. Thank you.

  • Profile Image
    brendonl
    Answered on September 29, 2016 at 09:17 AM

    Hi Jan,

    That's not going to help either see the effect below. So say I want to group the 3 green fields together (Full name, Job title, Email) and the next 5 fields RED. I will still have what looks like borders. In this case either green with red borders or red with green borders.

     

    I'd like the form fields grouped in sections with the use of colour, but cant'd do that if I'm unable to remove/colour the space around an individual field

     

    Thanks

  • Profile Image
    brendonl
    Answered on September 29, 2016 at 09:20 AM

    Hi Jan I figured it out thanks for all your help

  • Profile Image
    Jan
    Answered on September 29, 2016 at 11:04 AM

    Glad to hear that you figured it out. If you need any help, don't hesitate to contact us. Thank you.