Want to change the background to the text.

  • agapeadventures
    Asked on February 17, 2016 at 10:48 AM

    Hi, I am making a new form and have a background image, but the text in the form has a colour behind which I either want to remove or make a block colour but keep the background image. 

    How do I do this? 

  • Huberson
    Replied on February 17, 2016 at 2:43 PM

    Hello,

    To remove the background color from the text inject the following CSS code. It will change it to transparent:

    .form-html span{

        background-color: transparent!important; 

     

    }

    If you still want the background use this one:

    .form-html{

        background-color: #FFF!important;  

    }

    In case you want the background color other than white, adjust both the background for the texts and container as follow: 

    .form-html, .form-html span{

         background-color: #333!important;  

    }

     

    Please let us know if you need further assistance!

  • johnsonjohn2016
    Replied on February 17, 2016 at 3:03 PM

    Hi,

     

    You want to remove the background colour of the text, for that you need to edit the HTML and remove the inline code “background-color: #ffffff;

     

    Following are the steps for the same:

    1)     Click on the text.

    2)     You can see “Edit HTML” on the top right on the text, click on that.

    3)     Click on the first icon/ menu option which says “Sourc Code”

    4)     You will get the pop-up window, go-ahead and remove the code “background-color: #ffffff;

     

    I think your background image is have some dark portions, people will have difficulty in reading the text and will have a bad user experience. I suggest if you wish to remove the text background colour, then you change the colour of the text so that it’s visible on the background image.

     

    Following are the steps to change the text colour:

    1)     Click on “Preferences” Menu.

    2)     Then click on “From Style” tab.

    3)     Go to “Inject Custom CSS”

    4)     And change the colour for the line

    “.form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #fff;”

     

    Hope this will resolve your issue.

     

    Thanks

     

     

  • agapeadventures
    Replied on February 17, 2016 at 3:46 PM
    Thanks, where do I input the code?
    Sent from my iPhone
    ...
  • Chriistian Jotform Support
    Replied on February 17, 2016 at 9:49 PM

    Please follow this guide to find out where to input the css code: How to Inject Custom CSS Codes
    Do let us know if you need further assistance.