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. Lesson Content Section

1. The Container

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

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>h2 {
font-size: 24px;
}

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

3. The Content

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content > p {
font-size: 18px;
}

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

4. The Completion Button

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .bottom-content .contain-complete_lesson .complete-lesson {
font-size: 14px;
}

The “14px” is a value representing the font size of the Text inside the Complete Lesson Button. Change only the number to your desired font size.

5. The un-Completion Button ( Optional )

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .bottom-content .contain-complete_lesson .incomplete-lesson {
font-size: 14px;
}

The “14px” is a value representing the font size of the Text inside the Complete Lesson Button. Change only the number to your desired font size.

6. The Previous & Next Lesson

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .bottom-content .standard-course-navigation li a {
font-size: 14px;
}

The “14px” is a value representing the font size of the Previous and Next Lesson Text. Change only the number to your desired font size.

II. The Sidebar

1. The Box

.wpep-widget-area .wpep-widget {
background: #ffffff;
}

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 Box Titles

.wpep-widget-area .wpep-widget .wpep-widget-wrapper h2 {
font-size: 14px;
}

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

3. The Progress Bar

.wpep-widget-area .wpep-widget .wpep-widget-wrapper .standard-course-progress-widget .wpep-progress-bar {
height: 20px;
background: #545454;
}

.wpep-widget-area .wpep-widget .wpep-widget-wrapper .standard-course-progress-widget .wpep-progress-bar .wpep-progress-bar-inner {
height: 20px;
}

The “20px” is a value representing the thickness of the progress bar. To customize it, change only the number to make the progress bar thicker or thinner.

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

4. The Sidebar Navigation

.wpep-widget-area .wpep-widget .wpep-widget-wrapper .standard-course-widget ul li p {
font-size: 12px;
}

The “12px” is a value representing the font size of the Sidebar Navigation Text. Change only the number to your desired font size.

III. Standard Course Index Page

1. The Container

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

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>h2 {
font-size: 24px;
}

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

3. The Sub Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-content {
font-size: 15px;
}

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

4. The Section Blocks Container

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

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.

5. The Section Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-index-section>h3>span {
font-size: 14px;
}

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

6. The Lesson Title

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-lessons>li.standard-course-lesson>a>.title-lesson {
font-size: 14px;
}

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

7. The Lesson Hover Effect

.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-lessons>li.standard-course-lesson>a:hover {
width: 100px;
}

The “100px” value represents the size of the hover effect. To customize it, change only the number to your desired size.

You can find all the snippets here.

Now go create massive value!

Did this answer your question?