-
nhamweyAsked 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
-
Kiran Support Team LeadReplied on July 28, 2017 at 1: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?
-
nhamweyReplied on July 28, 2017 at 4: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}
-
David JotForm Support ManagerReplied on July 28, 2017 at 5: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.
-
nhamweyReplied on July 28, 2017 at 5:51 PM
It works. Thank you very much
-
nhamweyReplied on July 28, 2017 at 6: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
-
David JotForm Support ManagerReplied on July 28, 2017 at 7: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;
}