Make People Photos Larger

[MikeBrinkman]

I'd like to update the photo size of course members in the People area. The source photos are 125 x 125, but resized via code. I'd like to make them larger so they are more useful for faculty.

I've tried writing some javascript directly in the browser (which is what I usually do before updating our theme). I can target a single image, but not all of them.

If anyone has written theme code and is willing to share, please let me know. Thanks!

[Code-with-Ski · Accepted solution]

@MikeBrinkman 

You could try adding something like this to your CSS

table.roster > tbody > tr.rosterUser div[id^=user-avatar-people-page] span[class$=inlineBlock-avatar] {
	width: 5rem;
	height: 5rem;
	border-radius: 10%;
}

You can adjust the width and height to your desired size.  Canvas sets the width and height to 2.5rem.

The border-radius is only needed if you want to adjust the shape of the icon.  Using 10% makes it look like a square with rounded corners.  Canvas sets it to 100% by default, which is what makes it appear as a circle.