Skip to content 
Customizing Your LearnDash Timer and Status with Simple CSS and JavaScript
LearnDash is a powerful LMS (Learning Management System) that allows you to create and manage online courses. While it provides a robust set of features out of the box, sometimes you might want to tweak the look and feel of certain elements to better suit your needs. In this blog post, we’ll walk through a simple way to customize the appearance and positioning of the LearnDash timer and status using a combination of CSS and JavaScript.
Objective
We’ll achieve two things with this code:
Style the LearnDash timer: Make the timer’s font bold and add some padding for better visibility.
Reposition the Timer: Move the timer to display before the status on the page.
We need to install WP code plugin to insert the code as HTML file.
CSS Customization:
Let’s start with the CSS. We want to make the LearnDash timer stand out by bolding the text. We’ll achieve this with a simple CSS rule:
.learndash_timer {
font-weight: bold;
}This piece of code ensures that the text inside any element with the learndash_timer class is bold, making it easier for users to notice.
JavaScript Functionality
Next, we’ll use JavaScript to adjust the positioning of the timer on the page. Specifically, we want to move it so that it appears right before the status element. Here’s the JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
var timer = document.querySelector('.learndash_timer');
var status = document.querySelector('.bb-ld-status');
// Check if both elements exist
if (timer && status) {
// Apply padding
timer.style.padding = '0 5px';
// Get the parent container of status
var parent = status.parentNode;
// Insert the timer before the status
parent.insertBefore(timer, status);
}
});
What does this code do?
Event Listener: The DOMContentLoaded event listener ensures that the code runs only after the page’s HTML content has fully loaded. This prevents errors that might occur if the script tries to access elements before they exist in the DOM.
Selecting Elements: The code first selects the elements with the classes .learndash_timer and .bb-ld-status.
Conditional Check: Before proceeding, it checks if both elements exist on the page. This is a safety measure to prevent the script from throwing errors.
Styling: If both elements are present, the timer is given a padding of 0 5px to provide some space around it.
Repositioning: Finally, the script moves the timer so that it appears before the status element.
Final Thoughts and codesWith just a few lines of CSS and JavaScript, we’ve enhanced the user experience by making the timer more visible and better positioned on the page. This kind of customization is not only simple to implement but also can significantly improve the usability of your LearnDash courses.
Full Code
<style>
.learndash_timer{
font-weight:bold;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var timer = document.querySelector('.learndash_timer');
var status = document.querySelector('.bb-ld-status');
// Check if both elements exist
if (timer && status) {
// Apply padding
timer.style.padding = '0 5px';
// Get the parent container of status
var parent = status.parentNode;
// Insert the timer before the status
parent.insertBefore(timer, status);
}
});
</script>
With just a few lines of CSS and JavaScript, we’ve enhanced the user experience by making the timer more visible and better positioned on the page. This kind of customization is not only simple to implement but also can significantly improve the usability of your LearnDash courses.
Feel free to copy and paste the code snippets above into your project and see the difference they make. Happy coding!
