Text color not changing for the sliders with calculated result widget

  • Profile Image
    nhamwey
    Asked on July 28, 2017 at 11:05 AM

    I am using the Sliders With Calculated Result widget and want to change up the design.

    When using the custom CSS area, I am able to design the slider's text and have it appear correctly while in the "Build" section of the form creator.

    But when I publish the form, the changes are not present and the html I add in is now gone.

     

    Using td.label_row {color: red;} works when published, but I need to individually make the text on each slider a different color, so this does not work for me.

    I think it is a matter of just adding in the sliderID but I am having trouble getting that to work.

     

    Thanks

  • Profile Image
    Kiran
    Answered on July 28, 2017 at 01:29 PM

    I have cloned your JotForm to my account and see that the widget is displaying the text normally on both edit and preview modes. As I check the custom CSS section of the widget, I see that there is no code added to change the color. Could you provide us with the CSS code that you are trying to add to the widget so that we can check it further?

     

  • Profile Image
    nhamwey
    Answered on July 28, 2017 at 04:14 PM

    Yeah there is no code in there as I have been changing and trying different things.

     

    It works using td.label_row, I just need to know what to put if I want to specify the individual rows instead of all of them.

    There is a sliderid="0" in the code, which is what I think I need, but dont know how to format the beginning of the code.

    ie. td.label_row sliderid.0 {code}

  • Profile Image
    BDAVID
    Answered on July 28, 2017 at 05:43 PM

    Try with this code to target each label:

    .sliderTable tr:nth-of-type(1) td.label_row   {

    color: red;

    }

    .sliderTable tr:nth-of-type(2) td.label_row   {

    color: blue;

    }

    .sliderTable tr:nth-of-type(3) td.label_row   {

    color: green;

    }

    .sliderTable tr:nth-of-type(4) td.label_row   {

    color: darkblue;

    }

    .sliderTable tr:nth-of-type(5) td.label_row   {

    color: yellow;

    font-weight: bold;

    }

    Result: https://form.jotformpro.com/72086437179970 

    Let us know if you need anything else, we will be glad to assist you.

  • Profile Image
    nhamwey
    Answered on July 28, 2017 at 05:51 PM

    It works. Thank you very much

  • Profile Image
    nhamwey
    Answered on July 28, 2017 at 06:07 PM

    Any way to just get those circle letters in the colors while the rest of the text stays black?

    Tried a <span> in the "General" settings, and again it works in the Builder but not when published.

    Thanks

  • Profile Image
    BDAVID
    Answered on July 28, 2017 at 07:28 PM

    Remove the circle letters, and put them through this custom CSS code:

    .sliderTable tr:nth-of-type(1) td:nth-of-type(1):before{

    content: "Ⓤ " !important;

    color: red;

    }

    .sliderTable tr:nth-of-type(2) td:nth-of-type(1):before{

    content: "Ⓢ " !important;

    color: blue;

    }

    .sliderTable tr:nth-of-type(3) td:nth-of-type(1):before{

    content: "Ⓢ " !important;

    color: green;

    }

    .sliderTable tr:nth-of-type(4) td:nth-of-type(1):before{

    content: "Ⓦ " !important;

    color: darkblue;

    }

    .sliderTable tr:nth-of-type(5) td:nth-of-type(1):before{

    content: "Ⓘ " !important;

    color: yellow;

    }

    Result: https://form.jotformpro.com/72086437179970