Color of Elegant Style Answer

  • Resolved jrinnc

    (@jrinnc)


    2 years, 7 months ago

    When styling a survey, I like the “Elegant” theme the most, but when a radio button or checkbox is used for answers at the box is clicked, the entire answer turns dark blue on black so is no longer readable. This should just select the radio/check box, NOT block out the entire answer. How can this be changed?

    For the other themes, is there any way to add a line between questions and/or a box around them similar to the elegant theme?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jasmine

    (@hyenokian)

    2 years, 7 months ago

    Dear @jrinnc,

    Thank you for the topic.

    As to the first request.
    At the moment, unfortunately, the plugin doesn’t have an option for this.
    By the way, our Dev Team has created a new CSS code to help you achieve your desired result. 

    You need to take this Custom CSS code and insert it into the Surveys > particular survey > Styles tab > Custom CSS option.

    Then, replace YOUR_SURVEY_ID with the corresponding Survey ID (div[id*=”ays-survey-container-3″][data-theme=”elegant”].ays-survey-container).
    Do not delete the space after it.
    Clear the cache afterward.

    We have set the red color, but you can write any color you prefer.

    div[id*="ays-survey-container-YOUR_SURVEY_ID"][data-theme="elegant"].ays-survey-container .ays-survey-section-questions > .ays-survey-question.ays-survey-elegant-theme-question .ays-survey-question-content > .ays-survey-question-answers .ays-survey-answer-elegant-hover.ays-survey-answer-elegant-active:not(div[id*="ays-survey-container-YOUR_SURVEY_ID"][data-theme="elegant"].ays-survey-container .ays-survey-section-questions > .ays-survey-question.ays-survey-elegant-theme-question .ays-survey-question-content > .ays-survey-question-answers .ays-survey-answer-elegant-hover.ays-survey-answer-linear-scale-radio.ays-survey-answer-elegant-active),
    div[id*="ays-survey-container-YOUR_SURVEY_ID"][data-theme="elegant"].ays-survey-container .ays-survey-submission-questions-answers .ays-survey-answer-elegant-hover.ays-survey-answer-elegant-active:not(div[id*="ays-survey-container-YOUR_SURVEY_ID"][data-theme="elegant"].ays-survey-container .ays-survey-submission-questions-answers .ays-survey-question-answers .ays-survey-answer-elegant-hover.ays-survey-answer-linear-scale-radio.ays-survey-answer-elegant-active) {
    background-color: red !important;
    }

    As to the second case, please clarify your request as I am not sure I understand it correctly.
    Please provide us with a screenshot of which line you are referring to.
    Also, please provide us with the link, where the given survey is located for further investigation of your case.

    Thank you.

    Thread Starter jrinnc

    (@jrinnc)

    2 years, 7 months ago

    Thank you for the custom code — that worked excellent!

    For the line I was asking for between questions in the other themes, I found I was able to achieve the result I wanted by using html for each question and inserting a horizontal rule <HR> just above the question text.

    Thanks again!

    Plugin Support Jasmine

    (@hyenokian)

    2 years, 7 months ago

    Dear @jrinnc,

    Thank you for your reply.

    Glad to hear that everything works fine for you now.

    If your query is resolved, please take a moment to rate and review the plugin or support.

    Many thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Color of Elegant Style Answer’ is closed to new replies.