Header logo

Introduction

The Goal:

Your theme shows your logo in the page header.

The Task:

You place your logo in the file "header.html" in your theme folder and adjust the appropriate CSS properties.

The Way:

In the file "header.html" you see the following lines (or something similar):

01: <?php if ($home) {  
02: // This is what gets printed on the home page only  
03: ?>
04:   <div id="header-home">
05:     <div class="headermain"><?php echo $heading ?></div>
06:     <div class="headermenu"><?php echo $menu ?></div>
07:   </div>
08: <?php } else if ($heading) {  
09: // This is what gets printed on any other page with a heading 
10: ?>
11:   <div id="header">
12:     <div class="headermain"><?php echo $heading ?></div>
13:     <div class="headermenu"><?php echo $menu ?></div>
14:   </div>
15: <?php } ?>

The following code example shows a part from a header file with a logo. Please replace lines 5 and 12 above with lines 5 and 12 from the code example below.

01: <?php if ($home) {  
02: // This is what gets printed on the home page only  
03: ?>
04:   <div id="header-home">
05:     <div class="headermain"><img src="<?php echo 
        $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/big_logo.gif" width="300" 
        height="100" alt="mycompany" title="mycompany" id="logo" /></div>
06:     <div class="headermenu"><?php echo $menu ?></div>
07:   </div>
08: <?php } else if ($heading) {  
09: // This is what gets printed on any other page with a heading 
10: ?>
11:   <div id="header">
12:     <div class="headermain"><img src="<?php echo
        $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/small_logo.gif" width="210" 
        height="70" alt="mycompany" title="mycompany" id="logo" /></div>
13:     <div class="headermenu"><?php echo $menu ?></div>
14:   </div>
15: <?php } ?>

In Moodle you can use a special header for the start = home page. You can for example make the header for your start page higher and place a bigger logo on it.

The logo position in the header is defined in the CSS file "styles_layout.css". Please change the values for the CLASS ".headermain" and eventually for the IDs "#header" and "#header-home" if neaded. You find the definitions in the section "header" of the CSS file.

A tip for a fast jump to the header section: Select and copy the word "header" in the section list at the beginning of the file. Then call find in your program and paste "header" into the search dialog. After you click "find" in your dialog your program will find the start of the header section.

--Urs Hunkler 4 November 2005 08:47 (WST)

---

Back to Theme Scrapbook