This doc will guide you through the steps to add a background image to your lesson headers within an Execution Plan and Execution Plan Unfolded at the same time.

Learn how to add Custom CSS within eLearn Commerce

We'll customize this section here:

Let's add a Custom Background! In this case, it's the eLearn Commerce partial logo. You'll want to aim for an image that is 46p or smaller in height for best display.

.wpep-wrapper .wpep-container #course-single #course-primary #course-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header {
   background: rgba(0, 0, 0, 0) url("https://codestore.codeiscode.com/wp-content/uploads/2016/09/codeiscode-header-logo-red.png") repeat scroll 0 0;
}

In case you're not using a white background, simply add this Custom CSS to your setup and replace the image link with your own.

How to also change the text color

.wpep-wrapper .wpep-container #course-single #course-primary #course-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header {
   background: rgba(0, 0, 0, 0) url("https://codestore.codeiscode.com/wp-content/uploads/2016/09/codeiscode-header-logo-red.png") repeat scroll 0 0;
}

.wpep-wrapper .wpep-container #course-single #course-primary #course-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header .lesson-heading {
    color : #000000 !important;
}

Simply add this Custom CSS to your setup and replace the image link with your own and the #000000 color code with the code for your desired color.

Did this answer your question?