Introduction
The Profile Completion Widget colors in BuddyBoss cannot be customized using built-in settings. If you want to change the progress indicator, icons, and completed section colors to better match your site’s branding, you can do this by adding a custom CSS snippet through Theme Options.
Custom Workaround
- In your WordPress admin, go to BuddyBoss > Theme Options.
- Under Custom Codes, toggle Enable CSS to On.
- Paste the following CSS:
.pc_progress_wrap .pc_progress_rate {
stroke: red !important;
}
.widget.widget_bp_profile_completion_widget
.pc_detailed_progress
.single_section_wrap.completed
.section_ico {
border-color: red;
background: red;
}
.widget.widget_bp_profile_completion_widget
.pc_detailed_progress
.single_section_wrap.completed
.progress * {
color: red;
}
.pc_detailed_progress_wrap
.single_section_wrap.completed +
.single_section_wrap.completed
.section_ico:before {
background-color: red;
}- Click Save Changes.
Troubleshooting and FAQs
Q: The widget colors didn’t change, what should I check?
A:
- Clear your site cache, caching plugin, or CDN cache.
- Make sure the CSS was pasted exactly as shown with no missing brackets or semicolons.
- Confirm that Enable CSS was turned on before saving.
Q: Can I use a different color instead of red?
A: Yes. Replace red with any valid CSS color value, such as a hex code or RGB value:
color: #1e73be;
Q: Will this affect other widgets on my site?
A: No. This CSS specifically targets the BuddyBoss Profile Completion widget.
Q: Who can I contact for further assistance?
A: You can submit a support ticket through your BuddyBoss account dashboard for personalized help.
