[ARCHIVED] Colours in TEXT HEADERS

[george_hatsidim]

Hi,

is there any way to add Color in the Text Headers as used in the modules? For that matter can you format the text at all? I am trying to segment the pages in the modules and either color coding or formatting would greatly assist the student view. Otherwise seems rather bland and as we all know it's optimal to differentiate different parts of the content.

thanks,

George.

[Stef_retired]

 @george_hatsidim , this is not possible on the front end of Canvas, and accessibility standards hold that color alone should not be used as a content differentiator (per Tips on Designing for Web Accessibility • Tips for Getting Started • WAI ). Perhaps a clever developer has written code to accommodate this, so I've shared your question with the Canvas Developers group; their replies will appear as part of this discussion, so you don't have to join the group to see them.

I have had some success using various unicode symbols in my module text headers by copy-pasting them into the text header field.

You can find symbols here: Unicode® character table 

[James]

 @george_hatsidim ,

I'm in complete agreement with stefaniesanders, Canvas, and the web accessibility standards when it comes to not using color and formatting as the only way to distinguish things. If you go this route, make sure that there is some other way to distinguish items as well like the icons.

Making this change would need to be done at the account or at least sub-account level and so it would apply to all courses in that account, not just an individual professor's. Individuals can easily modify the text, perhaps using Unicode characters as Stefanie mentioned, but modifying the overall look and feel should be done in a consistent way for the benefit of the students, so it cannot be done at the course level. There have been requests to allow course-level changes to the CSS styling, but those have not resulted in changes.

The disclaimers out of the way --- there was a similar question at the beginning of 2017 that might provide some insight: Changing colors of *certain* modules  and the feature idea that I referenced https://community.canvaslms.com/ideas/6767 . That feature idea is resides in Cold Storage, which is where content is archived, and you'll have to join the group if you want to read the content in the second link.

[george_hatsidim]

Thanks Stefanie,

I was actually wondering how the little icons were incorporated on the way into work this morning so I was delighted to see you had answered that for me. What does the copy-paste code look like?

best,

George.

[Stef_retired]

No code,  @george_hatsidim ! I literally copied the umbrella from the Unicode table and pasted it into the text header when I was creating it. If you mean "code" as in "how it looks in the browser's code inspector," you'll probably want to try it yourself using Developer Tools in Chrome.

[James]

George may have been talking about HTML entities. For example, the umbrella is Unicode code point U+2602. That can be entered as an HTML entity of ☂ or ☂

If you were editing a content page within Canvas, you could switch to the HTML editor mode of the Rich Content Editor and insert the code for the html entity.

Since you can't enter HTML code in text headers, he may have been wondering how to get it in there. Here's what the header looks like if you try to enter HTML entry. I copied the Unicode character at the end.

[george_hatsidim]

Hi James,

yes you are right, as a basic webmaster I became accustomed to having HTML code translated. The idea of just cutting and pasting a unicode character feels counter-intuitive but I guess at the end of the day each of those symbols and fonts has the same characteristics and status as any letter of the alphabet.

Thanks for the comprehensive and well articulated response.

George.

[Stef_retired]

Thanks,  @James , for getting to the heart of  @george_hatsidim 's question. I wouldn't call myself a webmaster by any means, but when I was doing course design work I too became accustomed to working with the HTML side of things, so when I learned of this copy-paste hack I was skeptical—then amazed—that a text-only field would accommodate these images. Yet it works.

(Speaking of hearts, this is the day for it, so here are hearts for each of you:  @James  Celebrate ‌  @george_hatsidim  Celebrate ‌)

[kmeeusen]

Neat trick stefaniesanders @stefani_kay 

I just tested then saved the web page. While I could care less and actually prefer Canvas' plain-jane look, I suspect some of my more ornamental faculty might like it.

Kelley

[qnguyen]

Hi James,

Could you please let me know how to change the color of the Module Title without working on the CSS file which will affect all courses. What if I just need to change some Titles only? Thanks

[James]

 @qnguyen  

The ways to change the colors are through CSS or JavaScript. Both require that you do this at the global account level by uploading the files through the theme editor. I cannot help with overriding that.

It is not necessarily true that this will affect all courses. It does mean that you need to hard-code the change and then rely on either a CSS selector or JavaScript check to make sure you're in the courses that you want to change.

The easiest way is probably using the custom global CSS file. That used to be global with no good way to discriminate between courses, but there is now a context-course_896851 (where 896851 is the Canvas Course ID) class attached to the body element. If you wanted to change the color of module titles, you need the selector for those. Canvas is styling it using .ig-header .name { color: #3d454c;}.

To override that, you should probably provide a CSS selector with a higher specificity. The order that the files load in is not guaranteed anymore, so you need to make sure that yours overrides theirs.  Putting it inside the #context_modules selector should do that.

Now, if you want that to only happen on in a single course, then you add the selector to the body.

This will give me this in course 896851 (the red box is just 

But it would look like this in a different course

If you need to have it happen in multiple courses, then you can use multiple CSS selectors.

Through JavaScript, I would check the window.location.pathname to see if the course ID is there.

For a single course, you could do select the courses to act on using something like this:

if (/^\/courses\/(896851)(\/modules)?$/.test(window.location.pathname)) {
  // Make your changes
}‍‍‍

It acts on the course home page, which may not be the modules page, or the modules page.

The (896851) does not need to be in parentheses, however, putting it into parentheses allows you to list multiple courses using regular expressions. You could use (896851|1024566|1234125) to get any of those three courses.

There are other ways to accomplish this without hard-coding it into the global CSS or JavaScript files. You still have to use those, but it could make an API call to see if the course you're in is one that needs applied. That call gets made for every user in every course, though, so it's probably easier to hard-code them and update the files each time.

If you only need to change some titles and not all of them, then you're making it even harder. Unless there is some easy way to distinguish which modules need their titles changed, like ones that are currently open, or ones that contain certain words in them, then you're going to have to be creative. That also means that the CSS route is going to be more challenging.