Het is mogelijk om de website integratie van het lesrooster in detail aan te passen met CSS code.
Ieder element van het lesrooster kan zo aangepast worden. Denk hierbij aan kleur, lettertype, formaat en zelfs het wel/niet tonen van het element op het lesrooster.
Overzicht van de elementen en corresponderende CSS tags:
.momoyoga-schedule (styles die de hele lesrooster weergaven betrekken)
.momoyoga-section (styles die het vlak per dag betrekken)
.momoyoga-day (de style van de naam van de dag)
.momoyoga-date (de style van de weergave van de datum)
.momoyoga-lesson-title (de style van de weergave van de les titel)
.momoyoga-lesson-time (de style van de weergave van de aanvangstijd van de les)
.momoyoga-lesson-action (de style van de weergave van de 'Boek nu' button)
.momoyoga-lesson (styles die het vlak per les content betrekken)
.momoyoga-lesson-details (styles die het uitklap-vlak per les betrekken)
.momoyoga-lesson-teacher (de style van de weergave van de docent naam)
.momoyoga-lesson-description (de style van de beschrijving van de les)
.momoyoga-lesson-link (de style van een eventuele link bij de les)
CSS Code
Omdat de mogelijkheden hiermee eindeloos zijn, raden we je aan informatie over CSS te raadplegen. Bijvoorbeeld via W3School. Dit is een goed startpunt om zelf CSS code toe te voegen aan de website van jouw yogastudio, en daarmee het lesrooster verder te personaliseren. Het Momoyoga team is niet opgeleid in de techniek omtrent de website integratie en het personaliseren daarvan en kan als zodanig daar geen ondersteuning in bieden.
Tips voor weergave op mobiel
Het lesrooster is 'responsive'. Dat wil zeggen, bij gebruik van bijvoorbeeld mobiele telefoon of tablet, past het lesrooster zich automatisch aan de device-size aan.
Mocht je bijvoorbeeld bepaalde gegevens niet willen tonen (bijvoorbeeld docent naam) dan kun je dit met CSS weglaten. Bijvoorbeeld per device-afmeting. Een voorbeeldje:
@media only screen
and (min-device-width: 320px) and (max-device-width: 480px) {
.momoyoga-lesson-teacher { display:none }
}