Custom CSS to hide grades from Observers (Parents)

[TechRav]

We are new to Canvas. We are migrating from Powerschool Learning (formerly Haiku). In Haiku we had it set up so students could view their grades but parents could only view assignments but not specific grades. This is an important priority for our administration as we want to put the primary academic responsibility on the student since we are a high school with parents in a supporting role but do not want parents helicoptering over every grade. I was told by Canvas support that the only way to hide grades from parents using using custom css. Has anyone implemented such a solution and can share the steps on how to do this? 

[BradMoser]

I totally get empowering students to own and take responsibility for their grades. We have not wanted to hide this overall grade before from parents, so my idea is not speaking from personal experience. However, I think what you might be looking for is hiding the student grade using CSS with the Class class="student_assignment hard_coded final_grade" and the ID id="submission_final-grade". 

Good luck! 

[James]

Be careful with CSS solutions so that they only apply to the role that you want them to apply to. Otherwise you end up hiding them from everyone.

There are some lengthy discussions here in the Community about hiding information from specific roles and that usually takes JavaScript to accomplish instead of a pure CSS solution. I say that in general, not having looked at observers in specific.

[JamesSekcienski]

Have you tried looking into editing the permissions for the Observer role to remove all permissions related to grades?  It looks like this would prevent access to view the grades of the student they are observing, but I would recommend testing this to verify in both the desktop view and in the mobile apps.

It is better if you can implement this with permissions so that it applies in both the desktop version of Canvas and in the Canvas mobile apps.  The reason for this is custom CSS and JavaScript are very limited in what they can do in the mobile apps.  So if permissions allow an Observer to view grades and grades can be viewed through the mobile app, then there isn't any custom CSS or JS that you can apply to hide it in the mobile app.  Based on this it looks like parents would be able to view grades in the Canvas Parent app: https://community.canvaslms.com/t5/Canvas-Basics-Guide/What-is-the-Canvas-Parent-app/ta-p/10