We’ve featured quite of bit of Gareth Barnard’s work here on MoodleNews. And, for good reason, Gareth is not only a rock star developer, he also has that rare knack of being able to exp…
Making Moodle Multi-device Friendly with Bootstrap
Dressing for success in a Multi-Device World, Twitter: @basbrands
bootstrapbase and the clean theme are used in Moodle core since version 2.5. It is build on Bootstrap version 2.3.2. David Scotson and Bas Brands have been working on a new version of theBootstrap 3 theme for Moodle. In this hackfest session we have demonstrated how to use the Bootstrap 3 theme and the new features and issues we have.
There are already quite a few organisations that have adopted Bootstrap 3 as its base theme or have created modified version. We invite everybody to share your experiences / code or bugs you might have found.
Julian Ridden is at it again and the prototype is really an amazing looking theme. Essential theme has taken Moodle sites by storm (and I’ve seen more than a few sites adopt and modify it to create a really awesome looking course site) and Elegance could follow closely in its footsteps. The theme has not been officially released but you can follow the thread at Moodle.org and track the progress to date.
A few notes:
The theme is built on Bootstrap 3.0 (the latest framework) and is responsive
It has a cool “tiles” which represent course resources and activities (rather than the standard links)
Something similar to the Moodle 2.7 navigation is included for easy access to user preferences, settings, messages
There’s a redesigned “MyMoodle” page
If you have checked out the the Learn Moodle MOOC, you will have noticed its unique theme. The theme is a custom version of the Bootstrap theme and is the creation of Barbara Ramiro, the Web and Graphic Designer at Moodle HQ.
חלק ראשון (10:00-11:30):
- MOOC במוודל (מצגת)
- גלריה של מודלים פדגוגיים להוראה מתוקשבת (רותי סלומון)
- מישחוק קורס להגברת המעורבות של הסטודנטים בתהליך הלמידה (מצגת)
- ערכת עיצוב חדשנית Avalon (ניצן בר) בנוסף תצוגת ערכות עיצוב בתפיסת Responsive לתמיכה בניידים (מצגת)
חלק שני (12:00-13:30):
“עם שחרור גרסת מוודל 2.5 חשבתי שזה זמן לקחת את ההזדמנות לבנות ערכת נושא חדשה שידחוף את מנוע ערכת הנושא Bootstrap Base חדש לגבולות חדשים. וכעת, אני שמח להציג את ערכת הנושא החדשה “חיוני” Essential.
הרעיון של ערכת נושא הזו, כמו בכל ערכות הנושא שלי, הוא להפוך את האתר שלא יראה כמו מערכת מוודל Moodle מוכרת, עד כמה שאפשר. במקרה המסויים הזה, המטרה הייתה לשימוש באתרים שבהם Moodle נדרש לשמש כדף הבית של חברה ולא רק להצגת רשימ קורסים, כמובן.” (ג’וליאן רידן)
With 2.5 now release I thought it time to take the opportunity to build a new theme that would push the new theme engine to it’s limits a bit. With that in mind I am happy to introduce the new “Essential” theme.
The idea of this theme, as usual with my themes, is to make the site look as little like Moodle as possible. In this specific instance, it would be used on sites where Moodle would potentially serve as a company homepage rather than just a course list.
Cool things to know about the theme:
- It only uses 6 images.
- Most of what you think are “graphics” are actually the Awesome font
- The slider on the frontpage of the demo site is completely customisable through theme settings
- I am really trying to push what Bootstrap Grids can do. As such the theme is fully responsive.
- The footer is all custom Moodle regions. This means blocks can be added. The footer of the demo site is full of HTML blocks in this instance
- The Theme uses Google webfonts to give it that extra bit of shazam!
- Social Network icons appear at the top of the page dynamically based on theme settings
- The entire color scheme can be modified with theme settings (like on Rocket)
The homepage main area is just a label. The theme will ship with custom classes that you can set for tables and links to modify their formatting. No knowledge of code is needed as you can use the text editor to do this. Documentation will be provided outlining what the additional classes are.