Focus Mode: Customize Page Title

When using LearnDash focus mode, the page title is largely styled by your theme, not by LearnDash. The font-size, font-weight, and color are decided by your theme. But with some fairly simple CSS, you can customize the look of these lesson/topic/quiz titles.

Use the following CSS to adjust the size, weight, and color of your focus mode page title:

.ld-focus-content > h1 {
	font-size: 2rem;
	font-weight: 700;
	color: red;
}

Gradient Fill

Instead of using a plain color for your text, you can use a gradient instead. Replace the color line above with this instead. You can use a tool like cssgradient.io to generate the gradient code for you. The background-clip, -webkit-background-clip, and -webkit-text-fill-color lines should remain the same.

.ld-focus-content > h1 {
	background: rgb(131,58,180);
	background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}