Correct Avatar in Announcements for children of Blueprint Courses

[terisaurus]

Hi all,

I am working with a few blueprints that each sync to multiple children courses. One feature that we rely heavily on is announcements - which are posted in the blueprint, and get posted on various, pre-set schedules in the children.

The avatar in the announcements is showing a U instead of our logo (as it is in the blueprint). I've tried posting this as a feature request:

https://community.canvaslms.com/ideas/13732-announcement-avatar-in-course-associated-with-blueprint

Someone from Canvas helped us figure out how to remove the U and show an empty, however the .css is no longer working, shown below.

/* Hides the "U" on Child Blueprint courses Announcements */ 
span.Avatar__hQItUR-initials {   
display: none; 
}

He also shared some code to overwrite the U with other letters:

/* Hides the "U" on Child Blueprint courses Announcements */
span.Avatar__hQItUR-initials {
font-size: 0;
position: sticky;
top: 25px;
}

/* Changes the "U" on Child Blueprint courses Announcements to "DA" */
span.Avatar__hQItUR-initials:before {
content: "DA";
font-size: 1rem;
}

I wondered if anyone has run across this before and if you had a thought on how to actually show the original logo on the children announcements? Or if that is not possible, how to correct the above .css?

Thank you in advance for any insight.

[James · Accepted solution]

 @terisaurus 

The CSS you have is an unsustainable attempt. It is based on random identifiers generated by ReactJS when it creates the page. That "hQItUR" business will change and then it will stop working.

We don't use Blueprint courses, so I can't give you specifics. I can just point you in the right direction and leave you with some homework or for someone else to come along.

For example, on an announcements page shown to the teacher, I am currently seeing:

<div class="ic-item-row__author-col">
  <span class="czbXA_bGBk czbXA_cuDs bbhNB_bGBk bbhNB_doqw bbhNB_cJVF" data-cid="Avatar">
    <img class="bbhNB_MrJH" aria-hidden="true">
    <span class="bbhNB_eYKj" aria-hidden="true">U</span>
  </span>
</div>‍‍‍‍‍‍

What does appear to be usable here is the data-cid="Avatar", but that is most likely used in other places.

You can select an attribute using CSS like this

span[data-cid="Avatar"] {
  /* put your CSS here */
}‍‍‍

You can get to the U with something like this.

div.ic-item-row__author-col span[aria-hidden="true"] {
  /* put your CSS here */'
}‍‍‍

As I said, that's not in the same place you're looking at. But what you need to do is find a CSS selector that will work without using the random characters that ReactJS uses. That means some combination of CSS classes, IDs, and attributes.

To help get the proper CSS selector, right click over the U and choose Inspect Element.

[terisaurus]

Thanks for the fast response, James. I was looking for hQItUR everywhere with inspect and could not find it, so what you're saying makes sense. I found the same html as you when I inspected my announcements avatar, so I will test a few .css things using your suggestions.

[terisaurus]

I got at it with what is shown below. I still needed the second part because the U showed beneath the logo with just the first part. Thank you!!

span[data-cid="Avatar"] {
 background-image: url("LINK TO LOGO");
}

div.ic-item-row__author-col span[aria-hidden="true"] {
 display: none;
}