Support » Plugin: Quiz Maker » Quiz button colours

  • Resolved ruben302

    (@ruben302)


    Hi There!

    is it possible to change colours on the ::before tag of wrong or correct answers?

    .ays-field input:checked + label.answered.wrong::before {
        border-color: #cc3700 !important;
        background: #cc3700 !important;
    }

    I would like the red box to be black, how should I target these classes?

    Greetings

Viewing 1 replies (of 1 total)
  • Plugin Author ays-pro

    (@ays-pro)

    Hi Dear @ruben302 ,

    Thank you for the topic.

    Please copy the following CSS and paste it into the Custom CSS field of the given quiz. ( Quiz Maker -> Quizzes -> the given quiz -> Styles tab -> Custom CSS)
    Please note to change the “YOUR_QUIZ_ID” to the given quiz ID of yours and change the “YOUR_HOSTING_URL” to the domain of your website. (For example: http://www.example.com/ )

    I assume you also need to change the colors of the icons to black, too. As the format of those icons is PNG, please download the black one from here: https://prnt.sc/vktbvo
    You can also check the following website: https://manytools.org/image/colorize-filter/

    Then, add that icon here: plugins\quiz-maker\public\images and it will look like this: https://prnt.sc/vkteyf

    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong{
    color:black!important;
    }
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong_div{
    border-color:black !important;
    opacity: 1 !important;
    background-color: rgb(0 0 0 / 40%) !important;
    }
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong_div .wrong{
    color:black !important;
    background-color: rgb(0 0 0 / 40%) !important;
    }
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong_answer_text{
    color:#0b0303;
    }
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong_div,
    div#ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .wrong_div{
    border-color:black !important;
    opacity: 1 !important;
    background-color: rgb(23 16 16 / 40%) !important;
    border: 1px solid;
    }
    #ays-quiz-container-YOUR_QUIZ_ID.ays_quiz_classic_dark .ays-questions-container .wrong_div,
    #ays-quiz-container-YOUR_QUIZ_ID.ays_quiz_classic_light .ays-questions-container .wrong_div {
    border-color: black !important;
    opacity: 1 !important;
    background-color: rgb(0 0 0 / 40%) !important;
    border: 1px solid;
    }
    #ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .ays-field input:checked+label.answered.wrong:before {
    border-color: #000 !important;
    background: #000 !important;
    background-clip: content-box !important;
    }
    #ays-quiz-container-YOUR_QUIZ_ID .ays-field.ays-text-field textarea.ays-text-input[disabled=”disabled”],
    #ays-quiz-container-YOUR_QUIZ_ID .ays-field.ays-text-field input.ays-text-input[disabled=”disabled”]{
    background-color: rgb(0 0 0 / 40%) !important;
    }
    #ays-quiz-container-YOUR_QUIZ_ID .ays-questions-container .ays-field input~label.answered.wrong:after{
    content: url(YOUR_HOSTING_URL/wp-content/plugins/quiz-maker/public/images/wrong-black.png);
    }

    Thanks.

Viewing 1 replies (of 1 total)
  • The topic ‘Quiz button colours’ is closed to new replies.