How can I customize the website integration?

It is possible to customize the website integration of the class schedule in more detail using CSS.

Each element of the class schedule can be customized.

Overview of the elements and their corresponding CSS tags:

.momoyoga-schedule (styles that involve the entire class schedule display)
.momoyoga-section (styles that include the area per day)
.momoyoga-day (the style of the name of the day)
.momoyoga-date (the style of the display of the date)
.momoyoga-lesson-title (the style of displaying the class title)
.momoyoga-lesson-time (the style of displaying the start time of the class)
.momoyoga-lesson-action (the style of the 'Book now' button)
.momoyoga-lesson (styles that involve the plane per lesson content)
.momoyoga-lesson-details (styles that involve the drop down area per lesson)
.momoyoga-lesson-teacher (the style of displaying the teacher name)
.momoyoga-lesson-description (the style of the description of the lesson)
.momoyoga-lesson-link (the style of any link to the lesson)

CSS Code

Because the possibilities are endless, we recommend you check out resources like W3School for references on CSS code that can be utilized to customize your website integration. Our support team is not trained at in-depth website integrations and will not be able to help you customize the integration.

Tips for display on mobile

The class schedule is set up responsive by default. Meaning it automatically adjusts to the device size. For example smartphone or tablet.

If, for example, you don't want to show certain data (e.g. teacher name) then you can leave this out using CSS. Optionally per device size. An example:

@media only screen
        and (min-device-width: 320px) and (max-device-width: 480px) {
        .momoyoga-lesson-teacher { display:none }

}