How to Configure App Colors in the BuddyBoss App

Introduction

App Colors play a crucial role in branding, helping to establish a unique visual identity and enhance readability in your BuddyBoss App. By customizing colors, you can ensure a consistent and engaging user experience. This guide will walk you through the steps to configure App Colors, including setting background hues, button styles, text contrasts, and more.

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.