jump to navigation

Customizing Moodle : Embedding an image on the Front-Page and Removing the Logo September 11, 2011

Posted by Tournas Dimitrios in Moodle.

Probably you may want to customize the “look and feel” of your Moodle installation , like embedding an  image on the front page (on top of the content box )  and removing the “Moodle-logo’s ” from Header and footer .   Fortunately for us , Moodle is highly customizable ,  only a few key-strokes can change the look . Even  installing/enabling a new theme may need  some minor changes , for example , the default installation of Moodle 1.9 has the “Custom_Corners” theme and by default configured as an three-column layout .

This article will show the process to configure the “Custom_Corners” theme : embedding an image on the from page and removing the footer-logo . The image below shows the final result :

Embedding an image on front page of Moodle
One , two or three columns layout : 

The sidebar blocks connect students and teachers to special information and functionality , like a calendar, announcements, the gradebook, and links to other courses .By default Moodle 1.9 has 18-different blocks , the official repository provides  even more for download . These block can be enabled /disabled from the administration panel . Login as administration user and click the “Turn Editing on” button , this will reveal a drop-down menu “Blocks” . Enabling a block is simple as : selecting an option from the drop-down menu  . In “Editing Mode” all block have small icons to customize it’s position (arrow-icons) or even removing the block from the side-bar ( “X” icon) . Positioning all block on one side-bar (by clicking on the arrow icons) will transform the three column layout to a two-column and removing all blocks from the sidebars (by clicking the “X” icon) will transform the theme into an single column layout .

Embedding an image on the front page :

Login as administrator and click on “Turn Editing on” button . On top of the Content-Block is an hand-icon , clicking this icon reveals the HTML-editor . This editor has two modes of operation (toggling between these two modes is done by clicking the “<>” icon :

  • WYSIWIG-mode :  it’s functionality is similar to any word-process application (formatting text is done by clicking on icons . Click on the “image-icon” and upload an image
  • Text-mode : formatting and layout of text is done by hard-coding HTML -tags into the editor
    // 1/header_3.jpg : Folder "1" in moodledata folder
    <img width="650" height="150" title="Some Text" align="middle" alt="Some Text" src="http://localhost/moodle1.9/file.php/1/header_3.jpg" border="0" hspace="0" complete="true"  /> 

Hiding the footer-logo :

Firebug is an excellent Firefox plugin to analyze the DOM of any web-page . With firebug we have found that the footer-logo has an CSS class-name of ” sitelink” . A  “display : none ” CSS-directive  can hide this DOM-element . Open ” Moodle-installation-dir/theme/standard/styles_layout.css” file , locate the ” .sitelink” class-name (line-796)  and add the “display : none ” directive .

.sitelink {

Read also :


1. John Holland - August 15, 2012

Moodle is highly customizable.it’s good to Setting your image theme in front and backend and also add footer logo.

really,it’s amazing..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s