Hi everyone,
I have installed Moodle on my laptop for demo purposes and I would like to change the banner from the standard text line to a picture.
I am using Moodle version 1.7
How do I go about doing this? Thank you.
I think that chameleon is the only one you can alter to change colors and the layout. If you just want to add a logo, there are several themes that allow this. Global15 and ca_moodle allow logo change.
Eric
It is possible to change header in ALL THEMES. Open with notepad header.html from your theme folder and find tags if ($home) {...} and place there a code like this:
... if ($home) { // This is what gets printed on the home page only
?>
<div id="header-home" class="clearfix">
<h1 class="headermain"><img src='<?php echo "$CFG->wwwroot/theme/" ?>nameofyourtheme/mainLogo.gif' id="mainLogo" alt="<?php echo $heading ?>" /></h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<?php } ...
where "nameofyourtheme" is of course the name of your theme and and you must have an image "mainLogo.gif" in that theme folder.
Thanks for the help!
I had to add in some extra coding such as ""$CFG->wwwroot/theme..." etc.
I put the logo file in the folder where the header.html file is.
My Moodle installation is currently on my laptop - http://localhost
This is my code and when I refresh my front page nothing loads. Could you check my codes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<?php echo $direction ?>>
<head>
<?php echo $meta ?>
<meta name="keywords" content="moodle, <?php echo $title ?> " />
<title><?php echo $title ?></title>
<link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
<?php include('ui/chameleon.php'); ?>
<?php include("$CFG->javascript"); ?>
</head>
<body<?php
echo " $bodytags";
if ($focus) {
echo " Xonload=\"setfocus()\"";
};
?>>
<div id="page">
<?php if ($home) { // This is what gets printed on the home page only
?>
<div id="header-home" class="clearfix">
<h1 class="headermain"><img src='<?php echo $CFG->wwwroot/theme/"?>chameleon/mainlogo.gif' id="mainlogo" alt="<?php echo $heading ?>"/></h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<div class="navbar clearfix">
</div>
<?php } else { // This is what gets printed on any other page with a heading
?>
<div id="header" class="clearfix">
<h1 class="headermain"><?php echo $heading ?></h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<div class="navbar clearfix">
<?php if ($navigation) { // This is the navigation table with breadcrumbs
?>
<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
<div class="navbutton"><?php echo $button; ?></div>
<?php } ?>
</div>
<?php } ?>
<!-- END OF HEADER -->
<div id="content">
I had to add in some extra coding such as ""$CFG->wwwroot/theme..." etc.
I put the logo file in the folder where the header.html file is.
My Moodle installation is currently on my laptop - http://localhost
This is my code and when I refresh my front page nothing loads. Could you check my codes?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html<?php echo $direction ?>>
<head>
<?php echo $meta ?>
<meta name="keywords" content="moodle, <?php echo $title ?> " />
<title><?php echo $title ?></title>
<link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
<?php include('ui/chameleon.php'); ?>
<?php include("$CFG->javascript"); ?>
</head>
<body<?php
echo " $bodytags";
if ($focus) {
echo " Xonload=\"setfocus()\"";
};
?>>
<div id="page">
<?php if ($home) { // This is what gets printed on the home page only
?>
<div id="header-home" class="clearfix">
<h1 class="headermain"><img src='<?php echo $CFG->wwwroot/theme/"?>chameleon/mainlogo.gif' id="mainlogo" alt="<?php echo $heading ?>"/></h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<div class="navbar clearfix">
</div>
<?php } else { // This is what gets printed on any other page with a heading
?>
<div id="header" class="clearfix">
<h1 class="headermain"><?php echo $heading ?></h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<div class="navbar clearfix">
<?php if ($navigation) { // This is the navigation table with breadcrumbs
?>
<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
<div class="navbutton"><?php echo $button; ?></div>
<?php } ?>
</div>
<?php } ?>
<!-- END OF HEADER -->
<div id="content">
Moodle changes some code so I could not add the correct code directly. I attached it as a zip file. There were 3 little signs that I replaced and I added if ($heading) after else. After front page only heading will be shown. If you have files on pages which could be https protected you could also see this link: http://docs.moodle.org/en/Development:Theme_directory_guide
Brilliant, worked like a charm! Thank you heaps
Sorry but another question being a newbie at this:
How do I make the banner show up on all the pages? Do I go into CSS or...? Cheers!
Sorry but another question being a newbie at this:
How do I make the banner show up on all the pages? Do I go into CSS or...? Cheers!
Find that else if ($heading) and insert something like
<img src='<?php echo "$CFG->wwwroot/theme/" ?>chameleon/contentlogo.gif' id="contentLogo" alt="<?php echo $heading ?>" />
instead of <?php echo $heading ?>
You must again have this (different) logo "contentlogo.gif" in your theme folder. Of course you may also use one logo in all pages and make header.html a little simpler without those if home - else... tags
Hi Mauno,
As I am a newbie and not all that knowledgeable in the technical area, could you attach a file like you did previously?
I would like to have the same banner header on all pages throughout the site. Could you advise? Thank you heaps for sharing your expertise.
As I am a newbie and not all that knowledgeable in the technical area, could you attach a file like you did previously?
I would like to have the same banner header on all pages throughout the site. Could you advise? Thank you heaps for sharing your expertise.
OK. here you have two versions. In header.html buttons are inside navbar and in header1.html buttons are at the same place as lang menu (rename it to header.html if you prefer that version).
Mauno
You are a genius! Thanks for that, I will try it out. Really appreciate your help.
Hi Mauno,
My name is peter hwuang. I am trying to make my moodle site like my own and I have added a banner to my site. But the banner size does not match the moodle page width. I want it to be shown to full width as that of moodle original page no matter what browser the user may be using. I wonder if you can help me with this. My intention is to make this banner to fit the full header (both width and height)with login prompt within the banner. My web is :www.compulearn.com.au thanks for your attention and help in advance!
Cheers
Peter Hwuang
Hi Peter,
Have a look at http://moodle.org/mod/forum/discuss.php?d=128599 for some pointers.
CSS FAQ and Themes FAQ are also good starting points for learning more about CSS and theming.
hth
Frank
Have a look at http://moodle.org/mod/forum/discuss.php?d=128599 for some pointers.
CSS FAQ and Themes FAQ are also good starting points for learning more about CSS and theming.
hth
Frank