BuddyBoss
Design Upgrade Pro for LearnDash works with the BuddyBoss Theme. It maps your Customizer settings onto BuddyBoss's own LearnDash layouts, including quizzes and BuddyBoss's dark mode. It's all CSS, so nothing changes how your site works, but try it on a staging site first, and let us know if anything doesn't look right.
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.
- The quiz settings work with BuddyBoss too, including in dark mode.
FAQs
Can we just use the BuddyBoss Platform plugin & Design Upgrade Pro for LearnDash?
No. Our integration only works with the BuddyBoss theme enabled.
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 Color & Link Hover Color (Typography)
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)
Success & Danger hues
The Success hue (complete and correct) and Danger hue (incorrect) are used in most of the places you'd expect, including:
- completed checkmarks
- "complete" ribbons on the course grid
Warning hue
The Warning hue (in progress) is used in these 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 Design section, and if the border radius is greater than 7, we remove the small arrow on the tooltips.
Login & Registration Popup
❌ 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 Success hue
- 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.