How to Configure App Colors in the BuddyBoss App

Introduction

Consistent, on-brand colors enhance your app’s visual identity, improve readability, and boost user engagement. The BuddyBoss App’s Color feature lets you customize every interface element, from backgrounds and buttons to status bars and in-app purchases, directly within your WordPress Dashboard. In this guide, you’ll learn where to access each color picker, how to apply your brand palette, and ensure your changes display as intended on both Android and iOS previews.

Tutorial VIdeos

Opening the Color Settings

1. In WordPress, navigate to BuddyBoss App > Branding > Colors.
   
2. Confirm the Android preview is active; toggle to iPhone preview at any time.
   

Configuring General Section Colors

1. Under General, click the color swatch for Background Color.
   
2. Enter a hex code or pick from the palette, then click OK.

3. Repeat for Alternate Background, Color Image Background, Border, and Accent.
   
4. Observe the App Page, Directory Page, and Menu Page previews update instantly.

Changing Navigation Bar Colors

1. In the Navigation Bar, select Background Color and choose your brand hue.

2. Pick Text Color for titles and Link Color for tappable elements.
   
3. Watch the mockup reflect your choices.
   

Styling Tab Bar & More Screen

1. Under Tab Bar & More, set Tab Bar Background Color.
   
2. Choose Icon Default Color and Icon Active Color.
   
3. Preview the Tab Bar and More Screen designs on the right.

Customizing Buttons

1. In Buttons, set Primary Button Background Color and Primary Button Text Color.

2. Repeat for Secondary Button Background and Secondary Button Text.

3. Verify the button styles in the preview.
   

Adjusting Text Colors

1. Under Text Colors, select Heading Text Color for H1–H3 styles.
   
2. Choose Body Text Color, Description Text Color, and Meta Text Color.
   
3. Ensure readability across light and dark backgrounds.
   

Styling Labels

1. In Labels, pick Label Background Color.
   
2. Choose Label Text Color for contrast.

3. Confirm label appearance in list and detail previews.
   

Updating Login Screen Colors

1. Scroll to Login Screens.

2. Adjust any available options, background, field borders, button text, etc.
   
3. Preview both Login and Forgot Password screens.

Updating Register Screen Colors

1. Under Register Screens, choose colors for input fields, buttons, and backgrounds.
   
2. Verify the Register screen preview matches your branding.

Configuring Course Progress Colors

1. In Courses, set colors for Completed, In Progress, Start Course, Free, and Not Enrolled states.

2. Check the course list preview to ensure each status displays correctly.
   

Setting Android Status Bar Color

1. Under Android Status Bar, click Status Background Color.

2. Preview on the Android mockup to confirm visibility.
   

Customizing In-App Purchases Colors

1. In In-App Purchases, set the Purchased Status Checkmark color.
   
2. Choose Benefits Checkmark color.

3. Preview the purchase screen to verify clarity.
   

Saving Your Changes

1. After configuring all sections, click Save Changes at the bottom of the page.
   

Note: Unsaved selections will be lost on page reload.

Troubleshooting and FAQs

Q: Color previews aren’t updating.
A: Click Save Changes, then hard-refresh your browser or clear caching plugins.

Q: Hex code input is invalid.
A: Include the leading # and use a six-digit value (e.g., #1A2B3C).

Q: Changes don’t appear in the app.
A: Force-close and reopen the BuddyBoss App to pull the latest settings.

Q: I don’t see the Android Status Bar option.
A: Ensure you have an active Android configuration under BuddyBoss App > Configure > Android Settings.