Solved

How to change color of @mention Text?

  • 22 September 2021
  • 3 replies
  • 468 views
Daniele Cmty
Rank
Userlevel 2
Badge +1

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!

icon

Best answer by olimarrio 22 September 2021, 14:43

View original

3 replies

olimarrio
Rank
Userlevel 4
Badge +3

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
Rank
Userlevel 2
Badge +1

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
Rank
Userlevel 4
Badge +3

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

 

Reply


Terms & ConditionsCookie settings