Customizing Terms & Condition Widget

  • Profile Image
    PrototypeNextGen
    Asked on January 03, 2019 at 06:39 PM

    Hello,

    I submitted a request about customizing the "Terms & Condition" widget.  I received the below reply which is perfect except instead of a white bold checkmark, there is instead the text "2713"

    Is there a way to have this custom CSS provided below but instead of showing "2713" show a bold white checkmark?

    Thanks

    .icheckbox_minimal, .icheckbox_minimal.checked.hover {width: 20px !important; height: 20px !important; border:1px solid rgb(118,213,214) !important; background:none; } .icheckbox_minimal:hover, .icheckbox_minimal.checked {background:rgb(118,213,214) !important; } .icheckbox_minimal.checked:after {content: "2713"; color: #fff; font-weight: bold; position: relative; top: 0; left: 3px; } .icheckbox_minimal, .icheckbox_minimal.checked.hover {background-position: unset; } input#userInput {z-index: 1111; } ins.iCheck-helper {z-index: 111111; }

     

  • Profile Image
    jherwin
    Answered on January 03, 2019 at 10:49 PM

    Replace the custom CSS Code with this:

    .icheckbox_minimal, .icheckbox_minimal.checked.hover {width: 20px !important; height: 20px !important; border:2px solid rgb(118,213,214) !important; background:none; } .icheckbox_minimal:hover, .icheckbox_minimal.checked {background:rgb(118,213,214) !important; } .icheckbox_minimal.checked:after {content: "\2713"; color: #fff; font-weight: bold; position: relative; top: 0; left: 3px; } .icheckbox_minimal, .icheckbox_minimal.checked.hover {background-position: unset; } input#userInput {z-index: 1111; } ins.iCheck-helper {z-index: 111111; }

    I just added "\" to adjust the CSS code and to display the check mark.

    Guide: How to Inject CSS Codes to Widgets.

    Result:
    1546573727result.png