UCL WIKI

UCL Logo

UCL Moodle Guides

Navigation

Moodle Resource Centre - home

General links

Moodle Home
E-Learning services for staff
Quickscan Dyslexia Screening Tool

Moodle Resources

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Banners help to make pages distinctive, orientate students in Moodle spaces which can look fairly samey, and set scenes or moods. Below are instructions for a horizontal image across the top of a section which reaches to the edge of the section, resizes with the window, and doesn't have an ugly scrollbar:

Note

For this, you need to go into your Moodle profile and enable the TinyMCE editor (it's a great text editor - many extra functions for tables, for example - but not currently our default in Moodle)

OR

if you

are ok

feel comfortable modifying the HTML code directly, switch into HTML view using the <> button and add the style code in bold below to the style tag of the banner image, removing any other styles already in this tag.

First find an image. Solvonauts, Flickr Creative Commons search and Wikimedia Commons are good places to look. The image you find may need to be cropped - its dimensions should be 1600px (if it's much narrower it may not reach to the edges of some screens) and its height is up to you (but the lower the better in terms of page load times). In terms of file size aim for under 100Kb, ideally around 40Kb - every extra kilobyte contributes to page load times and this can make a difference on slow connections.

...

  1. Insert the image according to steps 1-11 on the instructions above (or if you already have an image in place.
  2. Then to add the extra setting, put the section or label containing the image into edit mode, then to edit the actual image, select that image and in the editor's toolbar click on the Image button; its settings display.
  3. Click on the Appearance tab.
  4. Into the Style field, type: max-width:100%; height:auto; - then save the settings. 
    • N.b. the semi colons are important. This short string of code you've just entered will resize the image when the window is resized while keeping its aspect ratio (rather than squeezing it).

      Image Modified