Print bookPrint book

Moodle 2 Theme Engine

Documentation for the Remote-Learner Moodle 2 theme engine.

Site: Remote-Learner.net
Course: Remote-Learner.net
Book: Moodle 2 Theme Engine
Printed by:
Date: Wednesday, 18 October 2017, 1:51 AM

Remote-Learner's Moodle 2 Theme Engine

The Remote-Learner Moodle 2 Theme Engine:

Wouldn't it be nice if you could edit Moodle 2 themes with simple online forms? Select colors with a color picker? Easily upload and re-use images in your themes? See the effects of your changes right away?

We think so too, so Remote-Learner is now providing this capability for all clients.

This tool enables you to edit your theme online, with no need for ftp'ing CSS files, and many settings can be changed via simple, interactive webforms. For example you can change the color of an element by choosing it and selecting a color in the interactive color picker:

Setting color in auto-theme

The Theme Engine also lets you enter CSS directly for more advanced users and effects.

Entering raw CSS in the Remote-Learner AutoTheme Engine:

Setting custom css in AutoTheme

However, for in-putting graphics, header and footer code, setting block and module colors, etc. the RL AutoTheme Engine enables you build a new Moodle theme without having to know or write any code.

Adding an image to the top banner in the RL AutoTheme engine:

adding an image to autotheme

In the following pages of this manual, we'll see how to create new themes for your Moodle 2 site using Remote-Learner's RL Master theme tool.

Activating the RL Master Theme

To activate RL Master theme:
Starting up RL Master theme

Go to Site Administration/Appearance/Themes and click the Theme selector link.

Select Theme

Choose the RL Master theme from the resulting list.
Use RL Master

*Tip - while editing the RL Master, you can set it as a course theme for a particular course, so that you don't affect the production site while editing the theme. The RL Master theme tool also lets you import and export themes, so you can create the theme on a test site, and then load it onto your production site.


Checking your theme version

Remote-Learner's RL Master theme is an active project that is frequently updated. It is important to check that you have the latest version of the theme in order to use this manual. To check this, go to your Settings/Site administration/Plugins/Plugins overview link.

Moodle release information

Locate the Release column, and then note the version number of your RL Master theme on your site. Check the Theme Release notes forum to make sure you have the latest release.

Theme release



Editing your theme

Once you have set the RL Master theme as the default theme for your site (or your user) you can start editing the theme. To edit the theme, click the RL Master theme's name:

Loading RL Master

  1. Go to the "Settings" tab, Appearance/Themes
  2. Open the RL Master theme.

If you do not have at least version 2.1.2 (on Moodle 2.1) or 2.2.2 (on Moodle 2.2) of the RL Master theme, you will need to clear your theme cache each time you make a change to see the results of your changes. If you update to the latest version of the RL Master theme, you will your changes as soon as you click the save button when editing a theme. As of RL Master 2.1.2/2.2.2 you do not need to turn on Theme designer mode anymore and should turn it off if you have turned it on.

When you click the RL Master link you will see the first screen of the RL Master configuration screen. We will explain the controls here in detail in subsequent pages.

The theme controls tab

  1. The first tab of the RL Master theme interface. Click tabs to move from one screen of the interface to another.
  2. This is a link to the RL Master theme documentation you are reading now.
  3. These are controls for backing up your theme, and for loading a backup theme. This is described in more detail in subsequent pages of this documentation.
  4. This will open up an alternative file upload interface for loading theme files.

Importing and exporting your theme

The RL Master theme tool enables you to save a theme on one site, and move it to another site. You can also save the current theme you have before starting to edit your theme. You can also import some pre-created template themes (see the Template themes page below). All of these actions are performed on the the Controls tab of your RL Master theme.

Before you start editing, it is a good idea to backup your current RL Master theme. This will let you restore it if you make a mistake while editing your theme. It will also let you save a copy of your theme for loading on a different site. For example, you can build your theme on your development instance of Moodle and then move it to your production instance using the "Controls" tab.

backing up your theme

In the "Controls" tab choose "Export" to export your entire current theme (code and images). This will create a zip file you can download.

To restore your theme, import this backed up theme, and then click "Refresh".

To move a theme from one site to another, upload a theme exported from the RL Master theme Controls tab, and then Import it as described below.

Importing a RL Master theme file:
Note that importing a new theme will delete your old RL Master theme, so if you want to save the old theme, export it before running the steps below.
  1. First, click the Choose a file.. button in the RL Master Controls tab

  2. Importing a new Moodle theme
  3. Select the specific file by clicking the Choose File button
    Choosing a file to import a theme into Moodle
  4. Select an exported RL Master theme file
    Getting the file
  5. Click the Upload this file button.
    Saving the attachment
  6. Now click Import. This will refresh your theme cache (if you are using RL Master 2.1.2+ or 2.2.2+)* and display the new theme.
    Now click import

See the Sample Themes page for five sample RL Master theme templates you can start from.

*Ask RL support to update your version of the RL Master theme if you are on an older version and automatic update does not happen.

Setting theme colors

On the Colors tab (1) you can set the colors of most items in your theme. Setting colors

  1. Click the colors tab to get to the theme color editor.
  2. Click on an existing color to open the color picker
  3. Select a color by clicking it, or type in the hexadecimal directly (in the # space on the editor).
  4. Click OK to set the color, or cancel to cancel (remember to click Save Changes at the bottom of the form also).
Set color
For example, in the image above we have set the foreground color of the block to FFFFDC.

Example 1: setting the dock color:
Set dock color
  1. We'll start by locating the "Dock Color" row on the form.
  2. Then select the dock Background color by clicking it - this will open the color picker where we can select a color or enter it directly. In this example we entered "D05B17" in the # field
  3. Then click OK.
Finally, click "Save Changes at the bottom of the form.

Once we save our changes, the "Sample" tab updates with the new color settings:

Dock Color Results

Of course the actual dock now shows these colors as well:
Dock Color

Example 2: Updating Block colors

block colors

  1. In this example, we have decided that the light green color that unvisited block links are shown in is too light.
  2. To fix this, we'll go to the colors tab of the RL Master theme, and click the Foreground color
block colors

Choose a new foreground color - here we have chosen #160E86.

Save Changes
Save changes to implement the new color.

See the new color

Now the new color is implemented in the block (note if the color doesn't change, you probably didn't set theme designer mode to on, above. You can also clear your cache to see the changes if you don't want to set theme designer mode to on).

Next we'll change the block background color, just because we can:-).

Changing the block color
Click the Background color field in the Block Color row, and choose a new color. Here we've chosen FFD3A2.
Click OK and save changes as above.
Block Color Changed
Now you can see new block colors.



Setting Theme Images

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

  1. To set theme images, click the "Images" tab.
background image
Click "Choose a file" for an image you wish to add (or replace)- for example here we are replacing the background image.

Using image already uploaded

AutoTheme creates it's own file storage area, if the image is already uploaded here then you can just select it and add it to your site.


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

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

Scroll down to your Header image area in the files tab:
header image choice
Click the "Choose a file.." button. This will open the file picker.


Choosing a file
  1. To upload a new file, click "Upload a file" and then Choose File.
  2. Select a file on your system to upload
  3. Click "Upload this file"
header image

Now that the image is loaded, you will see it in the left header area.
Image settings

  1. Images placed here will tile accross your site background.
  2. Images placed here will show up beneath the header image.
  3. This will show in the block headers for your site
header image settings 2
  1. Images placed here will show up behind block content
  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
  4. This will be the left site of your header image.
Updating images in the Moodle RL Master theme

  1. This will be the right side of your header image.
  2. This will put an image in the background of your footer
  3. This will put a image in your navigation bar.
  4. This sill add a background to your heading.
  5. This will create a favorites icon for your site.

Creating a favicon in RL Master for Moodle

Layout Settings

The layout tab lets you set a number of the overall settings of your theme.
Layout editing

  1. To access layout settings, click the Layout tab.
  2. Choose a fluid or fixed witdth layout. A fluid layout will expand or contract depending on the size of the viewers display. Fluid layouts are usually be best bet for working on multiple different client devices, as they will shrink to fit a small tablet or netbook screen, and expand to fit large resolution screens. However, this means that images and user interface elements move around to fit the screen size (in a 'fluid manner' so designers that require strict placement of images and UI elements may prefer to choose a fixed width layout.
  3. if a fluid width is chosen, you can choose whether the design expands to fill the entire web browswer page, or if it only expands to % of the page. If you have fixed width set in Layout Type, this setting will have no effect.
  4. If a fixed width is chosen, then you can enter it's value in pixels here (for instance 900px here will fix the page width at 900 pixels if you have Fixed width set in Layout Type. If you have a fluid width page, designers often choose a minimum width that the page cannot shrink below, this keeps UI elements from overlapping each other, etc. you can do this in Autotheme by choose a fluid width and then setting a minimum width here.
Example 1: Fluid width with the 80% width setting.
Fluid width example

When a fluid width is chosen with a less than 100% width, then AutoTheme prints a space around your theme.

Column settings on the Layout Tab:
The layout tab also lets you set how your columns are displayed.
Number of columns
  1. Standard Moodle sites have three columns. The "Number of Columns" setting lets you change this to show only two columns.
  2. You can set column 1 to be placed on the right side of the page, or the standard left side.
  3. You can set column 2 to be placed on the left side of the page, or the standard right side.
  4. You can set the column width for your right and left columns.
Setting the header height:

Below the column width is a setting for the header height.
default header hieght

By default your header images are set to 80px.

header height too small

If this is not tall enough for your header, not all of it will be displayed. To see the actual height of your header, you can inspect the file on your hard disk, for example in this case Windows tells us the file is 93pixels high.

header height

So we set the header height to 93pixels by entering 93px and save changes to set the header height correctly.

header height setting

Now the header image shows in full.

Header hieght set

Likewise, you can set your banner height if you are using a banner.


Setting up a Custom Menu

AutoTheme enables you to customize the Moodle 2 drop down menu, to control where it shows up and what the height is (in addition to the color settings we have already determined).

First, we'll have to add some links to the the custom menu before we can use it.

To add links, go to the the theme settings for your site.
Theme settings
At the theme settings, scroll down to the Custom Menu items:
Custom Menu Items

Here you can enter menu items that will be displayed in the top bar of you site. Enter the item name, then a 'pipe' character - | then the URL, as above. This will create a new tab item in the top bar.

If you want to have sub-items, that will automatically appear in a drop down below the top level item above, enter them as follows:

Sub-items

Add the items with the name of the item, a pipe, and a url as above, but type a dash (-) in front of their names.

sub-sub items

Follow the same pattern to create sub-sub items with two dashes.

second top level item

Add a second top level item by inputting it without a dash.

Now save changes can go back to the RL Master theme.
Setting the custom menu

By default the Custom Menu is not shown, now that you have added links to it, is a good time to show it - you can choose to show it on all pages or just on the front page.
  1. Set the custom menu to show on All pages, the Front page only, or on None.
  2. Set the height of the custom menu.
  3. Save changes
Now you can see the custom menu in place.

Custom menu display

In the Custom Tab documentation, we'll talk about how to further control/customize the look of the drop down menus.




Miscellaneous Settings

This section of AutoTheme enables you to change the login info link location, modify the corner rounding on the headers and blocks, set the heading height, spacing, highlighting, etc.

Change the settings here and save changes to see the results. For example, often the login info. link is hidden or hard to read against dark theme backgrounds.
Login info move

For example, at the default setting the login info link is hard to read against the dark background.

login info move

We can move it down so it is displayed over a lighter background by putting in 100px in the "Login info Top" field - this moves the link 100px down from the top. Save changes and we can see the link in the new location.

Other settings on this page work in the same way:

Miscellaneous settings screen 1

  1. As noted above, this moves the login info link up or down.
  2. This will change the header corners, higher numbers will lead to rounder corners.
  3. This will change the height of the block heading
    Block heading
  4. This will change the roundness of the block corners - higher numbers will result in rounder corners.
Misc settings screen 2

  1. This will set the roundness of the block corners- higher numbers will make the block corners more round.
  2. This will set the location of the block controls
  3. This will set the space between blocks (px works here as well as em)Block spacing
  4. This will print a line under the site title - but not when the there is a header image on the left side of the header. For example, if we enter "Enterprise Open Source" in the tagline then it will be printed beneath the site title if there is no leftside Header image as shown in the left side of the graphic below. If there is a header image on the left side, then the tagline and site title will be hidden.Tagline
  5. This will hide the "Topic Outline" title and bar in a course if it is set to "Hide".
    Hide or show topic
  6. This will change the Week Highlight from the full length week highlight to just the ends of the week.
    Highlight
Full highlighting highlights the entire week as shown above. The highlight color is set in the Colors tab.

Custom Tab



The custom tab lets you do all the things that you can't do via the forms in the other tabs.

The Custom Tab has 4 components we will cover below:
  1. Custom CSS entry - for inputting CSS code directly.
  2. Header HTML/script entry - for inputting analytics code, etc.
  3. Header HTML - here you can enter/input HTML for your header
  4. Footer HTML - here you can enter/input HTML for your footer.
Custom CSS:
The Custom CSS field in the Custom tab enables you to input CSS to format items that do not have controls in the system currently. For example below we've set CSS that expands the block header when editing is turned on.
Custom CSS
For example, depending on controls settings, the Block headings might conflict with the block Title when editing is turned on. So we can adjust this, by adding some CSS. This CSS only increases the block height when editing is turned on (which is the only time the editing icons are printed).

Without the CSS above:
With the CSS above
Controls witout taller block header
Controls higher

In another example, lets change the color of the highlight in the custom menu.

Menu example
A great tool for setting these colors is Google Chrome's Developer tools - which will tell you the current CSS being used to generate the blue color. To use Developer Tools to see the actual CSS for this color, right click (or Command-Click on the Mac), and select "Inspect Element". This will open up the developer tools window which will show the CSS being used to render your site.

In Google Chome's Developer Tools you can see the current color that is being used to color the menu highlight.
selecting color

In this case, we will put in the CSS tag and over ride the default blue color of the theme with an orange color.

Save changes are refresh your page, to see the new menu color.

Setting color
Tip: in some cases you may need to put in the CSS tag "!important" as shown above -this tells the browser to use your value even if some other value is over-riding it lower in the CSS cascade.

Head HTML:
Code placed in this text field will be rendered just after the closing </head> tag. This is a good place to put scripts you want to use, such as analytics scripts. In the example below, we have placed the tracking code from GoogleAnalytics.
Adding analytics code

Header HTML:
This is a place where you can put in a completely custom header.
Header

Footer HTML:
This is a place where you can put in a completely custom footer, or add content to the existing footer.

Custom footer

As always, Save changes before you leave the page.

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.


Using Internet Explorer Specific CSS

Despite great advances in W3C standards support, there are still some times when you may need to create IE specific CSS to handle CSS tags that Internet Explorer handles differently from Firefox, Safari, and Chrome. 

This can be accomplished by inserting IE specific CSS in your Custom tab.

Custom CSS for IE7

  1. For IE specific CSS, plut .ie in front of the tag in the Custom CSS box. 
  2. For version specific CSS, put .ie and then the version number. For example, this CSS will only affect IE7.
To view the IE version specific CSS, a simple way is to go to the site in IE9 - then look at the site in IE7 mode.
IE 7 mode\
  1. Open the site in IE 9 and click F12 -this opens the developer tool bar
  2. Select IE 7 from the browser mode dropdown.
The site will refresh and now we can see the IE 7 specific CSS:
IE 7 specific CSS
More practically we can see the border in the site menu - this border shows up in IE (all versions) but not in Chrome or Netscape. So we can hide the border in IE using IE specific code.
Finding the border CSS in IE

We can use the IE Developer tools to locate the CSS that is printing the border.

Setting the border to none

Then in the Custom tab we can set IE specific CSS that hides the border. Because we have started the command with simply .ie - this CSS will affect all Internet Explorer versions. Note that by specifying the #custommenu div tag, we are not removing the border in other places where the .yui3-menu-content tag would print a border. This is to be safe, in other areas the UI might get confusing if we remove the border. If we don't want a border any place on the site where the yui3-menu-content tag is shown, we can leave the #custommenu command off.


Using Google's Font API

Fonts provided by Google's Font API can be applied to Moodle site text using the RL Master theme.

1. Navigate to http://www.google.com/fonts and find the font you want to use.

2. Find the font you want to use: 

Browse Google Fonts






















3. Select the Quick Use link below in the button set for the font:
Google Font Quick Use URL















4. Select the styles and character sets you want available to your font set. The more styles you use the longer the font set will take to load. Latin should be enough for most English-language sites. If you have multiple languages, especially languages that do not use the standard Latin character set, you may want to add more. The styles and character sets provided by Google are a service of Google, and Remote-Learner does not provide service for them.
Google Font Select Settings

     


















5. Copy the <link> markup provided to your clipboard:
Copy link

















6. On your Moodle site, navigate to Site Administration > Appearance > Themes > RL Master > Custom tab. Paste the <link> markup into the Head HTML field.
RL Master Paste Link






















7. The Google Font page also provides a sample selector for applying the newly loaded font. 
Sample selector








8. On your Moodle site, navigate to Site Administration > Appearance > Themes > RL Master > Custom tab. Enter the selectors for the text you want to utilize the font. Apply the font-family indicated by the Google Fonts API sample. Selectors are easiest to determine by using your Web browser's developer tools and viewing the classes or ID applied to the element you want to style. You may wish to refer to a CSS reference in composing your selectors. http://www.w3schools.com/cssref/css_selectors.asp
Enter CSS
















9. Below are some selectors common to Moodle:
 /* Block headers */
.block .header h2 { /* your font-family here */ }

/* Breadcrumb trail */
.breadcrumb .navigation li { /* your font-family here */ }

/* Footer */
#page-footer { /* your font-family here */ }

/* Header info */
.headermenu { /* your font-family here */ }

/* Site title when there is no logo image */
#nologo a { /* your font-family here */ }

Sample Themes

Sample themes to use with the Remote-Learner RL Master theme tool. These theme templates can be used as the starting place for you or Remote-Learner to build you a custom theme. All templates included here work with all functions of the RL Master Theme Engine for Moodle.

Theme
Preview
Business Focus | Download
Moodle Business Focus Theme
Business Life | Download
Moodle Business Life Theme
Business | Download Moodle Business Theme
Real Estate | Download Moodle Real Estate Theme
Ribbon | Download Moodle Ribbon Theme
To load one of these theme templates on your Remote-Learner Moodle site, follow the instructions here: Importing and Exporting your theme.