Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Talk:Using images in a theme

From MoodleDocs

Just had a quick browse through this, I have not tested this but are there file extensions missing in the examples?

e.g. -

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

shouldn't this read -

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

--Matthew Cannings

No. It is intentional.

It is not really important for theme images. After all, if you are making a theme, you probably do know what type your images are. However, suppose in your theme you want to override one of the standard icons, for example i/edit. Well, even though the standard images is i/edit.gif, you might want to replace it with i/edit.png in your theme, and you can, and Moodle will find the image as long as it is one of the supported formats. We use the same basic system for all images (theme, core and plugin) so that is why you must not specify the extension when you link to the image, and you can use any format you like.--Tim Hunt 18:50, 10 June 2010 (UTC)

These documents are essentially for developers, but is there going to be a plainer version for us who do not speak the necessary jargon? I have been trying to figure out how to explain this in the Front Page FAQ to provide people looking at Moodle 2.0 with a hope of including their own logos onto their selected themes. Seriously, I do not have either the time or the patience to learn PHP to the point where I might be able to explain it in a non-technical manner. From what I am able to decipher, it might be easier than earlier versions, but I cannot be sure. --Colin Fraser 09:02, 2 October 2010 (UTC)

couple small errors

In the text below, the second "pattern" has no "n", and I believe "background.png" should be "gradient.png".


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

  1. The bits in black don't change
  2. 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.
  3. 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(gradient);}


If you spot something that is clearly a typo, please just fix it directly. Thanks. Also, I don't think that it matters, for this example, whether the code uses background or gradient.--Tim Hunt 14:19, 8 October 2010 (UTC)

standard.php ??

The instructions say "open the layout file e.g. standard.php". I don't see any file called standard.php in version 2.2. So what file am I looking for?

Well, it is your theme, and you may have called the layout files anything you like. However, most of the core themes have a file called general.php, so I changed it to that.--Tim Hunt 03:11, 17 December 2011 (WST)

Overriding plugin images

I tried following the example here for overriding a blocks plugin image, and noticed an error.

The correct path to the image in the theme should be /pix_plugins/block/customblock

Notice its block not blocks I discovered this looking at the code here at line 1600

lib/outputlib.php

The wording should be changed to something like the path must use the Frankenstyle plugin prefix. I would do an edit, but I don't feel that my English and documenting skills are up for the task. --Dimitar Ivanov (talk) 02:55, 11 February 2016 (AWST)

Based on this comment, I think your English skills are great! Please edit the real document. :-) --Tim Hunt (talk) 05:50, 11 February 2016 (AWST)
Done :) --Dimitar Ivanov (talk) 06:10, 11 February 2016 (AWST)