How can I remove the background color of the header?

  • Profile Image
    LegacySolarCoop
    Asked on September 28, 2016 at 06:28 PM

    Somehow I've gotten messed up and mixed up. The background of my theme wasn't lining up right with the header, so (I though) I was able to adjust it with CSS, then removed it altogether. 

    Then, someone, I was able to set an actual background color for the header, which I did. The result was not satisfying as it created a box around the heading text that just sort of floated in the top of the form. 

    So now, to my surprise, both are showing and I can't figure out how to remove either one again! I wish I could make the header background work to my liking, but since I can't, I'll just have the same background as the rest of the form and make the header font orange instead. 

    But how??

  • Profile Image
    Kevin_G
    Answered on September 28, 2016 at 11:45 PM

    I would suggest you to inject this code to your form: 

    .form-header-group{

     background: transparent !important;

    margin-top: -2%;

    }

    This way you will remove the current orange background for the heading text, this guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    This should be the result: 

    Here is also the link to my cloned form of yours if you want to take a look to the live sample: https://www.jotformpro.com/form/62718969385980 

    Hope this helps. 

  • Profile Image
    LegacySolarCoop
    Answered on September 29, 2016 at 11:02 AM

    Thank you, but, I know before I both created and disabled the background color with a design setting somewhere. Are you able to direct me to the actual setting instead of a CSS override?

  • Profile Image
    Kevin_G
    Answered on September 29, 2016 at 12:29 PM

    I have found a way to change the background color of the form header, you need to click on it and then you will get the option to style the element.

    But do note that this applies to the header element added from the Basic Fields in the Form Builder:

    If there is other CSS injected code that affects the header then the change you do in the Advanced Designer may not have effect.

    Now regarding to the orange background that you can see at the top of the form, it is an image and it has been applied to the form theme you're using which is this: https://www.jotform.com/theme-store/theme/lovely-orange 

    This is why you cannot change this in the Advanced Designer, maybe what you found before was the first option about changing the header element background color.

    If you would like to change the background orange color then you will need to replace the image or change the header style. 

    For example, this is the code by default in the theme that changes the color: 

    .form-all {

        background-image: url(https://www.jotform.com/uploads/banMedo/form_files/8.png);

        background-repeat: no-repeat;

        background-attachment: scroll;

        background-position: center top;

        background-size: cover;

    }

    In the "background-image" you will find the URL to the current image used, if you would like you may also set another image with your custom color. 

    Please if you have any question, let us know. 

  • Profile Image
    LegacySolarCoop
    Answered on September 29, 2016 at 02:18 PM

    This is very helpful, thank you!