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.
