Before we start looking into the CSS snippets for our design tweaks, let’s first understand what learndash focus mode main content area refers to. Actually, the learndash focus mode section can be divided into 3 components for the purpose of clarity and convenience – a) the header b) the sidebar and c) the main content area.

The header area is the topmost area of the focus mode displaying your business logo, the course progress bar, and the previous, next buttons, etc.

The sidebar, also referred to as the navigation area, is the one that has the list of all the lessons and topics within your course. At the top of the sidebar sits your course title that takes you back to the course page when clicked at.

The main content area is the one that is either right or left to the sidebar depending on where the latter is placed. If you are as yet unaware, you should know that your focus mode sidebar can be placed wherever you prefer to – either on your right or on your left within the focus mode. If you go to your admin-backend and go to learndash setting, you can choose the sidebar position from there. The default is always the left position. Anyway whatever the position, the main content area starts with the title of your lesson or topic and then there can be elements like breadcrumbs right after that and then your actual content afterwards.

Clear, right? Now, let’s quickly look into the code snippets that can customize the various elements within this area.

Add custom background color to learndash focus mode content-area:

/*add custom background color to learndash focus mode content-area*/
body.ld-in-focus-mode .learndash-wrapper {
background: #f0f2f5; /*Replace the color code with your chosen one*/ 
}

Reduce the size of your Learndash lesson title and decorate it a bit:

/*custom focus mode lesson heading*/
.ld-focus-content h3 {
	font-size: 1.1rem;
 }

.ld-focus-content > h1 {
   color: #fff;
   background-color: #bfa15d;
   border-radius: 5px;
   font-size:1.4rem;
   font-weight: 600;
   padding:  20px 15px 20px 15px !important;
	text-align: center;
   }
/*Note: Replace color codes like "#fff", "#bfa15d", etc with your chosen ones*/

Hide breadcrumbs in Learndash focus mode content area:

/*Hide breadcrumbs in ld focus mode content area*/

.learndash-wrapper .ld-focus .ld-lesson-status,
.learndash-wrapper .ld-focus .ld-topic-status,
.learndash-wrapper .ld-focus .ld-quiz-status {
    display: none;
}

Hide Learndash “Next”, “Previous” Action Buttons within a Specific Lesson or Topic Post of any Selected Course:

/* Hide ld action buttons in a specific lesson or topic post of a certain course*/
.postid-12345 .learndash-wrapper .ld-content-actions .ld-content-action {
	display: none;
}
/*Note: Replace 12345 with your actual lesson or topic post id*/

That’s all for now. If you need any further customizations, simply specify that in the comment box below.

Leave a Reply