Customizing Moodle
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
You can brand your learning site with your own colors, fonts, styles, logo, and text messages.
Contents |
[edit] Themes Customize Colors and Styles
In Moodle, the theme determines the colors and font styles that your site uses. To choose a theme, select Site Administration | Appearance | Themes | Theme selector. The choices you see there are standard themes that come with Moodle. On your server, you will find the files for these themes in /theme. Compare the theme names available in the Themes page with the directories you see on the server:
Instead of modifying a standard theme, duplicate the theme that is closest to what you want, and modify the duplicate. Also, check http://moodle.org/ for other themes that you can use. For example, the theme called Kubrick gives Moodle a look similar to the default installation of the WordPress blogging software. With this theme, your site is hardly recognizable as a Moodle site.
The following sections show you how to achieve some of these customizations.
[edit] Custom Logo
Not every theme uses a logo. For example, the theme Standard does not, but standardlogo does. The easiest way to include a customized logo in your Moodle site is to copy a theme that uses a logo, and then replace that theme's logo.jpg file with your own.
[edit] Custom Header and Footer
Inside the Theme folder, you will find the files header.html and footer.html. These are displayed as the header and footer on each page. Note that the Home Page (Front Page) of your site uses a header different from that in the inside pages. If you want to use the same header on the inside pages and the Front Page, you'll need to customize both headers.life experience phd degree
[edit] Customizing the Header
The lines that you need to customize in header.html are copied below. I have added the line numbers. You will not find these in the code, and do not need to add them. I will refer to the line numbers as we discuss how to customize the code:
1.<code> if ($home) { // home page ?></code>
2.<code> <div id="header-home"></code>
3.<code> <h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php</code>
<code> echo $CFG->wwwroot.'/theme/'.current_theme()</code>
<code> ?>/images/logo.jpg" width="457" height="64" /></h1></code>
4.<code> <div class="headermenu"><?php echo $menu ?></div></code>
5.<code> </div></code>
6.<code> <?php } else if ($heading) {//This is what gets printed on any other page with a heading.</code>
7.<code> ?></code>
8.<code> <div id="header-home"></code>
9.<code> <h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php</code>
<code> echo $CFG->wwwroot.'/theme/'.current_theme()</code>
<code> ?>/images/logo.jpg" width="457" height="64" /></h1>.</code>
10.<code> <div class="headermenu"><?php echo $menu ?></div>.</code>
11.<code> </div></code>
Recall that I said that the header for the site's front page is different from the header for all other pages. Line 1 tests whether you are on the front page. If you are, then lines 2 through 5 create the header. If you are not on the site's front page, lines 6 through 11 create the header. The only real difference between these two headers is in line 10, which creates the breadcrumb menu at the top of each page:
Notice that lines 3 and 9 specify the width and height of the logo:
<h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/images
/logo.jpg" width="457" height="64" />
</h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>
<div id="header-home">
<h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>
/images/logo.jpg" width="457" height="64" />
</h1>
If you use a different graphic for your logo, you'll want to change these values to fit the new graphic.
If you want to add some text to the header, place it between the <h1> tags:
<h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/images
/logo.jpg" width="457" height="64" />add your text here
</h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>
<div id="header-home">
<h1 class="headermain"><img alt="[ REPLACE ME ]" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>
/images/logo.jpg" width="457" height="64" />add your text here
</h1>
Perhaps the most useful technique for customizing your site's header is to make one change at a time, save it, and then preview that one change in your browser. Repeat this till you get the effect that you want.life experience doctorate degree
[edit] Customizing the Footer
The footer.html file is even simpler and easier to customize as compared to the header. There are two lines that you will see at the bottom of each page in your site. On the Front Page of your site, you will see the following:
Note that the footer displays your login name, and a link to the official Moodle.org site.
On every other page of your site, you will see the following:
Note that you still see your login name, but instead of a link to the Moodle.org site, you see a link to the Home Page of your site. These two lines are created by the following lines of code in footer.html:
<?php echo $loggedinas ?> <?php echo $homelink ?>
You can edit, delete, or add to this, as you wish. However, remember that if you remove the menu from the header <?php echo $menu ?>, and also remove <?php echo $loggedinas ?> from the footer, the user will not get any login confirmation message. You should keep at least one of these on the page. You can also insert HTML code before, between, or after these two lines. That content will show up on every page in your site.
[edit] Custom Icons
Icons for your Moodle site are in the directory /moodle/pix. Subdirectories inside /pix organize the icons based on their purpose:
/moodle/pix/c holds course icons. For example, it holds the icons that appear before course names, event names, and groups. /moodle/pix/f mostly holds icons for the various file formats. For example, it holds icons for text files, videos, and Excel files. /moodle/pix/g holds the pictures that teachers upload to their personal profiles. The default Moodle installation has two files in this directory: a large and a small happy face. /moodle/pix/i holds Moodle's navigation and function icons. For example, there are icons for the edit function, to hide and show items, and to show the news. /moodle/pix/m holds icons for currency. /moodle/pix/s holds icons for smilies—angry, sad, wink, and so on /moodle/pix/t holds icons that appear in a teacher's functions: backup, delete, hide, and restore. /moodle/pix/u holds pictures that students upload to their personal profiles. The default Moodle installation has two files in this directory—a large and a small happy face.
You can replace any of these icons with your own. However, if you change the size of an icon, you should preview the results on several pages to ensure that the icon still fits in the space given by Moodle.
[edit] Custom Strings
In this and the earlier chapters, you saw that you can edit strings from the page, Site Administration | Language | Language Editing.
If you're using an older version of Moodle, editing strings in the /lang/en/moodle.php file enables you to customize the messages, prompts, and box names that Moodle displays. If you look in the folder /lang/en, you will see many other files in that directory. These files contain strings for Moodle's additional modules. For example, /lang/en/forum.php contains strings for forums, such as $string['deleteddiscussion'] = 'The discussion topic has been deleted.'. If you want to customize a string, and you're unsure where to find it, use your HTML editor (or even your word-processor) to search the files in the language directory for that string.
[edit] Additional References
- For instructions on installing Moodle, click here
- For instructions on Theming Moodle, click here
- For Customizing Moodle Front Page, click here
- Step-by-step detailed instructions on Installing Moodle in Different Environments,click here
- For instructions on Updating Moodle,click here
- For instructions on Configuring Moodle 1.9 for multimedia,click here
- Cheap web design
- MICR Toner
- MICR Canada
- life experience degree program
- criminology degree
- criminal law degree
- make money online
[edit] Source
The source of this content is Chapter 8: Welcoming Your Students of Moodle 1.9 E-Learning Course Development by William Rice (Packt Publishing, 2008).
