How Do You Customize the Look of a Moodle Website?


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.

Leave a Reply

%d bloggers like this: