How to customize a theme

  • Profile Image
    hetotheha
    Asked on October 20, 2016 at 12:22 AM

    Hi there,

    Regarding this theme: https://www.jotform.com/theme-store/theme/blue-variations

    I need to move the "Let's get in Touch" JPEG image button slightly right to fit my content across different devices.

    Do anyone has suggestions?

    Thank You!

  • Profile Image
    olivia
    Answered on October 20, 2016 at 08:31 AM

    I checked your form and I cloned it to my side. I used the theme in the form that you want to use. 

    As you mentioned in your post, animated gift was in front of the header text in mobile device as shown below image.

     

    My suggestion is to change text-size of header text and position of the animated gift by injecting custom css to your form. You can see the custom css code below. If you don't know how to inject custom css, please follow the guide:How to Inject Custom CSS Codes

    .form-header-group:after{

        top:10px;

    }

    #header_1 {

        font-size:20px;

    }

    When you inject, you will see your form in mobile devices like image below.

     

    In addition to that, please use our Mobile Responsive Widget. Please have a look at the image below that describes how to do that:

      

    If you need any further assistance, please feel free to let us know.

    Thank you.

     

  • Profile Image
    Cardellw
    Answered on October 21, 2016 at 07:21 AM

    -

  • Profile Image
    hetotheha
    Answered on October 21, 2016 at 07:24 AM

    Hi Olivia,

     

    Sorry about it but there is an error on my side: It should be the "Let's get in Touch" JPEG image button and not an animated gif(I have since edited it).

    However, on the other hand, it should be this theme instead: https://www.jotform.com/theme-store/theme/blue-variations

    The actual form is at this address: https://form.jotform.me/62930883046460.

     

    Sorry for the trouble and Please advise!

    Thank You:)

  • Profile Image
    owen
    Answered on October 21, 2016 at 07:37 AM

    Hi,

    You want the "Let's Get in Touch" image to move to the right. Here is the custom CSS code to apply this:

    .form-all:before {

        left: -120px;

    }

    If you think it moved too right  or otherwise you can make it go left or right again by changing the "120" value. Make sure the minus stays within tough.

    Thank you for contacting us. Do let us know whenever you need assistance. 

  • Profile Image
    hetotheha
    Answered on October 21, 2016 at 07:40 AM

    Hi Owen and Olivia,

     

    Noted with Thanks! I will try it out now.

     

    Thank You once again:)