How Do You Customize the Look of a Moodle Website?

Monday, July 2nd, 2012

Moodle logoA Moodle website can be customized is a couple of different ways. The look and feel of the Moodle website can be customized to look like the rest of your small business website using either a cascading style sheet that you can include in the header of your pages or by using a theme or a combination.

Customizing Moodle using CSS in Header

One way to customize your Moodle website to look like your small business website you can include a cascading Style sheet (CSS) in the header of your Moodle page. To do this you need to be an administrator. You can add additional HTML to every page in Settings > Site administration > Appearance > Additional HTML.

You must know the location of your CSS style sheet and include a preference to it in the first line of your heard. The syntax of this line will look similar to this:

<link rel=”stylesheet” href=”http://www.website.com/wp-content/themes/themename/style.css” type=”text/css” media=”screen” />

You may notice that I reference a style sheet that is from a theme in WordPress. I uses WordPress and Moodle on the same website.  Moodle and WordPRess provide different features. It is very difficult to create online educational material of the same quality as Moodle using WordPress. That is why I use both. My advice is to select the best tool for the job.

Now your Moodle website will have the same look for all your text. If you use a menu or navbar in your main website you will need to copy the code for that menu. The same is true for your header image. You will need to include a link to your header image. The code may look something like the following:

Image

<img src=”http://www.website.com/wp-content/uploads/logo_clear.png” alt=” Website name”>

Navbar

<div id=”navbar”><div><ul><li><a href=”http://www.website.com/“> Home</a></li></ul></div>

I found this code by right clicking on my main website home page and then selecting view page source. You need to have some idea of what HTML code you are looking for. Using a CSS to customize your Moodle website takes some skill in HTML in order to format your pages. This option should not be attempted by HTML beginners.

Using a Theme to Customize Moodle

custom chopperMany things can be customized. We all seem to want our cars, homes, motorcycles and websites to be unique. Themes are one way to customize Moodle websites.

An administrator can set a theme for the site in Settings > Site administration > Appearance > Themes > Theme selector. You can select any of the 16 or so themes listed. You will see a preview of the various themes. You have a choice of selecting each theme for use with modern browsers or older browsers.

Click on the button next to the theme you want to use for either modern or old browsers. In the next screen you have a description of the theme along with a preview of the theme on your website. If you like the way it looks press the continue button.

Each theme also allows you to customize certain features. The number of features and the particular features vary by theme. While you are in Settings > Site administration > Appearance > Themes > you can select the name of the theme you want to customize. This will bring up a list of the features you can customize.

Some themes allow you to specify a logo. This is the logo that you use for your main website. You must provide the whole path including the domain name such as:

http://www.yoursite.com/path/to/logo.png

With a little work and some experimentation you can modify the themes to look just like your main website. Using your CSS from you main website and using themes are the most powerful ways of customizing the look and feel of your Moodle website.

Introduction to Moodle

Wednesday, June 13th, 2012

moodle logoMoodle is an open source application that allows you to create online courses. It is free on most web hosting services and easy to install. Moodle can be installed in its own directory so that it can be linked to other applications on your domain such as WordPress or Joomla.

How is Moodle Organized?

The heart of each course contains activities and resources. There are about 20 different activities including forums, glossaries, wikis, assignments, lessons, quizzes and databases. You can use activities to build upon other activities. You can build a community of learners by using the various activities.

Resources are items such as files, folders, URLs pages and labels. These are used to provide the student with an organized course and other resources to help them learn more. For instance a label can be used to provide outline information on the main course page or in the topic or week main pages. A label can also be used to display text or images any place on the page.

A file resource can be used to provide a syllabus for your course. A URL resource can be used to provide other websites that have vital information for your students. You are limited by your imagination.

How can Moodle Help you?

Moodle is a toolbox that can be used by teachers to make use of the power of the internet. They can start out simple and then progress to more complex courses and communities.

A course in its simplest form may have a label or two, an outline or syllabus, a lesson or two, perhaps an assignment and a quiz. It can be as simple as you want. As you get used to Moodle you can create a glossary, add a forum and perhaps include a survey. You may also want to include links to other resources on the internet.

How do I move items after I have placed them?

Once you have created a few activities and resources you may want to move them or change the order they appear on the page. This is as easy as clicking and dragging.

moving a moodle resource

  • First turn editing on.
  • Then select the item you want to move by clicking and holding the cross to the right of the item you want to move.
  • While holding down the mouse button drag the item to the position you want it to move to. You will see a thin horizontal line appear between your items. This is where the moved item will appear when you release the mouse button.
  • Once you have the item where you want it, release the mouse button.

How to Use Labels to Separate and Organize

You can use labels to make titles to separate and organize your course. Your label should use one of the heading settings such as heading 2 or heading 3. The higher the number you choose the smaller the type size you will have.
moodle heading examples

Experiment with the different headings. You can see examples of the font size when you click on the arrow next to the word paragraph on the top of the text window.

%d bloggers like this: