Customizing the Blockli Profile UI Card in BuddyBoss App

Overview

This comprehensive guide provides step-by-step instructions on how to customize the Blockli Profile UI card in your BuddyBoss app using WordPress. It details specific settings for adjusting the colors and text of each UI element, ensuring a seamless alignment with your brand’s visual identity.

Accessing the Block Settings

To begin customization:

1. Navigate to the app page editor within WordPress.
2. Add the Profile Block by dragging it to the desired location on your page.
3. Click on the block to open the block settings panel on the right-hand side.

Detailed Block Customizations

Text Color Settings

• Primary Text Color: Adjusts the color of the main greeting text (e.g., “Welcome Back, [User Name]”). You can set this using the Primary Text Color in the block settings.
• Meta Text Color: Alters the color of the percentage text displayed in the Profile Progress Ring (e.g., “77%”). Modify this via the Meta Text Color setting.

Background and Accent Settings

• Background Color: Controls the overall background color of the profile card. This can be selected using the Card Background Color option in the block settings.
• Accent Color: Influences the stroke color of the profile completion circle. If not set, it defaults to the Accent Color from the BuddyBoss brand settings. This color also applies to the check mark icon and completed steps in the Profile Task List, and the profile completion percentage in the Profile Progress Ring.

Button Color Customizations

• Call-to-Action (CTA) Background Color: Changes the background color of the main action button on the card. Adjust this with the CTA Background Color setting.
• Call-to-Action (CTA) Text Color: Modifies the text color of the main action button, typically used for actions such as “Complete Your Profile” or “View Your Profile”. Set this using the CTA Text Color setting.

Border Customizations

• Border Radius: Adjusts the border radius of the primary button and the profile image in the Greetings Banner and Profile Task List templates, providing a rounded appearance.
• Alternate Border Radius: Modifies the border radius of the main card container for a cohesive look.

Usage of Text Settings

Configure dynamic texts based on user interactions:

Greetings Banner:

• URL Fragment: Sets the destination URL for the icon if used.
• Icon URL: Specifies an icon displayed next to the username and greeting message.
• Note: The username and greeting message are dynamically fetched and are not customizable.

Profile Progress Ring:

• Welcome Text (Text 1): Primary greeting or introductory text.
• Percentage Text: Dynamically fetched completion percentage.
• Username: Dynamically fetched user name.
• Completion Status Texts (Text_2 and Text_3): These texts appear depending on the user’s profile completion status. Use Text_2 for incomplete profiles (“Complete Your Profile”) and Text_3 for completed profiles (“Edit Your Profile”).
• URL Fragment: Sets the destination URL for button clicks.

Profile Task List:

• Welcome Text (Text 1): Primary greeting or introductory text.
• Text 2: Text shown before the percentage number (e.g., “You’ve completed”).
• Text 3: Text shown after the percentage number (e.g., “of your profile”).
• Text 4: Heading for the profile status list (e.g., “Your Profile Details”).
• URL Fragment: Sets the destination URL for button clicks.

Final Tips

• Preview Changes: Always preview your changes to confirm they appear as intended in the actual app environment.
• Consistent Branding: Ensure that the colors and texts are consistent with your overall branding to maintain a cohesive user experience.
• Engage Users: Choose inviting texts and visually appealing settings to enhance user interaction with their profiles.

Conclusion

Following this guide will allow you to effectively customize the Blockli Profile UI card in your BuddyBoss app using WordPress. Implementing these detailed instructions for color and text settings will significantly improve the user interface and enhance user engagement. Always consider the overall design and user experience during customization.