How do I change the color of the font in the Select All Widget?

  • Profile Image
    unadmin
    Asked on October 09, 2015 at 03:27 PM

    I want to change the grey color to white because it is hard to see with the transparent background, but when I go the designer, it doesn't pop up as an option to change the color, or adjust anything for that widget. How can I create a custom font color?

  • Profile Image
    victor
    Answered on October 09, 2015 at 06:04 PM

    Hi,

    If you open the wizard, you may add the following CSS code in the CSS tab

    label[for="selectall"]{color:red;}

    Please let us know if this helps.

    Regards

  • Profile Image
    unadmin
    Answered on October 12, 2015 at 02:50 PM

    What about the rest of the grey text that ends up on a transparent background? I was able to change the text for "select all" but the "Shoeteria (21880 Hawthorne Blvd)" is still grey. When I add future widgets I will need to change all the grey text that ends up on the transparent part to be white. But the parts that are already on the white strip can stay grey. Does that make sense?

  • Profile Image
    victor
    Answered on October 12, 2015 at 03:32 PM

    Hi,

    After reviewing and testing a bit more on the widget I have a found that the following CSS code will change the entire font color to white

    table{color:white;}.

    You can remove the previous css code

    label[for="selectall"]{color:red;}

    which will only change the header font.

    Please let us know if this helps.

    Regards

     

  • Profile Image
    unadmin
    Answered on October 12, 2015 at 07:02 PM

    Thank you for your response and the time you are taking to help me. The issue I have now is that since all the text is white, it will no longer be visible on the white parts, which is similar to the problem I have when the grey is on the transparent background. Is there a way to have it alternate?

    I am also willing to remove the white strips so that all of it is a transparent background. I just need the text to be visible.

     

    Thanks!

  • Profile Image
    KevinGarcia
    Answered on October 12, 2015 at 07:35 PM

    Hello.

     

    To do that, open the wizard, in the Custom CSS,remove all and  paste this CSS code : 

    td{ color:white;}

     

    .table-striped tbody>tr:nth-child(2n+1)>td, .table-striped tbody>tr:nth-child(2n+1)>th{

     color:#000000;

    }

     

     

    You can see my clone working here :

    https://form.jotform.co/52847628586876?

     

    I hope that helps.