Print bookPrint book

Moodle 2.3 Theme Engine

Documentation for Remote-Learner Moodle 2.3 theme engine.

Site: Remote-Learner.net
Course: Remote-Learner.net
Book: Moodle 2.3 Theme Engine
Printed by:
Date: Sunday, 25 June 2017, 4:47 AM

Remote-Learner's Moodle 2.3 Theme Engine

The Remote-Learner Moodle 2.3 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:

Colors tab

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

Entering raw CSS in the Remote-Learner AutoTheme Engine:

RL Master Custom tab

However, for in-putting graphics, header and footer code, setting block and module colors, etc. the RL AutoTheme Engine enables you to 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:

Images tab header logo section

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:
Theme selector link

Go to the Settings block > Site Administration > Appearance > Themes > Theme selector.

Change theme button

Choose the RL Master theme from the resulting list.

Image of RL Master theme

*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 the Settings block > Site Administration > Plugins > Plugins overview.

Plugins overview link

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.

RL Master theme version number


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. Go to the Settings block > Site Administration > Appearance > Themes > RL Master.

RL Master theme link

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.

RL Master 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. Use the "Add" link or drag and drop files into the files area to add files to import.
  4. These are controls for backing up your theme, and for importing a backup theme. This is described in more detail in subsequent pages of this documentation.
  5. 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.

RL Master Controls tab

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. In the RL Master Controls tab use drag and drop to upload a file or select the "Add.." link to open the file picker window and select a file for upload. Using drag and drop to upload a file takes the least amount of steps but for this example we will use the "Add..." link.
  2. RL Master controls tab
  3. Selecting the "Add..." link opens the File Picker window. I've selected the Upload a file link from the menu on the left side of the File Picker window. Then I select the "Browse" button to select a file from my desktop.
    File Picker upload a file link
  4. I select a file from my desktop.
    Choosing a file from desktop
  5. Then select the Upload this file button.
    Upload this file button
  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.
    RL Master Controls tab

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.
RL Master Colors tab
  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).
Once we save our changes, the "Sample" tab updates with the new color settings.

RL Master Colors tab

The borders of blocks show the new color as well.

Border color of a block

The next example is changing the Block Color background to #E1E0DD.

RL Master Colors tab

Once the changes are saved the new Block Color background is displayed.

New block color background


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.

Layout Settings

The layout tab lets you set a number of the overall settings of your theme.
Layout tab
  1. To access layout settings, click the Layout tab.
  2. Choose a fluid or fixed width layout. A fluid layout will expand or contract depending on the size of the viewers display. Fluid layouts are usually the 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 browser 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.
Layout tab 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.
Layout tab column settings
  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 logo height. This controls the height of the header logo.
Layout tab logo height setting

By default the logo height is set to 109px. If this is not tall enough for your image, not all of it will be displayed. To see the actual height of your image, you can inspect the file on your hard disk. If the image is taller than 109 pixels, change the logo height setting to at least the height of the image.

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 in addition to the color settings that we will determine later on this page.

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 link

At the theme settings, scroll down to the Custom Menu items:
Theme settings screen custom menu items section

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:

Theme settings screen custom menu items section

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.

Theme settings screen custom menu items section

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

Theme settings screen custom menu items section

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

Now save changes and go back to the RL Master theme.

Colors tab custom menu settings

On the Colors tab, there are 3 custom menu sections:
  1. Custom Menu: The background color changes the background of the custom menu, the foreground color changes the color of the text in the custom menu.
  2. Custom Menu Border Color: The foreground color changes the border color of the custom menu.
  3. Custom Menu Hover Color: The background color changes the color of the custom menu item that is being hovered over, the foreground color changes the color of text in the custom menu item that is being hovered over.

Images tab custom menu background section

To set a background image for the custom menu go to the Images tab > Custom Menu Background section. The custom menu background image will overwrite the custom menu background color for the top menu. Sub-items will still have the custom menu background color.

For example, in the following image the custom menu background color is changed to yellow, but there is a custom menu background image that overwrites the yellow on the top menu.

Custom menu display

By default the Custom Menu is shown on all pages. To edit the custom menu display settings go to the Miscellaneous tab. Set the custom menu to show on All pages, the Front page only, or on none. Save changes at the bottom of the page when finished.

RL Master Miscellaneous tab

Now we see how the custom menu works.

Custom menu
  1. Hovering over the top level item Moodle community displays the sub-items.
  2. Hovering over the sub-item Moodle development displays additional sub-items.
  3. Select any of the items to link to the item's URL.

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.

Go to the Miscellaneous tab to get started. Edit the settings here and save changes to see the results.

RL Master Miscellaneous tab
  1. Custom Menu: This setting controls where the custom menu is displayed.
  2. Login Info Top: This moves the login info up and down. 0px will dislpay the login info at the top while adding 100px will move the login info down 100px from the top.
  3. Header Corners: This will change the header corners, higher numbers will lead to rounder corners.
  4. Heading Height: This will change the height of the block heading
    Block heading
  5. Block Corners: This will change the roundness of the block corners - higher numbers will result in rounder corners.
RL Master Miscellaneous tab
  1. Block Control Position: Set the block control position to the top, middle, or bottom of the block heading.
  2. Block Spacing: This will set the space between blocks (px works here as well as em)Block spacing
  3. Tagline: This will print a line under the site title - but not when the there is a logo header image uploaded. 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
  4. Show Heading Bar: This will hide the "Topic Outline" title and bar in a course if it is set to "Hide".
    Hide or show topic
  5. Week Highlight: 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. Head 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


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.

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.

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, put .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.