Help with changing the link color on Terms & Conditions widget.

  • Profile Image
    mobilwalk
    Asked on September 07, 2016 at 05:41 PM

    Hello, I am using the Terms and Condition widget and I want to change the colors for all types of links to #00c363. I have injected the following CSS in the form but nothing is changing.

     

    .form-all a {

    text-decoration: none;

    color: #00c363;

    }

    .form-all a:hover {

    text-decoration: none;

    color: #00c363;

    }

    .form-all a:visited {

    text-decoration: none;

    color: #00c363;

    }

    .form-all a:active {

    text-decoration: none;

    color: #00c363;

    }

     

    I also tried a{color: #00c363;}, #_terms{color : #00c363;}, and a#_terms{color : #00c363;} with no effect.

     

    How do I edit that link color?

     

    Form is here: https://www.jotform.us/form/62366838577169?preview=true

     

  • Profile Image
    Kevin_G
    Answered on September 07, 2016 at 09:22 PM

    This code currently works: 

    a{color: #00c363;}

    But I presume you are injecting it directly to your form as described on this guide: How-to-Inject-Custom-CSS-Codes

    Please do note that this injected code will not affect the content in the widget, widgets work in a different way than basic fields, to inject the CSS code to your form you need to click on the wizard icon: 

    Once there go to the Custom CSS tab and paste the code there, all the code pasted here should affect the elements in the form: 

    Hope this helps. 

  • Profile Image
    mobilwalk
    Answered on September 09, 2016 at 05:59 PM

    I have done as you have suggested and there is no change.

     

    Color is still default blue/purple.

  • Profile Image
    Kevin_G
    Answered on September 09, 2016 at 07:18 PM

    The color has indeed changed, but there is another CSS code that changes the color when the link is already visited. 

    If I disable that custom color when the link has been visited, then the color that you need takes effect: 

    If you need the color to be the same  always then you need to add the next CSS code: 

    /* unvisited link */

    a:link {

        color: #00c363;

    }

    /* visited link */

    a:visited {

        color: #00c363;

    }

    /* mouse over link */

    a:hover {

        color: #00c363;

    }

    /* selected link */

    a:active {

        color: #00c363;

    }

    Inject the code following the steps given on my reply above, here is also a link that will provide you with more info about styling links: http://www.w3schools.com/css/css_link.asp 

    Hope this helps. 

  • Profile Image
    mobilwalk
    Answered on September 12, 2016 at 11:41 AM

    Thank you, that worked.