Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Header logo: Difference between revisions

From MoodleDocs
No edit summary
m (Text replacement - "</code>" to "</syntaxhighlight>")
Line 23: Line 23:
   </div>
   </div>
<?php } ?>
<?php } ?>
</code>
</syntaxhighlight>


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. In particular, pay close attention to the following statement:
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. In particular, pay close attention to the following statement:
Line 30: Line 30:
<code php>
<code php>
<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg
</code>  
</syntaxhighlight>  


Some theme designers have mistakenly used:
Some theme designers have mistakenly used:
Line 63: Line 63:
</div>
</div>
<?php } ?>
<?php } ?>
</code>
</syntaxhighlight>


Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.
Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.


The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</code> and eventually for the IDs <code>#header</code> and <code>#header-home</code> if needed. You can find the definitions in the section header of the CSS file.  
The logo position in the page header is defined in the CSS file ''styles_layout.css''. Please change the values for the CLASS <code>.headermain</syntaxhighlight> and eventually for the IDs <code>#header</syntaxhighlight> and <code>#header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.  


'''A tip for a fast jump to the header section of the CSS file:''' 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 dialogue. After you click "find" in your dialogue your program will find the start of the header section.
'''A tip for a fast jump to the header section of the CSS file:''' 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 dialogue. After you click "find" in your dialogue your program will find the start of the header section.
Line 78: Line 78:
     height="70" alt="mycompany" title="mycompany" id="logo" />
     height="70" alt="mycompany" title="mycompany" id="logo" />
</div>
</div>
</code>
</syntaxhighlight>


Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590
Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590

Revision as of 13:02, 14 July 2021

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

This article refers to Moodle 1.9 only:

To show your logo in the page header, the file header.html in your theme folder requires editing.

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

<?php if ($home) { // This is what gets printed on the home page only ?>

<?php echo $heading ?>
<?php echo $menu ?>

<?php } else if ($heading) { // This is what gets printed on any other page with a heading ?>

<?php } ?> </syntaxhighlight>

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. In particular, pay close attention to the following statement:

RIGHT

<?php echo $CFG->httpswwwroot.'/theme/'.current_theme() ?>/image.jpg </syntaxhighlight>

Some theme designers have mistakenly used:

WRONG
<?php echo "$CFG->wwwroot/theme/$CFG->theme/image.jpg" ?> 


Using $CFG->theme gets the path for the site's default theme rather than the currently selected one. As a result, logos do not appear because they are not in the specified directory. $CFG->wwwroot images throw unsecure warning in IE when using loginhttps.

<?php if ($home) { // This is what gets printed on the home page only ?>

<img src="<?php echo
      $CFG->themewww.'/'.current_theme() ?>/pix/big_logo.gif" width="300" 
       height="100" alt="mycompany" title="mycompany" id="logo" />
<?php echo $menu ?>

<?php } else if ($heading) { // This is what gets printed on any other page with a heading ?>

<?php } ?> </syntaxhighlight>

Moodle offers one header for all pages and a different header for the front/home page. You may, for example, make the header for your front page higher and place a bigger logo on it.

The logo position in the page header is defined in the CSS file styles_layout.css. Please change the values for the CLASS .headermain</syntaxhighlight> and eventually for the IDs #header</syntaxhighlight> and #header-home</syntaxhighlight> if needed. You can find the definitions in the section header of the CSS file.

A tip for a fast jump to the header section of the CSS file: 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 dialogue. After you click "find" in your dialogue your program will find the start of the header section.

Use an image from your Course files

 <img src="<?php if (file_exists("$CFG->dataroot/$COURSE->id/header.png")) 
   { echo "$CFG->httpswwwroot/file.php/$COURSE->id/header.png"; } ?>" width="210" 
   height="70" alt="mycompany" title="mycompany" id="logo" />

</syntaxhighlight>

Or even have your own custom CSS override the theme's CSS rules, When it is placed inside the Course's files folder. see MDL-20590