Forum Discussion

Marianne80's avatar
Marianne80
Mentor
7 years ago

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
    7 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.

  • ClaudiusH's avatar
    ClaudiusH
    Khoros Alumni (Retired)
    7 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.

  • TariqHussain's avatar
    TariqHussain
    Boss
    7 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 
}