BuddyBoss
As of version 2.19 of Design Upgrade Pro for LearnDash, we are now compatible with the BuddyBoss Theme. We consider this a working version, however, there was an enormous amount of code that went into this. It’s all CSS so nothing should break any functionality, but there is likely some styling that we missed. Some things might not look right at first.
We recommend you try this on a staging site before going live with it.
Please let us know if you run into issues. Screenshots & screencasts are incredibly helpful for us to quickly address the issue and fix any CSS.
A few important notes before we list the details.
- This is only available in the pro version of Design Upgrade. The free version will not make any design changes to a BuddyBoss site.
- Not all features of Design Upgrade Pro for LearnDash work with BuddyBoss (more info below).
- The features we have included are only for LearnDash elements. We do not have any features for BuddyBoss-related elements that are not directly part of LearnDash.
- Overlapping features (available in both Design Upgrade Pro for LearnDash and BuddyBoss) should be used in BuddyBoss. In other words, if BuddyBoss already has an option for it, we did not include it in Design Upgrade Pro.
- You should set all of your BuddyBoss Theme Options & colors first. Then set the Design Upgrade Pro for LearnDash settings.
- We have not tested this with LearnDash quizzes, however, our Quiz Customizer for LearnDash is compatible with BuddyBoss, so we recommend you use that if you want to customize the look of your quizzes.
We have tested Design Upgrade Pro for LearnDash with BuddyBoss 1.8.9.1. It should continue to work on future versions of 1.x.
FAQs
Can we just use the BuddyBoss Platform plugin & Design Upgrade Pro for LearnDash?
No. Our integration only works with the BuddyBoss theme enabled.
Will this work with BuddyBoss 2.0?
Most things should work with BuddyBoss 2.0, assuming you’re using the older templates. We haven’t gotten a chance to test out the updated 2.0 templates, so we aren’t sure if they’re compatible. If you have a staging site and can help us test this, please let us know.
Now let’s get into which features are supported. We’ll organize the features into the panels that are available in Appearance > Customize > LearnDash Design Upgrade.
General Design
Global Border Radius
This gets applied in MANY areas; too many to list them all. If you find something that you think should be using this value, and it’s not, please let us know. We’ll see if we can accommodate it.
Link & Link Hover Colors
These apply to:
- Expand All / Collapse All links (in some cases, we leave the default link/text color and only apply the hover color)
- Tabs on course/lesson/topic/quiz pages (when “Materials” are being used)
Complete/Correct & Incorrect Colors
We don’t have a full list, but these are used in most of the places where you’d expect.
- completed checkmarks
- “complete” ribbons on the course grid
In Progress Color
This is being used in the following areas:
- LearnDash Profile: The “In Progress” label and circular icon
- Course Page: The “in progress” circular icon
- Focus Mode: The circular icon for “in progress” lessons
- LearnDash Profile: Quiz Status “Not Graded” labels
Buttons
We applied button styles in all the places we could find that made sense. BuddyBoss uses buttons in different places than LearnDash, and they have their own style, but wherever possible, we applied all of our button colors. Button border radius should be set in BuddyBoss Theme Options.
Primary Buttons
✅ Course Grid buttons
✅ “Mark Complete”
✅ Login
✅ “Login to Enroll” & “Continue” buttons in sidebar of course pages
✅ Post Comment (if comments are enabled)
✅ Search (on LearnDash Profile)
We are currently not using any Standard Button colors.
If we missed any, please reach out and let us know so we can add support for them.
Course Content Lists
✅ Disable Expand/Collapse
✅ “Course Content” Header Style
✅ “Course Content” Header Background
✅ “Course Content” Header Text
✅ Container Style
✅ Container Background
✅ Container Border Width
✅ Container Border Color
✅ Lesson Style
✅ Section Background
✅ Section Text
✅ “Lesson Content” Header Background
✅ “Lesson Content” Header Text
✅ Lesson Background
✅ Hover: Lesson Background
✅ Lesson Text
✅ Hover: Lesson Text
✅ Lesson Border Width
✅ Lesson Border Color
✅ Hide “Lesson Content” Header
✅ Line Separators
❌ Indent Topics
Infobar
BuddyBoss doesn’t use the typical LearnDash Infobar on course pages, but they do use a floating box on the right side of the course pages. We apply the Global Border Radius from the General Design panel to this area.
The Infobar is used on public group pages, and all Infobar options are compatible:
✅ Infobar: Background
✅ Infobar: Text
✅ Infobar: Border Width
✅ Infobar: Border Color
✅ Hide Column Labels
✅ Hide Column: Current Status
✅ Hide Column: Price
✅ Hide Column: Get Started
Focus Mode
We were careful not to apply too many changes in focus mode because BuddyBoss has their own dark mode styles. We could have written an entirely new set of Design Upgrade styles just for dark mode, but we chose not to. So if some focus mode styles aren’t working, it’s likely because they would not look good if BuddyBoss’ dark mode was enabled.
✅ Content Width
✅ Content Background Color (will be overridden in dark mode)
✅ Content Animation
✅ Hide Page Title
✅ Hide Breadcrumbs
❌ Hide ALL Bottom Buttons
✅ Hide “Back to…” link (above course title in top-left corner)
❌ User Display Name (change this in BB settings)
✅ Avatar Style (will update everywhere the BB header is used)
✅ Hide Avatar
✅ Hide Name (removing both avatar & name will remove the dropdown menu)
❌ Dropdown Menu: Background
❌ Dropdown Menu: Text
✅ Sidebar Background
❌ Sidebar: Course Background
✅ Sidebar: Course Text
✅ Comments: Avatar Shape
✅ Comments: Background Color
✅ Admin Comments: Background Color
✅ Admin Comments: Border Width
✅ Admin Comments: Border Color
✅ Admin Comments: Avatar Border Width
✅ Admin Comments: Avatar Border Color
Course Navigation
✅ Disable Expand/Collapse
✅ Strikethrough Completed Items
✅ Section Background
✅ Section Text
✅ Link Text
✅ Hover: Link Background
✅ Hover: Link Text
❌ Line Separators
Profile
❌ Profile Summary: Layout
✅ Profile Summary: Background
✅ Profile Summary: Text
❌ Profile Stats: Layout
❌ Hide Section: User Info
✅ Hide Section: Statistics
✅ Hide Section: Your Courses
✅ Avatar Style (circle, square, border radius) … ❌ hidden
❌ Avatar Size
✅ Hide “Edit Profile” Link
✅ Custom “Edit Profile” URL
✅ Hide Statistic: Courses
✅ Hide Statistic: Completed
✅ Hide Statistic: Certificates
✅ Hide Statistic: Points
✅ Hide “Your Courses” Header
✅ Disable Expand/Collapse
✅ Disable Search
✅ Hide Quiz Lists
✅ Hide Essay Lists
✅ Hide Assignment Lists
Progress Bar
✅ Progress Bar Style
✅ Progress Bar Container
✅ Progress Bar
✅ Border Radius
✅ Height
✅ Animate
✅ Hide “% complete”
❌ Hide “X/Y Steps”
Alerts
❌ Reduce Alert Size
✅ Remove Alert Icons
✅ Border Width
✅ Border Radius (inherited from Global Border Radius)
❌ All colors are managed in BuddyBoss settings
Tooltips
Tooltip color options are available in BuddyBoss and should be updated there.
We do apply the Global Border Radius from the General Settings panel, and if the border radius is greater than 7, we remove the small arrow on the tooltips.
Login & Registration
❌ Overlay Color
❌ Overlay Opacity
✅ Popup: Border Radius (inherited from Global Border Radius)
✅ Popup: Border Width
✅ Popup: Border Color
✅ Popup: Close Icon
✅ Login: Background
✅ Login: Heading
✅ Login: Text
✅ Login: Input Background
✅ Login: Input Text
✅ Login: Remove description text
✅ Login: Remove logo
✅ Register: Background
✅ Register: Heading
✅ Register: Text
✅ Register: Input Background
✅ Register: Input Text
✅ Register: Remove description text
✅ Register: Remove email confirmation text
Course Grid
These options should work with the default BuddyBoss courses archive page, as well as anywhere you use the LearnDash course grid. However, with the course grid, these options only work with the legacy layout. They do not work with any of the new layouts/design in Course Grid 2.0.
✅ Grid Item: Border Width
✅ Grid Item: Border Color
✅ Grid Item: Border Radius
✅ Grid Item: Shadow
✅ Grid Item Hover: Add Shadow?
✅ Grid Item Hover: Transform
✅ Ribbon: Position
✅ Ribbon: Default: Background (applied to “Start Course” and “In Progress” ribbons)
✅ Ribbon: Default: Text (applied to “Start Course” and “In Progress” ribbons)
❌ Ribbon: Enrolled: Background (BuddyBoss doesn’t use the “Enrolled” ribbon)
❌ Ribbon: Enrolled: Text (BuddyBoss doesn’t use the “Enrolled” ribbon)
✅ Ribbon: Free: Background (applied to “Free” and “Not Enrolled” ribbons)
✅ Ribbon: Free: Text (applied to “Free” and “Not Enrolled” ribbons)
✅ Ribbon: Custom: Background (was compatible before Course Grid 2.0.5; currently unsure as LearnDash made some interesting changes)
✅ Ribbon: Custom: Text (was compatible before Course Grid 2.0.5; currently unsure as LearnDash made some interesting changes)
✅ Category Selector: Width
✅ Category Selector: Background
✅ Category Selector: Padding
- “Complete” ribbons use the Complete/Correct Color
- Most Grid Item styles also work in BuddyBoss’ list view
Pagination
✅ All options are compatible for pagination on course content lists & the LearnDash profile. Except…
❌ Remove Background Color
Achievements
✅ If you’re using the LearnDash Achievements add-on, all options are compatible.
Group Courses List
❌ We have not added compatibility with public LearnDash group pages yet. If you use these, you will likely experience design issues with the plugin.