Skip to main content
Daniele Cmty
Daniele Cmty
Helper ⭐️⭐️
September 22, 2021
Solved

How to change color of @mention Text?

  • September 22, 2021
  • 3 replies
  • 610 views

Hi all,

In my community’s posts, all the text is displayed in black. When I mention a user (e.g. @Daniele Cmty), it is also black.

 

In inSpired, the text of the name turns blue (like here @Daniele Cmty) , and I would also like to change that for my own community as it “stands out” more.

 

Where exactly do I need to go in order to change the color scheme for that?

By changing that setting, are other elements also affected? (e.g. other hyperlinks)

 

Thank You!

Best answer by olimarrio

Hi @Daniele Cmty,

The text when you mention a user is black as it is being inherited from your main branded colour.

What you can do is add some custom CSS to change the colour of mentions. You’ll need to make use of CSS selectors to make sure this styling doesn’t affect all hyperlinks. For example:

user-mention a {
  color: red !important;
}

This selects links (a tags) within the user-mention tags and sets the colour (we need to use !important to override the inherited styling). You can of course add any colour you want, using HEX or RGB as well.

Just let me know if you need any more help!

3 replies

olimarrio
Gainsight Employee ⭐️
olimarrioAnswer
Gainsight Employee ⭐️
September 22, 2021

Hi @Daniele Cmty,

The text when you mention a user is black as it is being inherited from your main branded colour.

What you can do is add some custom CSS to change the colour of mentions. You’ll need to make use of CSS selectors to make sure this styling doesn’t affect all hyperlinks. For example:

user-mention a {
  color: red !important;
}

This selects links (a tags) within the user-mention tags and sets the colour (we need to use !important to override the inherited styling). You can of course add any colour you want, using HEX or RGB as well.

Just let me know if you need any more help!

    Daniele Cmty
    Daniele CmtyAuthor
    Helper ⭐️⭐️
    November 15, 2021

    Hi @olimarrio,

    how would I proceed if I wanted to have a unified color (e.g. blue) for hyperlinks and users like @Daniele Cmty? I suppose it’s the same setting you have.

    olimarrio
    Gainsight Employee ⭐️
    olimarrio
    Gainsight Employee ⭐️
    November 19, 2021

    @Daniele Cmty so these element’s colours are affected by the Branded color in Theme → Colors e.g. for inSpired:

     

     

    I can see that yours is currently set to #000000 which is why your hyperlinks and @mentions are appearing in black.

     

    If you want to set these to something else, whilst keeping your brand colour the same, you’d need to add the following custom CSS for hyperlinks as well, in combination with the CSS posted above:

    .post__content.post__content--new-editor a {
      color: red !important;
    }

    Just make sure your CSS selector is added correctly, otherwise you might apply styling to elements you didn’t want to. If you’re unsure, please feel free to contact support.

     

    Terms & ConditionsAccessibility statement