JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How can I remove the background color of the header?Asked by LegacySolarCoop 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.
heading mixed font header background
I would suggest you to inject this code to your form:
background: transparent !important;
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.
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?
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:
background-position: center top;
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.
This is very helpful, thank you!