Moodle 2.3 Theme Engine

Setting Theme Images

Remote-Learner's AutoTheme also let you upload banners, logos, and other site images.

To set theme images, click the "Images" tab. Select the (1) Add... link to open the File Picker window and upload files or use the (2) drag and drop feature to upload files. Here we are replacing the background image.

RL Master Images tab

Selecting the Add... link opens the File Picker window where files can be uploaded. To upload files from your computer go to the Upload a file section in the menu on the left side of the window. Then select the Browse button to choose a file.

File Picker window

For the examples on this page we will use the drag and drop feature to upload files. In the following image the file has been uploaded already.

Save changes at the bottom of the page and the background image is now tiled on the site (see the Custom CSS tab below to see how to control tiling settings).

Images tab
To delete an uploaded image click on it and a window opens where you can delete the file or update it. If you delete the image, save changes at the bottom of the page to update the theme.

Deleting the background image

If we change the background image back to the RL Master default image, the background is changed to a lite grey.

Images tab

A more common request is to change the header images, so lets look at that.

Scroll down to the Header image area on the Images tab. Use drag and drop to add a file or use the Add... link. In the image the Remote-Learner logo is already uploaded to the Header Logo section. To change the image select the image to open a window where the image can be deleted, then upload a new image.

Images tab header logo section

Selecting the Save changes button at the bottom of the screen will update the theme with the new header image. Now that the image is loaded, you will see it in the left header area.

Remote-Learner logo


The following images show the entire Images tab with a brief explanation of each section.

Images tab
  1. Images placed here will tile across your site background.
  2. Images placed here will show up beneath the header image.
Images tab
  1. This will show in the block headers for your site
  2. Images placed here will show up behind a custom menu
  3. Images placed here will show up behind the header - often these are tiled images
Images tab
  1. This will be the left site of your header image.
  2. This will be the right side of your header image.
  3. This will put an image in the background of your footer

Images tab

  1. This will put a image in your navigation bar
  2. This will add a background to your heading.
  3. This will create a favorites icon for your site.