Solved

How to change color of @mention Text?

  • 22 September 2021
  • 3 replies
  • 57 views

Userlevel 1
  • Ready to inSpire others
  • 30 replies posted

Hi all,

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

 

In inSpired, the text of the name turns blue (like here @Daniele) , 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 Oliver Marriott 22 September 2021, 14:43

View original

3 replies

Userlevel 4
Badge

Hi @Daniele,

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!

Userlevel 1

Hi @Oliver Marriott,

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

Userlevel 4
Badge

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