Forum Discussion

Marianne80's avatar
Marianne80
Mentor
8 years ago
Solved

Able to change Category node list icons more visual?

Hi there,

 

Am currently a UX in a community with many many communities within each other.  Some are communities and some are areas of communities and would like to show a visual difference, so I was wondering if anyone knows how to change the icons, make the different? 

 

 

 

 

Thank you :)

 

Marianne

  • ClaudiusH's avatar
    ClaudiusH
    8 years ago

    If you want to style the icon differently on this CategoryPage you would go the CSS styling route as outlined by Tariq.

    If you are going after an individual icon, e.g. for the "Enterprise" category in your screenshot from https://community.visma.com/t5/Visma-Unique/ct-p/NO_UN

    you would include the individual icon's node class as well, e.g.

    .CategoryPage .lia-node-no-un-enterprise .board-icon .lia-fa-icon:before {
    color: red;
}

    Keep in mind that you need to add styling for every other page you would like to see this icon styled differently.

    NB: Some widgets might not expose the icon class needed to differentiate a specific category's icon from the others.

5 Replies

Sort By
  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    Marianne80 - 

     

    These are the default icons for the category.   If you want to update it, it can be done easily using CSS. 

     

    Below is the CSS which you can update according to your requirements. 

     

    .lia-fa.lia-img-icon-category:before {
    // css for icon 
}

     

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    8 years ago

    If you want to style the icon differently on this CategoryPage you would go the CSS styling route as outlined by Tariq.

    If you are going after an individual icon, e.g. for the "Enterprise" category in your screenshot from https://community.visma.com/t5/Visma-Unique/ct-p/NO_UN

    you would include the individual icon's node class as well, e.g.

    .CategoryPage .lia-node-no-un-enterprise .board-icon .lia-fa-icon:before {
    color: red;
}

    Keep in mind that you need to add styling for every other page you would like to see this icon styled differently.

    NB: Some widgets might not expose the icon class needed to differentiate a specific category's icon from the others.

  • cristinaiftode's avatar
    cristinaiftode
    Adept
    7 years ago

    ClaudiusHbut do you know if there is a way to add a class automatically for those categories and add the icon depending on that class? When you have a large community you will have a lot of categories that will need this change.

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    7 years ago

    cristinaiftode I couldn't find a way to have a class revealing the class name wrapped around or contained in each icon, I'm afraid. But I think that would make for a very good product enhancement idea. E.g. maybe a way similar to rank icons to override the default icon for a community node via the community structure admin?