Custom UI – Flat Design

The Custom UI Flat Design uses just the primary color.
Optionally, if you want to change the black shades, you can do that by using Custom CSS. We’ve prepared all the details in case you want to do that.

Simply replace the color code #242424 everywhere with one color, or change it to a different color for every other section.


.wpep-wrapper .wpep-container .course-grid-container .course-grid-container-main-head {
background-color: #242424;
}
.wpep-wrapper .wpep-container .course-grid-container .course-grid-sub-category-list {
background: #242424;
}
.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-course-grid-items-container .course-grid-item {
background-color: #242424;
}
.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-ebook-grid-items-container .ebook-grid-item {
background-color: #242424;
}
.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .wpep-offer-grid-items-container .offer-grid-item {
background-color: #242424;
}
.wpep-wrapper .wpep-container .course-grid-container .grid-item-cont .video-grid-item {
background-color: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content > h2,
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content h3.simple-title,
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content h4.simple-title {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content > .standard-course-content {
border: 1px solid #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content > .standard-course-lesson {
border: 1px solid #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .bottom-content .standard-course-navigation li a {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-lessons > li.standard-course-lesson,
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .standard-course-lessons > li.standard-course-assessment {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .course-header {
background-color: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container h4,
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .progress-bar-container #progress-value {
color: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group h2 .checkbox .section-heading {
display: table;
color: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .section-accordion-group > .section-select-learning-path-container > select {
background: #242424;
}
.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 {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-course-single .course-primary-container .course-primary-content .wpep-course-form .wpep-assessment-information-box {
background: #242424;
}
.wpep-wrapper .wpep-container .course-type-video .video-course-sections tbody tr td:first-child {
color: #242424;
}
.course-widget .course-grid-item {
background-color: #242424;
}
.wpep-widget-area .wpep-widget .wpep-widget-wrapper h2 {
background: #242424;
}
.wpep-widget-area .wpep-widget .wpep-widget-wrapper > div > div,
.wpep-widget-area .wpep-widget .wpep-widget-wrapper > div > ul {
border: 1px solid #242424;
}
.wpep-widget-area .wpep-widget .wpep-widget-wrapper .standard-course-progress-widget {
background: #242424;
}
.wpep-wrapper .wpep-container #user-profile .header-user-profile {
background: #242424;
}
.wpep-wrapper .wpep-container #user-profile .wpep-user-profile-course-list .wpep-user-profile-course-list-item {
background: #242424;
}
.wpep-user-profile-authentication-wrapper .wpep-form-group label {
color: #242424;
}
.wpep-user-profile-authentication-wrapper .wpep-form-group input[type=\"text\"],
.wpep-user-profile-authentication-wrapper .wpep-form-group input[type=\"email\"],
.wpep-user-profile-authentication-wrapper .wpep-form-group input[type=\"number\"],
.wpep-user-profile-authentication-wrapper .wpep-form-group input[type=\"password\"] {
background-color: #242424;
}
.wpep-user-profile-authentication-wrapper .wpep-form-group .remember-me-container label label {
color: #242424;
}
.wpep-user-profile-authentication-wrapper .wpep-form-button-container span {
color: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .label-radio,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .label-radio,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .label-radio,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .label-radio,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .label-checkbox,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .label-checkbox,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .label-checkbox,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .label-checkbox {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-input:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-input:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-input:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-input:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-select:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-select:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-select:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-select:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-textarea:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-textarea:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-textarea:focus,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-textarea:focus {
border: 2px solid #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-select,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-select,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-select,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-select {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-top-section,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-top-section,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-top-section,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-top-section {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-form .wpep-assessment-questions-container .wpep-assessment-question-container .wpep-assessment-question-title,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-assessment-questions-container .wpep-assessment-question-container .wpep-assessment-question-title,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container .wpep-assessment-questions-container .wpep-assessment-question-container .wpep-assessment-question-title,
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-success-message-container .wpep-assessment-questions-container .wpep-assessment-question-container .wpep-assessment-question-title {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-top-section {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-assessment-row-overview {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-confirm-start .wpep-assessment-operations-container {
background: #242424;
}
.wpep-wrapper .wpep-container .wpep-assessment-single #assessment-primary #assessment-content .wpep-assessment-message-container {
background: #242424;
}

in WPEP Addons

Related Articles