How to change header image and background color in applied theme?

  • Profile Image
    solarpowerpanels
    Asked on July 17, 2017 at 03:52 AM

    Hi There,

    I am trying to customize this theme:

    https://www.jotform.com/theme-store/theme/notes

     

    I want to change the image and the green background.

    To change he image I've cloned it and injected this code:

    .form-header-group {

        background-image : url(http://www.solarpowerpanels.net.au/wp-content/uploads/2017/07/3.jpg);

    }

    It is looking fine in the builder but I cant see it in the preview...here it is: 

    https://www.jotform.com/build/71968149805873  ...but the preview isn't working.

     

    Also I am not sure how to get rid of the green background color? I have tried to do it in the designer but it has messed up everything...and I had to start again...Please advise.

    Thanks! Effie

  • Profile Image
    Charlie
    Answered on July 17, 2017 at 05:36 AM

    Hi,

    You can actually change the image and the color using the Advanced Form Designer Tool.

     

     

    In the Advanced Form Designer Tool, you need to select or click the header image, it will then open the "Header Styles" section where you can change the image and the background color. 

     

    However, there's a problem on the link that you have. This image link http://www.solarpowerpanels.net.au/wp-content/uploads/2017/07/3.jpg is on HTTP, which is unsecure. All the forms and our form builder runs on HTTPS protocol (SSL). This means all other resources that you will be adding in the form link embedding an image should also be in HTTPS. If not, they it will be treated as unsecure resource which will be blocked.

    If it is not possible to have the image in SSL or HTTPS. Then I have a workaround that you can use. Below are the steps:

    1. First, save the image to your local storage.

    2. After that, get back to the form builder, then add the "Image" field. 

     

    3. Here we want to upload the image in your local storage in this image field. Make sure to choose the "Upload" option. 

    4. Now view the form again, you should be able to see the image field. Right click on it and choose "Copy image address". 

     

    5. Basically, we saved the image on JotForm's server which runs on SSL or HTTPS. We can now use this image URL in the Form Designer Tool for the header image. You can delete the image field we added, no need to keep it. 

    I hope that helps. 

  • Profile Image
    solarpowerpanels
    Answered on July 17, 2017 at 10:40 AM

    Thank you! works great! Brilliant explanation!!

    Thanks!

    Effie