Benutzerdefinierte CSS für Themes

 Fortgeschrittene und technisch versierte Nutzer können ihre Shop-, Membership- & Online-Kurs-Themes mit benutzerdefinierten CSS weiter individualisieren. Neben deinem Coding-Know-How – insbesondere HTML und CSS – benötigst du für die Nutzung dieses Features nur noch unsere App >>Customization.

 Schritte-Guide

• Gehe im Hauptmenü deines Anbieter-Accounts auf "Themes" und wähle das Theme, in welchem du Custom CSS anwenden möchtest, z.B. aus "Shop-Themes".
• Rufe das Theme auf, welches du bearbeiten möchtest, per Klick auf dessen ID oder Namen auf und scrolle bis zum Abschnitt "Benutzerdefinierte CSS".
• Klicke rechts auf den Button "Bearbeiten".

• Es öffnet sich das Coding-Fenster mit dem wichtigen Hinweis, dass du diese Funktion auf eigene Verantwortung nutzt und die Gültigkeit deiner Codes nicht gesondert geprüft werden. Füge bitte ausschließlich CSS-Code ein. Du brauchst hier keine HTML-Style-Tags zu setzen.

• Auch die verschiedenen Blocks des Pagebuilders sind per CSS individualisierbar.

Hinweis: Grundsätzlich gilt, dass die Codes, welche du für das gesamte Shop-Theme setzt, alle Elemente des Pagebuilders entsprechend anpassen. Die Änderungen, die du im jeweiligen Block selbst vornimmst, betreffen immer nur den Block.

Individualisierbare CSS-Klassen

Blöcke im 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-Kurs-Elemente

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'
}