How to Change the Profile Name Color on Mobile View

Introduction

The BuddyBoss Platform doesn’t include a setting to adjust the profile name color specifically for mobile devices. To customize the name’s color on smartphones or tablets, you can add a small CSS snippet via the Theme Options.

Custom Workaround

1. In your WordPress admin, go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, toggle Enable CSS to On.
   

Paste the following code into the CSS field:

@media (max-width: 767px) {

  h2.user-nicename {

    color: red !important;

  }

}

3. Click Save Changes to apply.
   

Note: Any custom code is considered “custom work.” You may review our Support Policy for details.

Troubleshooting and FAQs

Q: My name color didn’t change—what should I check?
A:

• Clear any caching plugins or CDN caches.
• Confirm the media query breakpoint (767px) matches your mobile layout.
• Ensure there are no syntax errors (missing braces or semicolons) in your CSS.
  

Q: How do I use a different color?
A: Replace red in the snippet with any valid CSS color value (e.g., #0073aa, rgb(255,0,0), or blue).

Q: Will this affect desktop views?
A: No. The @media (max-width: 767px) rule confines the color change to screens 767 px wide or smaller.

Q: Can I target other elements similarly?
A: Yes. Just adjust the selector (e.g., h2.user-nicename) and place your desired CSS properties inside the same media query.