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. Course Content

1. The Course Title

.wpep-wrapper .wpep-container .wpep-course-single.course-type-basic .course-primary-container .course-primary-content>h1 {
font-size: 24px;
}

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

2. The Course Video

.wpep-wrapper .wpep-container .wpep-course-single.course-type-basic .course-primary-container .course-primary-content > iframe {
width: 100%;
}

100% is a value representing the width of the embedded Video. Change the percentage value to customize the width of the Video.

3. The Course Content

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

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

4. The Mark as Completed Button

.wpep-wrapper .wpep-container .wpep-course-single.course-type-basic .course-primary-container .course-primary-content .container-complete-course .complete-course {
font-size: 14px;
}

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

5. The Mark as un-Completed Button ( Optional )

.wpep-wrapper .wpep-container .wpep-course-single.course-type-basic .course-primary-container .course-primary-content .container-complete-course .incomplete-course {
font-size: 14px;
}

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

You can find all the snippets here.

Now go create massive value!

Did this answer your question?