Forum Discussion

FrankWeber-b606's avatar
FrankWeber-b606
Community Member
2 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
  • EricSantos's avatar
    EricSantos
    Staff
    2 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.

  • JohnPinkster-19's avatar
    JohnPinkster-19
    Community Member
    2 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  

  • PhilFoss's avatar
    PhilFoss
    Community Member
    2 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);
}

     

     

     

     

     

  • FrankWeber-b606's avatar
    FrankWeber-b606
    Community Member
    9 hours ago

    Hi John, hi Phil,

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

    Frank

Related Content