Moodle for mobile

Moodle parses all CSS files. When theme designer mode is off, Moodle combines them into a handful of large CSS files that get cached and served. At the same time Moodle also looks at the CSS and replaces special syntax rules.

[[pix:theme|path/to/image/imagename]]

The above pattern is looked for by Moodle and gets replaced with the correct image  when found. You should note the following things about this pattern when using your own images within CSS:

The bits in black don't change

The bit in blue is the path to your image within the pix directory. It shouldn't start with a / but should end with one.

The bit in green is the filename (no need to include the file extension)

To use background.png as the background for our pages, add the following line of CSS to the themes core.css.

body {background-image:url([[pix:theme|gradient]]);}

Before we look at how to use your own images within your themes layout files we should first look at how this changes if the image is in a sub directory.

Lets assume gradient.png is located here: pix/myimages/gradients/gradient.png

The CSS would need to be as follows:

body {background-image:url([[pix:theme|myimages/gradients/gradient]]);}

If you want to refer to an image belonging to a plugin, you can do it like this:

body {background-image:url([[pix:quiz|icon]]);}

body {background-image:url([[pix:qtype_ddmarker|grid]]);}

That refers to mod/quiz/pix/icon.png/gif and question/type/ddmarker/pix/grid.png/gif respectively (or whatever icons you have put in your theme to override these).

Hi Pali,

is the image inside a subfolder? The current release of the app has a bug with images in subfolders, they aren't rendered in books. This bug will be fixed in the next version.

If the image isn't inside a subfolder, can you please create a backup of the book activity and send it to mobile@moodle.com so we can take a look? You don't have to include users, only the activity itself.

Thank you,

Dani