Moodle 2 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.
Moodle theme engine images tab
Scroll down to the Header Image (Left) entry:
Moodle header image 2

Click Upload a file:
Uploading an image
Click the Browse button:

Header image 4

Select the image you want to upload:

Locating the image

Click the Upload this file button:
Upload a file
The file will now show in the entry box. It is a link that you can click to preview the file.
Uploaded file

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.
Adjusting theme colors
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
If you have Theme designer mode on, you will see your change when you Save Changes. If not, click the Clear theme caches button on to of the Theme selector list.
Clear theme caches

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 got back to the images tab and scroll to the Header Image (Right) row:
Seeting a right side logo image

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.

selecting the file
Upload your right side header image and click Save changes.
The rigth header image

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.

Changing the header height.
Scroll down to the Header Height row and set the height to match your image.

Setting the header height
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:

Login info

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.