[ARCHIVED] Canvas CSS class for links with underline only on hover?

[60980756]

Throughout Canvas' UI, the default style for links is blue text with no underline except on hover. But when I create a link in a page in a course, the underline is always on by default. If I apply the "text-decoration: none;" style, then there is never an underline. 

I don't have admin-level access, so I can only apply pre-defined styles and classes inline in HTML view. I can't figure out which existing Canvas CSS class to invoke to make my RCE-implemented links appear the way the Canvas UI links do (no underline except on hover), and whether I apply that class to the link itself, or to a containing div. Does anyone here know? 

[JamesSekcienski · Accepted solution]

Unfortunately, they don't use a class to style them in the default style you are looking for.  The default style is applied directly to the anchor tag.  The reason it is different on pages is they set all the page content within a div that has a class of user-content that overrides the style of any anchor tag within it that isn't a button.

Without access to the theme files to create your own class to override this behavior you would need to apply the rules within the page itself.  However, pseudo-classes can't be styled inline and attempts to use JavaScript or the style element get removed as soon as you save the page.

You could try requesting your Canvas admins if they would be willing to add a custom class for this that you could use.  Alternatively, you could use btn class styles provided by Bootstrap to style your links.  They will end up looking like a button, but it allows you more design choices if you are interested.  Here is a reference for the different classes you can use https://getbootstrap.com/docs/4.2/components/buttons/

[60980756]

Thanks for this! I'll see if my account admins will make me a custom class.