Getting Started

1. Meet Your Instructor

Hello, my name is Andrei-Robert Rusu, and I am the CTO of CodeisCode.

In this Execution Plan, I’ll guide you through all the CSS Rules needed to customize any parts of this specific page.

You’ll write your own CSS Rules and we’ll point out the CSS Path and an Example Rule.

This will enable you to modify Text Size, Color and Font Type, Padding and any other property that makes up your page.

*In most cases, you’ll have to write the CSS code to change a particular design feature of your page. Please pay attention to step 3, which is “Learn about Basic CSS Attributes”.

2. How to Add Custom CSS in eLearn Commerce

1. Visit the eLearn Commerce Settings page.

2. Select Design Options in the General card.

3. Paste your CSS Code into the Custom CSS window

4. Save Changes

3. Learn about Basic CSS Attributes

The following links redirect you to pages that teach you how to make changes to the look and feel of any of your webpages in eLearn Commerce (you will be taken to an external site).  

Need Help picking a color ?

4. How does this work?

Follow this simple 3 step process:

Step 1.: I will number and frame each customizable element with a different color.

I will also outline each detail that you can customize both in code and visually.

Step 2.: For each numbered part I will give you the code that is currently in use and I will highlight and shortly explain to you which part of the code you can customize.

example:

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header {
background: #ffffff;
}

My explanation for you, which I’ll put below each chunk of code 

The “#ffffff” is a hex color value and to customize it you just need to replace it with a new and different hex value color code.

Step 3.: After you’ve edited/customized the specific part of the code you just copy and paste it into the Custom CSS field as I explained in Lesson 2 of this Section.

Edit only what I highlighted for you and then copy and paste only the code (without my explanation) into the Custom CSS field in the eLearn Commerce Settings.

Just to make sure, I want you to copy and paste only this part:

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header {
background: #ffffff;
}

That’s it!

Happy Coding!

Now go create massive value!

-----------------------------------------------------------------------------------------------------------

I. Header Section

1. The Container

The “#ffffff” is a hex colour value and to customize it you just need to replace it with a new and different hex value colour code.

2. The Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header .course-head-text .main-heading {
font-size: 30px;
}

The “30px” is a value representing the font size of your Headline. Change only the number to your desired font size.

3. The Description

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header .course-head-text .sub-heading p {
font-size: 16px;
}

The “16px” is a value representing the font size of your Headline. Change only the number to your desired font size.

4. The Picture

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header .thumbnail img {
width: 96px;
height: 96px;
max-width: 96px;
}

The “96px” is a value representing the current width, height and max-width of the Course Icon Image. Change only the numbers to customize the size of the picture.

5. The Progress Bar

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container h4 {
font-size: 20px;
}

The “20px” is a value representing the font size of the text above the Progress Bar. Change only the number to your desired font size

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container .progress-bar-value {
font-size: 30px;
}

The “30px” is a value representing the font size of the text of the Course Progress Percentage. Change only the number to your desired font size.

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container .wpep-progress-bar {
background: #bbbbbb;
}

The “#bbbbb is a hex colour value and to customize it you just need to replace it with a new and different hex value colour code.

.wpep-wrapper .wpep-progress-bar .wpep-progress-bar-inner {
background: #f2672a;
}

The “#f2672a is a hex colour value and to customize it you just need to replace it with a new and different hex value colour code

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container .wpep-progress-bar .wpep-progress-bar-inner {
height: 3px;
}

The “3px” is a value representing the thickness of the progress bar to customize. Change only the number to make the progress bar thicker or thinner.

II. The Content

1. The Section Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group>h2 .checkbox .section-heading {
font-size: 25px;
}

The “25px” is a value representing the font size of Checkbox Title Text. Change only the number to your desired font size.

2. The Section Checkbox

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group>h2 .checkbox .checkboxclass {
margin: 0 10px 0 0;
}

The “10px” is a value representing the font size of the Section Checkbox Size. Change only the number to your desired size.

3. The Lesson Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header .checkbox .lesson-heading {
font-size: 20px;
}

The “20px” is a value representing the font size of the Lesson Title. Change only the number to your desired font size.

4. The Lesson Checkbox

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header .checkbox .checkboxclass1 {
margin: 0 15px 0 0;
}

The “15px” is a value representing the font size of the Lesson Checkbox. Change only thenumber to your desired font size.

5. The Lesson Content

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .lesson-content {
font-size: 18px;
}

The “18px” is a value representing the font size of the Lesson Content. Change only thenumber to your desired font size.

6. The Lesson Next Button ( Optional )

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .lesson-content .lesson-continue-container>.lesson-continue {
font-size: 18px;
}

The “18px” is a value representing the font size of the text inside the Next Lesson Button. Change only the number to your desired font size.

7. Checkmark

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group .lesson-accordion .lesson-accordion-group .ui-accordion-header .checkbox svg path {
stroke: #25c348;
}

You can also find all the snippets here.

Now go create massive value!

Did this answer your question?