How can I remove the background color of the header?

  • LegacySolarCoop
    Asked on September 28, 2016 at 6: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??

  • Kevin Support Team Lead
    Replied 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: 

    How can I remove the background color of the header?  Image 1 Screenshot 20

    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. 

  • LegacySolarCoop
    Replied 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?

  • Kevin Support Team Lead
    Replied 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.

    How can I remove the background color of the header?  Image 1 Screenshot 30

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

    How can I remove the background color of the header?  Image 2 Screenshot 41

    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. 

  • LegacySolarCoop
    Replied on September 29, 2016 at 2:18 PM

    This is very helpful, thank you!