In this tutorial we will learn how to customize the learndash focus mode side bar area and the elements within that space.
Change Learndash Focus Mode Sidebar background colors
To change the focus mode sidebar background colour, simply apply the css below into the additional css box of your theme’s customizer. If you are not familiar with adding css, please see our step by step guide on how to add custom CSS to your wordPress site.
/* Change Focus Mode Sidebar background color */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-wrapper {
background: #f0f2f5; /*change the value of the color to your choice*/
}
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item {
background-color: #f0f2f5;
border-bottom: 0px solid #fcfcfc;
}
/*Also change the background of the topic list to make the whole sidebar background uniform*/
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list {
background-color: #f0f2f5;
}Note: You can change the value of the colour, for example the value “#f0f2f5”, to any color code of your choice.
Custom background color for Course Title in focus mode side bar top
/*Custom bg color for Course Title in focus mode side bar top*/
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading, .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger {
background-color: #848484
!important;
}
Remove Scrollbar and the little-bordered space When Focus Mode Sidebar is Collapsed
/* Remove Scrollbar & the little-bordered space When Focus Mode Sidebar is Collapsed */
.learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .ld-focus-sidebar {
background-color: initial;
transform: translateX(calc(-100% + 0px));
}Hide the display of number of topics under the lessons in learndash focus mode side bar
In order to keep your side bar neat and clean, you may want to hide a small piece of text under a lesson stating the total number of topics within that lesson. Simply adding this code in your theme’s customizer can do the trick.
/* hide the text stating the number of topics in the focus mode sidebar area only */
.learndash-wrapper .ld-focus-sidebar .ld-text {
display: none;
}
Want further customizations in the focus mode side bar area? Comment below with your specific requirements.