[ARCHIVED] Distinguishing visited and unvisited links on Canvas screens

[imerricks]

Is there a way to change the theme so links turn a different colour/color once selected?

[JamesSekcienski · Accepted solution]

Have you tried uploading a custom CSS file? 

You could add the following to a custom CSS file and it would turn visited links purple.

a:visited {
  color: purple;
}

Warning: This may eventually become almost pointless over time as most navigational links would become the visited color unless you clear your history. 

You should also test fully how the color affects the user experience.  I noticed links that are buttons may create accessibility issues and you would like need to modify the code to avoid changing the color for them.

Here is an example of how to adjust the code to not apply to links that are styled as buttons:

a:visited:not(.btn):not(.Button):not(.ui-button):not([role='button']), .user-content a:visited:not(.btn):not(.Button):not(.ui-button):not([role='button']), .mceContentBody a:visited:not(.btn):not(.Button):not(.ui-button):not([role='button']) {
  color: purple;
}

[imerricks]

Thanks so much for this advice @JamesSekcienski. I will try this code in our Beta instance. My objective is to help students see which document and external reading links they have accessed; I hadn't considered the effects on the navigation links and buttons. 

[JamesSekcienski]

@imerricks You're welcome!  If you don't want it to apply to navigation links, you could also try removing the first selector that applies the style to links in general and only apply it to links within user content.

.user-content a:visited:not(.btn):not(.Button):not(.ui-button):not([role='button']), .mceContentBody a:visited:not(.btn):not(.Button):not(.ui-button):not([role='button']) {
  color: purple;
}