Már megint hogy nézel ki? – Betekintés a reszponzív design világába

Már megint hogy nézel ki?

Betekintés a

reszponzív design

világába

Miről lesz szó?

• Egy kis Moodle történelem a stílusok tükrében• Stíluskezelés a Moodle-ban• Így volt régen• Így van most• Magad uram... – nem akarok kódolni• Hogyan készítsünk saját stílust?• No, akkor lássuk azt a CSS-t!• Stílusok és utak

MoodleMoot 2016 – Óbudai Egyetem

Egy kis történelem

Egy kis történelem

• Moodle 1.x – hagyományos stílusok• Moodle 2.0 – hagyományos (statikus) stílusok• Megjelennek a reszponzív stílusok, de...• Moodle 2.7 – nincs „vele adott” hagyományos

stílus• A verzióváltásokat tessék komolyan venni.

MoodleMoot 2016 – Óbudai Egyetem

A MOODLE stíluskezelése

• Megjelenés– Stílusok• Stílusbeállítások• Stílusválasztó• Clean• More• ...

MoodleMoot 2016 – Óbudai Egyetem

Így volt régen

Így volt régen

Ami kellett:• Layout• Fonts• Color• Moz• No és a pix könyvtárak

MoodleMoot 2016 – Óbudai Egyetem

Az öröklés rendje

Az öröklés rendje

• Alap stílusok– base – bootsrapbase

• Saját (választott) stílus/stílusok• A modul stílusa

MoodleMoot 2016 – Óbudai Egyetem

Így van most

Így van most

• Alap stílusok – nem választható– base– bootstrapbase– ezek nem választhatók– moodle fissítéskor felülíródik

• Saját (választott) stílus/stílusok– választhatók – csak az adott stílus frissítésével íródik felül

• Modul stílusa– moodle frissítéskor felülíródik

Nem akarok kódolni!

Használj sablont!

Amiket javasoljuk: • Essential• Aardvark• Academy• Adaptable• Klass• Elegance

MoodleMoot 2016 – Óbudai Egyetem

Használj sablont!

• Essential• Aardvark• Academy• Adaptable• Klass• Elegance• …

MoodleMoot 2016 – Óbudai Egyetem

Készítsünk saját stílust

MoodleMoot 2016 – Óbudai Egyetem

Web Developer Toolkit

Egyedi CSS

MoodleMoot 2016 – Óbudai Egyetem

Új elemek!

• Slider• Marketing információk • Social media• Egyedi élőfej• Egyedi élőláb• Egyedi menü

MoodleMoot 2016 – Óbudai Egyetem

Mire kell gondolni?

• Layout– general– frontpage– report– embedded– popup, default, login, …

Mi hol van szabályozva?

• Style– admin– block – calendar – core– course– dock – editor – filemanager– grade– message – pagelayout– question

• Style– search– tabs– templates– user

– Button– form– debug– …

Hogyan fogjunk hozzá?

• Válassz kiinduló stílust!• Nevezd át! Hajaj, de mennyi helyen…– nyelvi állomány neve– nyelvi állomány tartalma– config.php– version.php– szkriptekben, ha kell

• Pix könyvtár testre szabása

MoodleMoot 2016 – Óbudai Egyetem

Köszönöm a figyelmet

Papp Gyulapapp.gyula@consedu.hu

MoodleMoot 2016