Docs

[margley]

Hi I’m trying to hide only the “@” symbol on user profiles. It’s an H2 element with the class “user-nicename”. I’ve tried the following code:

h2.user-nicename {
    display: block;
}
h2.user-nicename:first-letter { 
    font-size: 0px;
}

Unfortunately, it seems to have tied the “@” symbol and first letter together…

[margley]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Here goes an easy solution for you. Let’s add this under Custom > CSS in the Customizer.

.buddypress .user-nicename {
  overflow-x: hidden;
  text-indent: -15px;
}

Cheers!

[margley]

That worked! Now how how to I create some extra space between the profile picture and the text on the right?

[Rue Nel]

Hello There,

To add some space from the profile picture, please update the code and use this instead:

.buddypress .user-nicename {
    overflow-x: hidden;
    text-indent: -15px;
    margin-left: 5px !important;
}

#buddypress span.activity {
    margin-left: 10px;
}

Hope this helps.

[margley]

That worked! Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts