Adding clickable logo in theme based on Fusion

Picture of Jean-Luc Delghust
Adding clickable logo in theme based on Fusion


I have been working on a theme that uses fusion (which I love), base and canvas as parents. I'm not a pro of CSS, but managed to get something done and decided to share it (as i found much useful info in the forums myself), just in case- and also ask a CSS pro who'd happen to read this if my solution is OK; I attached the relevant files in a zip-archive (can't share the whole theme right now).

I wanted to add a clickable logo top left of my theme, that would bring users back to the home page of our Moodle install, but no matter where I placed it, it moved other things around. In the end, I added a clickable logo with absolute position on a hidden link.

I based it all on Fusion for the layout: I first made changes in the general.php and frontpage.php (removing tagline, we don't use it, and moving the menus to the same height as login info) and added a div with a link with specific id in those files (I attached them in the zip file - there's a comment at the end so you can find the line easily) inside the page-header-wrapper div:

<div id="main-logodiv"><a href="<?php echo $CFG->wwwroot; ?>" title="<?php echo $GLOBALS['SITE']->fullname ?>" id="main-logo"><?php echo $GLOBALS['SITE']->fullname ?></a></div>  

Then in my core.css, I added the following, make sure you edit the figures so that you position your logo exactly where you want, and that the sizes correspond to your logo pic, or it won't display properly; you can of course create different styles if your front page and other pages need a different logo..

#main-logodiv {
  height:75px;                  /* match width & height with #main-logo & main logo dimensions */
  z-index: 100;

#main-logo {
    background-image: url([[pix:theme|logo]]);
    height:75px;               /*make sure width & height match with the logo pic */

Hope this can be useful for sb else; any comments welcome!


It's only an avatar...
Re: Adding clickable logo in theme based on Fusion
Core developersDocumentation writersParticularly helpful MoodlersPlugin developersTesters

Thanks for sharing this Jean-Luc. Reading your comment, and method of achiving this, looks OK. There is only one thing I see that can be changed and that is this line...

<?php echo $GLOBALS['SITE']->fullname ?>

You can use this instead...

<?php echo $SITE->fullname ?>

Thanks for the ZIP file, I'll test it all out later.



Average of ratings: Useful (1)
Picture of Jean-Luc Delghust
Re: Adding clickable logo in theme based on Fusion

Thanks! I'll make the change.

Average of ratings: -
Picture of pinguas pinguim
Re: Adding clickable logo in theme based on Fusion

Hello friends,

I am trying to insert a logo on fusion theme, I have read your post, by I do not known why there is main-logo and main-logodiv, why do I need on css both.

Can you give me the step by step to insert a logo on fusion?

Thanks anyway

Average of ratings: -
Re: Adding clickable logo in theme based on Fusion
Moodle Course Creator Certificate holdersPlugin developers

Hello Pinguas,

If you want to just add a logo without making it a clickable link, add

background-image: url([[pix:theme|imagename]]);

To any existing div in the theme, making sure to put your image into the pix folder.

You can then add other elements to position your image like



So for example, in my CSS I added

#page-site-index #region-header {
    background-positionleft top;
This added a banner background image to the region-header of the fusion theme. I had to play around with the margins a little in surrounding divs.
Average of ratings: -