cancel
Showing results for 
Search instead for 
Did you mean: 
imerricks
Community Participant

Distinguishing visited and unvisited links on Canvas screens

Jump to solution

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

 

0 Kudos
1 Solution

Accepted Solutions
JamesSekcienski
Community Participant

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;
}

 

View solution in original post

0 Kudos
3 Replies
JamesSekcienski
Community Participant

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;
}

 

View solution in original post

0 Kudos
imerricks
Community Participant

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
Community Participant

@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;
}