What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    Changing color of header background?

    Asked by strategicdifferences on March 26, 2014 at 08:26 AM

    HO wcan I change the color of the header background please? I am using the pastel them with oransge text. I"ve looked at a few of the similar quesitosn on the forum and none of the CSS code seems to work for me. I currently have the following CSS code exiting in my form - just in case it conflicts with somethign I am trying to ad?

     

    .form-radio { height:15px;width:30px;}

    .form-scale-table th {color: black ;font-size: 12px;font-weight: bold;} .form-scale-table{color: transparent;font-size: 12px;font-weight: bold;}

    em{color:transparent;} .form-header {color:#E6922C} - this gives me my orange text .form-description {right: -80px;}

     

    thanks


    header background style size height table
  • Profile Image

    Answered by Carina on March 26, 2014 at 11:31 AM

    Is this http://www.jotform.co/form/40750142430845 the form you are trying to edit?

    Please insert the following css code:

    .form-header-group, {

        background-color: transparent;

        background-image: -moz-linear-gradient(center top , #333333 0%, #4A4A4A 100%);

    }

    Change the green value for the desired color. You can also add this selectors if you wish to change the color of the pagebreaks:

    .form-collapse-table, .form-pagebreak 

    Let us know if we can be of more assistance.

    If it is another form please share with us the form's url.

  • Profile Image

    Answered by strategicdifferences on March 26, 2014 at 07:55 PM

    yes that is the correct form but the code does not appear to work . Can you explain what the 0% and the secodn colour 100% acheievs please? Maybe I'm not implementing correctly?

     

    thanks!

  • Profile Image

    Answered by strategicdifferences on March 26, 2014 at 09:16 PM

    hi again - I tried your code and it conflicted with the one above and took off the empahsis hiding and the making transparent the 'worst/best' in my rating scales - coudl soemone respond please with suggested solution to my request please?

  • Profile Image

    Answered by Carina on March 26, 2014 at 09:57 PM

    moz-linear-gradient is the code for a linear gradient and it gives the coordinates where the gradient begins, as well as the percentage that each color has in order to achieve that gradient.

    If you wish you can learn more about gradients here.

    I'm very sorry that the first code didn't work as you wish. Please try this code instead to change the header's color:

    .form-header-group{

    background-color: #18e1be;

    background-image: none;}

    You can see the result here:

    http://form.jotformpro.com/form/40844262872963

    If you wish to find a color code you can see it here.

    If besides the header you wish to change the page breaks you can use this code instead:

    .form-pagebreak, .form-header-group
    {
    background-color: #18e1be;
    background-image: none;
    }

    For the best/worst label's question please consult this thread:

    http://www.jotform.com/answers/352862

    Let us know if we can be of more assistance.

    Thank you