[ARCHIVED] How to change the module "accent color"?

[KietVo]

Hello, please see below picture.  What I'm trying to do is change that thin green bar and iconography to a different color (orange, if that's relevant).  I've managed to change the colors of the entire classroom using the Themes page, but there were not any options to change this green bar and iconography for some reason!

Thank you for your help.

[James]

@KietVo 

The existing CSS to change the accent bar is

.ig-list .ig-row.ig-published:not(.student-view)::before {
  background-color: #00ac18;
}

You will need to supply a custom CSS file to override that. You will want to make sure that your CSS selector is more specific than the default to make sure yours overrides theirs. 

For example, this will change the bar to orange.

#context_modules .ig-list .ig-row.ig-published:not(.student-view)::before {
  background-color: orange;
}

To change the color for the icon, you can use

#context_modules .ig-list .ig-row.ig-published:not(.student-view) .ig-type-icon {
  color: orange;
}

You mentioned classroom, but I want to make sure you realize that changing the theme affects all courses within the account, not just those for a single course.

[KietVo]

Incredible!  Thank you for the assistance and word of caution :).  I'm going to learn how to do that right now. Unfamiliar with CSS but I'm sure it's not too bad to learn

[Chris_Hofer]

Hello @KietVo ...

In addition to the awesome help that @James gave you, I would just maybe give a slight word of caution that if you do change those colors, then they will not match the colors displayed in any of the Canvas Guides here in the Community.  So, if you have faculty wondering why the Guides show green but your colors are showing orange, there may be some slight confusion...if that is at all important to you.  I know it's not like changing icons or wording, but it could cause potential confusion for some, so I just thought I'd throw that out there.  I'm glad James was able to provide you with CSS code to accomplish what you want in your Canvas environment.