How can I hide (with CSS) the ability for users to click their profile avatar in order to change it?

I'd like to disable the hover state for the avatar on the user profile page so that the "edit" pencil does not show. I'd also like to disable the click action so the user cannot click to upload a new image. Has anyone done this? I am not a code person, unfortunately! I know people have done lots of things with avatars but haven't been able to find this specific mod.

Find more posts tagged with

Accepted answers

All comments

unknown

Hi @rosenbet ,

I have not done this myself, however, wanted to share your question with the Canvas Developers‌ group. There are a lot of creative minds in there on how this might be done. I am unsure if you could do it with CSS alone (it is entirely possible) or you may need Javascript as well.

Hope that helps!

Stuart

mcphersona7

Hi Tom,

Our school has a similar issue. I've just then made up some JavaScript that you can add to your theme's JS file.

<SPAN class="comment token">//This code removes the link to change profile picture by</SPAN><BR /><SPAN class="comment token">//replacing the 'a' element with the 'div' that surrounds it,</SPAN><BR /><SPAN class="comment token">//copying the styles necessary to display the picture </SPAN><BR /><SPAN class="keyword token">var</SPAN> loc <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">.</SPAN><SPAN class="token function">split</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>loc<SPAN class="punctuation token">[</SPAN>loc<SPAN class="punctuation token">.</SPAN>length<SPAN class="number token">-1</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="string token">"profile"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     <SPAN class="keyword token">var</SPAN> x <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByClassName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"avatar"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />          <SPAN class="keyword token">var</SPAN> y <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByClassName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"profile-avatar-wrapper"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />          <SPAN class="comment token">//Copy styles from the 'a' to the 'div'</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundImage <SPAN class="operator token">=</SPAN> x<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundImage<SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">=</SPAN> x<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">=</SPAN> x<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundSize <SPAN class="operator token">=</SPAN> <SPAN class="string token">"cover"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>border <SPAN class="operator token">=</SPAN> <SPAN class="string token">"2px solid #d3d9d9"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundRepeat <SPAN class="operator token">=</SPAN> <SPAN class="string token">"no-repeat"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundPosition <SPAN class="operator token">=</SPAN> <SPAN class="string token">"center"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>backgroundColor <SPAN class="operator token">=</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>borderRadius <SPAN class="operator token">=</SPAN> <SPAN class="string token">"500px"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          y<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          <SPAN class="comment token">//Now hide the 'a' element.</SPAN><BR />          x<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Locked profile picture."</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     <SPAN class="punctuation token">}</SPAN><BR /><SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

It appears to work, but I suggest that you apply it to a test instance first and make sure it looks all well and good before moving further. Also take note that I haven't tried this on mobile yet.

- Alex.

RickCannonVBCPS

As a developer myself, the easy solution would be for the Canvas' developers to add an update avatar permission to the app I would think. I've done a lot of work within the SDK to move our students profile pictures from Synergy to Canvas, and it comes down to "what if the student changes their avatar?" Rerunning the RESTful service job is about a 20 hour task to update 60,000+ avatars daily. I'll do some digging to see if something's hiding in the SDK classes that may be of use.

Unanswered Questions

Finding the LTIv1.3 IDs for Members of a Course
I'm building a tool for my institution that imports grades from another LTI tool into Canvas so instructors can automate late assignment policies not otherwise supported by Canvas. I'm trying to use the LTIv1.3 ID which is readily available on the LTI-side as a link to the student record on Canvas, but I can't find the ID…
Canvas Media Question
How can one track Canvas Media use without having the reports available from Canvas Studio? Checking API endpoints and the Data 2 schema, there do not seem to be dedicated Canvas Media endpoints. Am I missing some? A method I've considered is using the body field of the wiki_pages table, as this contains the html code of…
Canvas Catalog API - Completed Certificates
Hello, I'm trying to utilize an API call to pull completed certificates and was hoping to download and store the certs as a backup. I can successfully run the API call but it will not allow me to view the certificate unless I access the URL while signed into an account where it's "my" cert. Is there a permissions setting…
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…