Custom CSS for themes

 Advanced and technically experienced users can use their shop, membership & further customize online course themes with custom CSS. In addition to your coding know-how - especially HTML and CSS - all you need to use this feature is our app >>customization.

 Step-by-step guide

• In the main menu of your seller account, go to "Themes" and select the theme in which you want to apply custom CSS, e.g. from "Shop Themes."
• Go to the theme you want to edit by clicking on its ID or name and scroll down to the "Custom CSS" section.
• Click on the "Edit" button on the right.

• The coding window opens with the important notethat you use this feature at your own risk and that the validity of your codes will not be checked separately. Please paste only CSS code. You don't need to set any HTML style tags here.

• The various blocks of the pagebuilder can also be customized using CSS.

Please note: Basically, the codes that you set for the entire shop theme adapt all elements of the pagebuilder accordingly. The changes that you make yourself in the respective block only affect the block.

Customizable CSS classes

Blocks in the pagebuilder

HEADER_CLASS_NAMES = {
/* Header */
'cs-header-container'
'cs-header-yellow-message'
'cs-header-logo'
'cs-header-logo-link'
'cs-header-my-account'
'cs-header-menu'
'cs-header-sub-menu'
'cs-header-social-item'

/* Desktop Specific */
'cs-header-desktop-active'
'cs-header-desktop-social'

/* Mobile Specific */
'cs-header-mobile-container'
'cs-header-mobile-active'
'cs-header-mobile-social'
}

FOOTER_CLASS_NAMES = {
'cs-footer-container'
'cs-footer-column'
'cs-footer-powered-by'
}

MEMBERSHIP_PRODUCTS_LIST_CLASS_NAMES = {
'cs-membership-list-container'
'cs-membership-list'
'cs-membership-list-item'
'cs-membership-list-details'
'cs-membership-grid'
'cs-membership-grid-item'
'cs-membership-grid-details'
}

SELLER_PRODUCTS_LIST_CLASS_NAMES = {
'cs-products-list-container'
'cs-products-list'
'cs-products-list-item'
'cs-products-list-details'
'cs-products-list-price-container'
'cs-products-list-price'
'cs-products-list-old-price'
'cs-products-grid'
'cs-products-grid-item'
'cs-products-grid-details'
'cs-products-grid-price-container'
}

EXTRAS_PRODUCTS_CLASS_NAMES = {
'cs-products-controls-container'
'cs-products-search-container'
'cs-products-categories-dropdown-container'
'cs-products-categories-tabs-container'
'cs-products-not-found-container'
}

POPULAR_PRODUCTS_CLASS_NAMES = {
'cs-popular-container'
'cs-popular-controls'
'cs-popular-list'
'cs-popular-list-item'
'cs-popular-list-details'
'cs-popular-list-price-container'
'cs-popular-list-price'
'cs-popular-list-old-price'
'cs-popular-grid'
'cs-popular-grid-item'
'cs-popular-grid-details'
'cs-popular-grid-price'
'cs-popular-slider'
'cs-popular-slider-item'
'cs-popular-slider-details'
'cs-popular-slider-price'
}

DEFAULT_PRODUCT_CLASS_NAMES = {
'cs-product-container'
'cs-product-name'
'cs-product-top'
'cs-product-cover'
'cs-product-bottom'
'cs-product-price-container'
'cs-product-price'
'cs-product-old-price'
}

TEXT_CLASS_NAMES = {
'cs-text-container'
'cs-text-overlay'
'cs-text-wrapper'
}

BUTTON_CLASS_NAMES = {
'cs-button-container'
}

PICTURE_CLASS_NAMES = {
'cs-image-container'
}

FILE_CLASS_NAMES = {
'cs-file-container'
}

VIDEO_CLASS_NAMES = {
'cs-video-container'
'cs-video-empty'
'cs-video-player'
}

BANNER_CLASS_NAMES = {
'cs-banner-container'
'cs-banner-btn'
}

TESTIMONIALS_CLASS_NAMES = {
'cs-testimonials-container'
'cs-testimonials-empty'
'cs-testimonials-text'
'cs-testimonials-users'
}

AUDIO_PLAYER_CLASS_NAMES{
'cs-audio-container'
'cs-audio-container-wrapper'
'cs-audio-image-container'
'cs-audio-player-container'
'cs-audio-speed-container'
'cs-audio-details-container'
'cs-audio-info-container'
}

Online course elements

COURSE_MAIN_CONTAINERS_CLASS_NAME = {
'cs-course-main-container'
'cs-course-lesson-container'
'cs-course-lesson-area-container'
}

COURSE_BANNER_CLASS_NAMES = {
'cs-course-banner-container'
'cs-course-banner-info'
}

COURSE_PAGE_NAV_CLASS_NAMES = {
'cs-course-breadcrumb-container'
'cs-course-breadcrumb-reset-btn'
'cs-course-breadcrumb'
}

COURSE_COMMENTS_FORM_CLASS_NAMES = {
'cs-lesson-comments-form'
}

COURSE_COMMENTS_CLASS_NAMES = {
'cs-lesson-comments'
}

COURSE_COMMENT_CLASS_NAMES = {
'cs-lesson-comments-content'
}

COURSE_LESSONS_NAV_CLASS_NAMES = {
'cs-course-lesson-btns-container'
'cs-course-lesson-btn-next'
}

COURSE_LESSONS_LIST_CLASS_NAMES = {
'cs-course-lessons-overview-container'
'cs-course-lessons-overview-item'
}

COURSE_CUSTOM_BTN_CLASS_NAMES = {
'cs-course-lesson-btn'
'cs-course-lesson-nav-btn'
}

COURSE_SIDE_NAV_CLASS_NAMES = {
'cs-course-side-nav-container'
}

COURSE_CONTENT_CLASS_NAMES = {
'cs-lesson-content'
'cs-lesson-content-countdown'
'cs-lesson-content-assignment-success'
}

COURSE_QUIZ_CLASS_NAMES = {
'cs-course-quiz-results'
'cs-course-quiz-form'
}