cancel
Showing results for 
Search instead for 
Did you mean: 
life-blumberg
Surveyor

Undo link underlining in Pages

Jump to solution

I use pages to make up my assignments lists for the week, linking to HW docs, tutorial vids, etc. Before this semester (Sprin 2017) the links were normal text, just turned blue once linked, very nice and clean. Now every link shows up as underlined once I exit the page editor, no matter what I do. How can I make it go back to displaying links as just blue text rather than underlined text? Is there an html code modification I can make even? The underlines everywhere are making my pages very cluttered and difficult to read...

Thank you in advance for any help!

1 Solution

Accepted Solutions
James
Navigator

Yes, there is a modification that you can make, if you have access to your institution's custom CSS file. This would mean that it would need to happen for all users at your institution, not just you or your courses. It could also be done on a sub-account level. But I would put serious thought into it before you do it -- is it just to look nice? Canvas supposedly did it for usability, which may be a better reason. But I'll leave the choice up to other people and let them decide whether or not it's a good thing to do and just tell you how to do it.

Thanks go to ishar-uw​ who helped me look into this over the weekend.

The code that Canvas added to stylize it is this:

.user_content a:not(.btn):not(.Button):not(.ui-button),.mceContentBody a:not(.btn):not(.Button):not(.ui-button) {

    text-decoration:underline

}

That's what you need to override.

This is not easy, because the CSS selector they use with all of the classes inside the :not selectors has a high specificity. Basically, specificity is a way to decide which rule wins out when there are competing ones. I have found the specificity calculator a useful tool for determining the specificity.

You can roughly calculate a specificity score this way

  1. The number of id's is the hundred's digit
  2. The number of classes is the ten's digit
  3. The number of elements is the unit's digit

There are no id's (identified with a #), there are four classes (identified with .), and one element (a), so the score here is 41. Those four class selectors (.user_content, .btn, .Button, .ui-button) make this a hard specificity to override.

One easy way to increase the specificity is to include an id. That means finding an id that is on every page where you want to do this. I think #content will work, but I haven't verified with everything, just with wiki (content) pages.

Indiscriminate Overriding

If you want to change every hyperlink so that it is not underlined, then the following CSS should accomplish this:

#content .user_content a { text-decoration:none; }

That would have a specificity of 111 (1 hundred for the #content, 10 for the .user_content, and 1 for the a) and would override the 41.

Selective Overriding

If you want to only change some of the links to not be underlined, which is probably the better solution from a usability perspective, then you'll need to define a class for that. And the selector depends on how you use it.

Let's say you call the class no_underline so the selector is .no_underline.

The first selector would disable it if you make individual hyperlinks with that class. The second would disable the underline mark a paragraph or div or other container and want to disable all hyperlinks within that:

#content .user_content a.no_underline { text-decoration:none; }

#content .user_content .no_underline a { text-decoration:none; }

The second one would be useful if you want to wrap an entire section, even a whole page, in a div element with a class of .no_underline.

Unfortunately, you can't just use use .no_underline or .no_underline a as selectors since those have specificity of 10 and 11 respectively.

Without Global CSS Access

If you don't have global CSS access, then you can use inline styles on all of your hyperlinks. You want to add style="text-decoration:none;"

This code (notice the second line) will generate a hyperlink without the underline:

<p>This is a <a href="https://instructure.com">hyperlink</a>.</p>

<p>This is a <a href="https://instructure.com" style="text-decoration:none;">hyperlink</a> with inline styling.</p>

212834_pastedImage_15.png

Reducing the Specificity (on Canvas part)

Canvas pulled a nifty trick (I may or may not have had influence when I suggested something similar in the beta release notes) that turns on hyperlinks for everything but those related to buttons. But it turns out that nifty trick bumped up the specificity and made it hard to override.

Instead of

.user_content a:not(.btn):not(.Button):not(.ui-button),.mceContentBody a:not(.btn):not(.Button):not(.ui-button) {

    text-decoration:underline

}

It may have been better to use

.user_content a {

    text-decoration:underline

}

.user_content a.btn, .user_content a.Button, .user_content a.ui-button {

    text-decoration:none

}

That turns it on for all user hyperlinks and then turns it off for buttons.

It also makes it easy to add your own class because you just need a specificity bigger than 11 instead of bigger than 41.

So, now you could just use this to turn it off

.user_content a.no_underline, .user_content .no_underline a {

    text-decoration:none

}

Note that you could not use just .no_underline since it would have a specificity of 10, which wouldn't beat the 11. However, you could use .user_content .no_underline with a specificity of 20 if you were willing to have nothing underlined within the .no_underline class. I don't recommend that.

View solution in original post

8 Replies
Stefanie
Community Team
Community Team

 @life-blumberg , "Underline Links" is a feature option that every user can enable for himself or herself in personal account settings. Please refer to What feature options are currently available in my user account? and check to see if the Underline Links feature option is toggled "on." If it is, toggle it off, and see if that does the trick (I suspect you might have to refresh your browser or clear your cache, but I'm not sure). If that doesn't do the trick, please post an update here.

Also, I want to emphasize that this is a user setting. So even if you toggle it off in your own account, your students can choose to toggle it on or off for themselves.

Hi Stefanie, thanks for your reply.

I did know about that option, but it is a setting that only affects Canvas generated links, such as on your dashboard or course navigation, not the preferences for user created links in pages.

I did find that inserting   style="text-decoration: none;"   into individual links in the html of the pages (so = <a style="text-decoration: none;" href="http://linkhere">Link Name</a>"</p>) would remove the default underlining of links for that one link, but it is pretty difficult to sort through all the html to isolate and insert the code for every link. The options for applying the css for that default to the entire page don't seem to work in the Canvas pages (or I don't know enough about how html works to get it to I guess).

Does that make sense?

Here is an image of what I mean by default underlining of links in Pages. You can see how it clutters up the assignment, where it used to be nice and clean?

Capture.JPG

stefaniesanders​,

Unfortunately, that option does not control whether or not underlines are used on user content pages (wiki pages). Mine was off and I was getting the hyperlinks.

What it controls are the navigation links, not the user content.

212835_pastedImage_0.png

James
Navigator

Yes, there is a modification that you can make, if you have access to your institution's custom CSS file. This would mean that it would need to happen for all users at your institution, not just you or your courses. It could also be done on a sub-account level. But I would put serious thought into it before you do it -- is it just to look nice? Canvas supposedly did it for usability, which may be a better reason. But I'll leave the choice up to other people and let them decide whether or not it's a good thing to do and just tell you how to do it.

Thanks go to ishar-uw​ who helped me look into this over the weekend.

The code that Canvas added to stylize it is this:

.user_content a:not(.btn):not(.Button):not(.ui-button),.mceContentBody a:not(.btn):not(.Button):not(.ui-button) {

    text-decoration:underline

}

That's what you need to override.

This is not easy, because the CSS selector they use with all of the classes inside the :not selectors has a high specificity. Basically, specificity is a way to decide which rule wins out when there are competing ones. I have found the specificity calculator a useful tool for determining the specificity.

You can roughly calculate a specificity score this way

  1. The number of id's is the hundred's digit
  2. The number of classes is the ten's digit
  3. The number of elements is the unit's digit

There are no id's (identified with a #), there are four classes (identified with .), and one element (a), so the score here is 41. Those four class selectors (.user_content, .btn, .Button, .ui-button) make this a hard specificity to override.

One easy way to increase the specificity is to include an id. That means finding an id that is on every page where you want to do this. I think #content will work, but I haven't verified with everything, just with wiki (content) pages.

Indiscriminate Overriding

If you want to change every hyperlink so that it is not underlined, then the following CSS should accomplish this:

#content .user_content a { text-decoration:none; }

That would have a specificity of 111 (1 hundred for the #content, 10 for the .user_content, and 1 for the a) and would override the 41.

Selective Overriding

If you want to only change some of the links to not be underlined, which is probably the better solution from a usability perspective, then you'll need to define a class for that. And the selector depends on how you use it.

Let's say you call the class no_underline so the selector is .no_underline.

The first selector would disable it if you make individual hyperlinks with that class. The second would disable the underline mark a paragraph or div or other container and want to disable all hyperlinks within that:

#content .user_content a.no_underline { text-decoration:none; }

#content .user_content .no_underline a { text-decoration:none; }

The second one would be useful if you want to wrap an entire section, even a whole page, in a div element with a class of .no_underline.

Unfortunately, you can't just use use .no_underline or .no_underline a as selectors since those have specificity of 10 and 11 respectively.

Without Global CSS Access

If you don't have global CSS access, then you can use inline styles on all of your hyperlinks. You want to add style="text-decoration:none;"

This code (notice the second line) will generate a hyperlink without the underline:

<p>This is a <a href="https://instructure.com">hyperlink</a>.</p>

<p>This is a <a href="https://instructure.com" style="text-decoration:none;">hyperlink</a> with inline styling.</p>

212834_pastedImage_15.png

Reducing the Specificity (on Canvas part)

Canvas pulled a nifty trick (I may or may not have had influence when I suggested something similar in the beta release notes) that turns on hyperlinks for everything but those related to buttons. But it turns out that nifty trick bumped up the specificity and made it hard to override.

Instead of

.user_content a:not(.btn):not(.Button):not(.ui-button),.mceContentBody a:not(.btn):not(.Button):not(.ui-button) {

    text-decoration:underline

}

It may have been better to use

.user_content a {

    text-decoration:underline

}

.user_content a.btn, .user_content a.Button, .user_content a.ui-button {

    text-decoration:none

}

That turns it on for all user hyperlinks and then turns it off for buttons.

It also makes it easy to add your own class because you just need a specificity bigger than 11 instead of bigger than 41.

So, now you could just use this to turn it off

.user_content a.no_underline, .user_content .no_underline a {

    text-decoration:none

}

Note that you could not use just .no_underline since it would have a specificity of 10, which wouldn't beat the 11. However, you could use .user_content .no_underline with a specificity of 20 if you were willing to have nothing underlined within the .no_underline class. I don't recommend that.

View solution in original post

Thank you very much indeed James! You have absolutely answered my question, and with extreme helpfulness too. Much appreciated.

Stefanie
Community Team
Community Team

Thanks for the clarifications,  @life-blumberg  and  @James ​! I learned yet another new thing today. Smiley Happy

anthony_sales1
Surveyor II

Brilliant Explanation and useful code - I also found the underling of hyperlinks made the text harder to read especially with lists/tables of files/links - so I wanted no underlining unless hovered over - we used these two lines of code in a css file.  The second line was required because without it internal links didn't underline when hovered (although external links on the same page did???).

#content .user_content a { text-decoration:none; }

#content .user_content a:hover { text-decoration:underline; }