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

.wpep-wrapper .wpep-container .course-grid-container .course-grid-container-main-head {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 .course-grid-container .course-grid-container-main-head {font-size: 24px;}

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

3. The Sub-Title

.wpep-wrapper .wpep-container .course-grid-container .course-grid-container-main-head .course-grid-container-sub-head {font-size: 14px;}

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

II. Categories Section

1. Category Box

.wpep-wrapper .wpep-container .course-grid-container .course-grid-category-list {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. Category Box Image

.wpep-wrapper .wpep-container .course-grid-container .course-grid-category-list .course-grid-category-item .course-grid-category-item-wrap img {width: 100%;}

The 100% value represents the width of the Category Box Image. To customize the width just change the percentage value.

3. Category Box Text

.wpep-wrapper .wpep-container .course-grid-container .course-grid-category-list .course-grid-category-item.course-grid-category-item-active .course-grid-category-item-wrap p {font-size: 17px;}

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

4. Filter By Text

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

5. Filter By Category Text

.wpep-wrapper .wpep-container .course-grid-container .course-grid-sub-category-list ul li.trigger-filter {font-size: 18px;}

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

III. Course Presentation Card

1. The Container

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item {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 Image

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .img-wraper img {width: 100%;}

The 100% Value represents the width of the Presentation Card Image. To customize the width just change the percentage Value.

3. The Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .main-heading {font-size: 18px;}

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

4. The Short Description

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .sub-heading {font-size: 14px;}

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

5. The Button

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .btn-wraper .view-more {font-size: 18px;}

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

6. The Progress Bar

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .wpep-progress-bar {background: #ebebeb;}

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .wpep-progress-bar .wpep-progress-bar-inner {height: 19px;}

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

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

IV. E-Book

1. The Container

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-ebook-grid-items-container .ebook-grid-item {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 Image

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-ebook-grid-items-container .ebook-grid-item .img-wraper img {width: 100%;}

The 100% Value represents the width of the Ebook Image. To customize the width just change the percentage Value.

3. The Button

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-ebook-grid-items-container .ebook-grid-item .btn-wraper .download-ebook {font-size: 18px;}

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

V. Videos

1. The Container

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item {background: #ffffff;}

The “720px” is maximum width value of your videos. To customize the width just change the value.

2. The Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-title {font-size: 12px;}

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

3. The Sub Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-page-container {font-size: 29px;}

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

4. The Video

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-page-container .video-container {margin: 17px 0 25px 0;}

The “17px” and “25px” is a value representing the current width, height and max-width of the Video Container. Change the numbers only to customize the size of the picture.

5. The Description

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-page-container .description {font-size: 18px;}

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

6. The Videos Archive Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-archive-title {font-size: 18px;}

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

7. The Videos Archive – Item

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-grid-item .center-section h2 {font-size: 18px;}

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.

8. The Videos Archive – Icon Item

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-grid-item .container-play-circle {border-top-width: 15px;border-left-width: 25px;border-bottom-width: 15px;}

The “15px”, “25px” and “15px” are values representing the current width, height and max-width of the Video Container. Change the numbers only to customize the size of the picture.

9. The Videos Archive – Title Item

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-grid-item .center-section h2 {font-size: 18px;}

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

10. The Videos Archive – Description Item

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-grid-item .center-section p {font-size: 14px;}

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

11. The Videos Archive – Button Item

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item .btn-wraper .view-more {font-size: 18px;}

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

VI. Offers

1. The Container

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item {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 Image

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-image-container img {width: 100%;}

The 100% value represents the width of the Offer Image. To customize the width just change the percentage value.

3. The Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-sub-title {font-size: 12px;}

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

4. The Sub-Title

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-sub-title {font-size: 12px;}

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

5. The Description

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-description {font-size: 12px;}

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

6. The Benefits List – Text

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-information-container li strong {font-size: 12px;}

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

7. The Benefits List – Attribute

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .offer-information-container li {font-size: 12px;}

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

8. The Button

.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item .view-offer-container a {font-size: 12px;}

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

Now Go Create Massive Value!

Did this answer your question?