Skip to main content
Anonymous
June 27, 2021
Solved

Change icon used for private groups

  • June 27, 2021
  • 6 replies
  • 90 views

Is there a way to change the icon used for a private group? I see I can alter the phrase.

Best answer by Jeanie Lee

Hey Scott, 

I may be able to help with this one. We have a logo in place for a similar Phrase for the 403 Error page, so I believe the groups phrase should work in a similar manner. See the example below: 

 

For the Private Group page, I would try to create the phrase in control by using the following Module and Key: 

Module: Forum

Key: groups.request.to.join.private.group

Translations: <INSERT IMAGE CODE> This group is private, please request to join to view topics and members

 

You will then need to use Custom CSS to remove the default lock image: 

div.group-content-container svg.icon-locked {
    display: none;
}

Please let me know if this helps. 

6 replies

Anonymous
June 27, 2021

For additional context, this is the one I’m talking about:

 

Jeanie Lee
Jeanie LeeAnswer
Helper ⭐️⭐️⭐️
June 28, 2021

Hey Scott, 

I may be able to help with this one. We have a logo in place for a similar Phrase for the 403 Error page, so I believe the groups phrase should work in a similar manner. See the example below: 

 

For the Private Group page, I would try to create the phrase in control by using the following Module and Key: 

Module: Forum

Key: groups.request.to.join.private.group

Translations: <INSERT IMAGE CODE> This group is private, please request to join to view topics and members

 

You will then need to use Custom CSS to remove the default lock image: 

div.group-content-container svg.icon-locked {
    display: none;
}

Please let me know if this helps. 

Anonymous
June 28, 2021

@Jeanie Lee thanks for jumping in. Gave that a try and while I can replace the text, I cannot get the icon to change to something else. Adding the <img src=””> results in two icons on the page. Ideally there’d be a way to provide other icons that match our site branding. 

Jeanie Lee
Jeanie Lee
Helper ⭐️⭐️⭐️
June 29, 2021

@Scott Baldwin, we’re getting closer! 😉

I checked with our Dev team, and custom CSS will help remove the lock. Please try the code below: 

div.group-content-container svg.icon-locked {
    display: none;
}
Anonymous
June 29, 2021

Perfect, that’ll do as a workaround to hide it for now. Just waiting on a replacement icon from our team to add.

Jeanie Lee
Jeanie Lee
Helper ⭐️⭐️⭐️
June 29, 2021

I’m glad to hear!

Terms & ConditionsAccessibility statement