Moodle 2.3 Theme Engine

Creating a flexible width header image

When setting up a new site, most people want to create header image that defines the site, where logos, titles, and other information may go. This page will go over that process one step at a time.

Activate the theme as described above.

First, we will replace the default header with a header image we have created.

Moodle theme editing a header image

Click the RL Master theme in your Moodle theme list, and then click the Images tab.

RL Master Images tab

Scroll down to the Header Logo entry. Select the (1) Add... link to open the file picker window and upload a file or (2) drag and drop a file onto the file space to upload it.

Images tab header logo section

The file will now show in the entry box. Selecting the file opens a window where the file can be viewed, updated, or deleted.

Images tab header logo entry

Scroll to the bottom of the screen and click the Save Changes button.

Saving changes

Now you will see your logo in place. If you do not see your logo right away, go to the theme selector and click the Clear theme caches button.

Seeing your logo on your Moodle site

Next we want to make the header background color match the logo color. Click the Colors tab.

Colors tab

Find the Header Color row:
Changing header color

Click the current color code in the Background (first) column and the color picker will pop-up. You can choose a color by clicking in the color swatch, or if you have a hexadecimal or RGB color you know you want, you can just type those in. When you have picked a color, click OK.

Header color changing

Save changes at the bottom of the screen.

Saving changes

You can see the header color now matches the background of your logo:
Seeing the header color change

The above will work for simple logo changes. If you have a more complex banner that has a left side and a right side, and you want those to stay the same no matter how wide a user opens their browser, then you can also set a right side header image.

To do that go back to the images tab and scroll to the Header Image (Right) row:
Images tab header right section

Creating a right side image from a full size banner.

If you already have a full size banner and want to use a fluid theme which automatically stretches to the width the viewer has it open to, then you will need to split your header image into two images.

For example, the 800 pixel wide header image below will work fine if your site has a fixed width of 800 pixels. For accessibility, due to the fact that many viewers have large monitors, and general user friendliness, many modern sites have a flexible width that scales to the width of the user's screen.

To accomplish that we need to split the banner in half.
long header image

Different image editors differ, but most have a method to select a region of an image and copy it into a new file. Here I've selected the right side of the logo image.

Splitting the image
I'll paste this as a new image and save it. Remember to compress your image if the original is large - ideally header images are not over 50kb to help keep the site loading quickly. For photos, jpeg or PNG compression is fine. For graphics without gradients or complex colors, GIF is a good format. If you need to, create the left side image the same way. (In this example, the left side header image above already works with the new right side image.)
pasted right side

Next, choose the file you have created for your right side image, and upload it.

Upload your right side header image and click Save changes.
Images tab

Now you will see the one half of the logo on the left, and the other half on the right.

Seeing the header image

The header looks a little odd as it is taller than the default header height of 75 pixels. To fix this, find out the actual height of your image in your image editor:

image height

Then, go to the Layout tab.

Layout tab

Scroll down to the Logo Height row and set the height to match your image.

Layout tab logo height entry

Now the full image is shown:
90 pixel header

One other thing we may want to do to make the header look nice is move the Logged in info to a different position. To do this, go to the Miscellaneous tab:

Miscellaneous tab log info top setting

Enter a different value here and Save changes. Here we have set the log in information to 1 pixel below the top of the page.

Moving the login link

You can change the color of the log in information either by changing all link colors in the Colors tab, or via custom CSS in the Custom tab.