Public
Not applicable

How to change the grouphub icon?

Looks like it's a hard coded SVG in the CSS. Other than overwriting that, is there a way to change it?

 

Screen Shot 2021-10-26 at 5.56.39 PM.png

3 Replies 3
Honored Contributor

We did this too and you can change this by uploading a new svg of your choice into your Asset Library and then update the CSS on the group hub page in your Community skin with the new property. 

This icon appears several times, at least it does in our Community design. We updated the icon here from the 3 circles default to our 3 people icon:

  1. Group Hub Card
    https://community.esri.com/t5/grouphubs/page
  2. Group Information
    https://community.esri.com/t5/gis-jobs/gh-p/gis-jobs 
  3. Autosuggest group icon
  4. Search results group icon

We updated in CSS the following properties to reference the new asset. There may be other properties you wish to adjust such as color, size, position etc. but these are the CSS references that allowed us to make those changes to the default image:

_group page

.lia-group-hub-card {
.lia-node-avatar-grouphub, .lia-node-avatar-default{
&:before{
background: url("new asset url here");
}
}
}

.lia-node-info{
.lia-node-avatar-wrapper .lia-node-avatar-default{
&:before{
background: url("new asset url here");
}
}

_search

.board-icon{
.search-result-node-icon{
.lia-fa-grouphub{
&:before{
background: url("new asset url here");
}
}
}
}

.lia-autocomplete-content{
.search-result-autocomplete-node-icon{
.lia-fa-grouphub{
&:before{
background: url("new asset url here");
}
}
}
}

Hope this helps to find your right the element to update but let me know if you need any further info. 

Senior Community Manager | Strava
Not applicable

Thanks! That was fantastically detailed and will no doubt save me some time! 

No problem, hope it helps. I remember our teams were very puzzled over the three circles default icon so we were delighted to be able to change it. Good luck!

Senior Community Manager | Strava

Welcome to the Technology board!

Curious about our platform? Looking to connect on social technology? You've come to the right place!

Are you a Khoros customer? For direct assistance from our Support team, please visit the Support Forum.