How To Design A Moodle Mobile Theme From The Comfort Of Your Web Browser: MoodleMoot IEUK 2016

4849
moodle-mobile-themes

Juan Leyva and Daniel Palou from Moodle HQ share with us their workflow to begin developing new themes for Moodle Mobile, on a presentation made last March in MoodleMoot Ireland and UK 2016.

Post Pages - Post Inline - WIRIS

This presentation condenses a lot of information into 3 sections:

  1. Setting up your development environment.
  2. Editing the default theme through browser inspection.
  3. Saving and configuring your new Moodle theme.

1. The Development Environment

If you have access to a Moodle installation, all you have to do is log in. If not, Leyva and Palou suggest you make a fork of their GitHub build, or if you want to go further, set up a personal development environment.

The important thing here is that you can access a Moodle Mobile dashboard from a modern browser.

2. Browser Inspector

If you use the latest version of Firefox, Safari or Chrome, you can open development tools by pressing Ctrl + Shift + I . Look for a tab called Styles or Stylesheet. This will show all the CSS code that gives Moodle Mobile its layout and visual elements. If you know CSS syntax and attributes, you can click to edit, remove or add attributes and values. The changes you make are only for yourself, and you can always reload the page to reset them.

Slide 5 show an inoffensive edit: the color or the top bar. Search for the .bar-header element, and change the current value of the background-color attribute by double clicking on it. Replace it with the hex code of your favorite color, or try with Chuck Norris official green:

.bar-header {
    background-color: #BADA55;
}

Slides 6 to 9 show more things you can change by tweaking CSS. You can change icons, fonts and dimensions, among other variables. Go nuts!

3. Saving and Implementing

Once you have edited the stylesheet to your heart’s content, the inspector lets you save a CSS file. If you close the tab or reload, all the changes you made will be lost.

Upload the theme in your Moodle installation (slide 10). You can go to the directory system, or through the site administration menu.

A recommendation to make your code more professional and efficient, is to “minify” it. Minification involves reducing the file size to make it load faster, but it makes your code harder to read, because it removes indentations. A general principle is to minify only if no further changes will be made to the CSS file. For some developers Minification can be a bad practice when it is an example of “premature optimization“, a hot topic of debate around the web.

Check out the slides below. You can also download the presentation from the official MootIEUK 2016 page.


moodlerooms-logoThis Moodle Practice related post is made possible by: MoodleRooms the open source learning experience by Blackboard. Rediscover Moodle. Click here to learn more.


Have you edited the Moodle Mobile CSS? Show us your special flavor by linking to it in the comments!