Customisable Answer Feedback Page Elements Using CSS
Customisable Answer Feedback Page Elements Using CSS
Use the following CSS style IDs and Class Names to create custom views within your email answer feedback page:
See the full list of customisable elements:
.user-report-wrapp – Main container for the entire feedback content
.report-image – The GIF displayed when answer is correct
.report-thanks__wrapper – Container for the thank you message and pre-question text
.report-thanks – “Thanks, FIRSTNAME” message
.report-pre-question – “You got the answer right!” or “Take A Look At The Correct Answer Below”
.report-thanks – “Thanks, FIRSTNAME” message
.report-pre-question – “You got the answer right!” or “Take A Look At The Correct Answer Below”
.report-question – The question text
.report-items-wrapp – Container for all answer options
.report-answer-item – Individual answer option container
.report-answer-item.correct – Correct answer highlighting
.report-answer-item.incorrect – Incorrect answer option
.report-answer-item–incorrect – User’s incorrect answer highlighting
.report-answer-item__text – Answer text
.report-answer-item__answer – “Your Answer” label
.report-answer-item__message – Feedback message for the answer
.report-answer-item – Individual answer option container
.report-answer-item.correct – Correct answer highlighting
.report-answer-item.incorrect – Incorrect answer option
.report-answer-item–incorrect – User’s incorrect answer highlighting
.report-answer-item__text – Answer text
.report-answer-item__answer – “Your Answer” label
.report-answer-item__message – Feedback message for the answer
.report-link__wrap – Container for the “read more” section
.report-link__desc – Description text before the link
.report-link__link – The actual link to additional content
.report-link__desc – Description text before the link
.report-link__link – The actual link to additional content
.performstatsmsg – “Here are your performance stats for today” heading
.report-cards – Container for all stat cards
.report-cards__wrapper – Inner wrapper for stat cards
.report-cards__item – Individual stat card
.report-cards__item-icon-wrap – Container for the stat icon
.report-cards__item-icon – The stat icon itself
.report-cards__item-icon–1 – First stat icon (people count)
.report-cards__item-icon–2 – Second stat icon (score percentage)
.report-cards__item-icon–3 – Third stat icon (ranking)
.report-cards__item-icon-value – Percentage value in score icon
.report-cards__item-icon-text – Text below icon
.report-cards__item-text – Stat description text
.report-cards__item-text–accent – Highlighted text within stat
.report-cards – Container for all stat cards
.report-cards__wrapper – Inner wrapper for stat cards
.report-cards__item – Individual stat card
.report-cards__item-icon-wrap – Container for the stat icon
.report-cards__item-icon – The stat icon itself
.report-cards__item-icon–1 – First stat icon (people count)
.report-cards__item-icon–2 – Second stat icon (score percentage)
.report-cards__item-icon–3 – Third stat icon (ranking)
.report-cards__item-icon-value – Percentage value in score icon
.report-cards__item-icon-text – Text below icon
.report-cards__item-text – Stat description text
.report-cards__item-text–accent – Highlighted text within stat
Read the rest of our Knowledge Base pages to make the most of Impact Focus.
39