Forum Discussion

FrankWeber-b606's avatar
FrankWeber-b606
Community Member
6 months ago

Rise 360: Adjust color of checkmarks

Hi,

I am creating courses in Rise360 that use a custom theme color. The color is fine and things look good - except for the checkmarks in knowledge checks. (see screenshot - the faint contrast between the white background and the yellowish checkmark really isn't very good) The customer asks for a change and I told him that I can't influence the color of the checkmarks as it is generated automatically based on the theme color - and we would like to keep that.

But I'm thinking that maybe there is a trick to adjust the color of the checkmarks without touching the theme color? Does anyone know a workaround? Maybe the color could be adjusted in the CSS-File after the HTML-course has been published? Or is there any other solution?

Kind regards,

Frank

 

accessibility
rise 360
  • FrankWeber-b606's avatar
    FrankWeber-b606
    Community Member
    4 months ago

    Hi John, hi Phil,

    Thank you both for your great input and suggestions!  I will surely give it a try.
    Kind regards,

    Frank

  • PhilFoss's avatar
    PhilFoss
    Community Member
    5 months ago

    If you are going the CSS route as a solution, I would recommend tapping into Rise's design system and the built-in theme contrast vars, it makes the modification a bit more reusable. Especially good if you have a light theme color like the yellow.

    .quiz-multiple-response-option--selected .quiz-multiple-response-option__indicator {
  background-color: var(--color-theme);
}

.quiz-multiple-response-option--selected .quiz-multiple-response-option__check {
  color: var(--color-theme-contrast);
}

     

     

     

     

     

  • JohnPinkster-19's avatar
    JohnPinkster-19
    Community Member
    6 months ago

    Hey FrankWeber-b606 This is very achievable! Here is the CSS you could use after you publish your course. Just drop this in the inhdex.html file in the <head> section with a <style> element. 

    .block-list__checkbox {
    border-color: #000000 !important;
    --color-background: #000000 !important;
}

.block-list__checkbox .block-list__checkbox__icon {
    color: #FFFFFF !important;
}

    The other thing you could do is check out the Mighty! Chrome extension which adds this as a Mighty Mod plus tons of other great features! No post-publishing processes needed  

  • EricSantos's avatar
    EricSantos
    Staff
    6 months ago

    Hello Frank,

    Thanks for reaching out! As you have correctly pointed out, checkmark colors are currently based on the Theme color. I informed our product team of your need to select a custom color for checkmarks, and we'll let you know if there are any changes that might help.

    In the meantime, here's how we manage feature requests that we receive.

Related Content