Themes

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

Hi

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 {
  position:absolute;
  top:58px;                     
  left:67px;
  height:75px;                  /* match width & height with #main-logo & main logo dimensions */
  width:135px;
  z-index: 100;
}

#main-logo {
    background-image: url([[pix:theme|logo]]);
    display:block;
    height:75px;               /*make sure width & height match with the logo pic */
    width:135px;
    overflow:hidden;
    text-indent:100%;
    white-space:nowrap;    
}  

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

JL

 
Average of ratings: -
It's only an avatar...
Re: Adding clickable logo in theme based on Fusion
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

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.

Cheers

Mary

 
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: -
Me
Re: Adding clickable logo in theme based on Fusion
Group Moodle Course Creator Certificate holders

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

background-position

background-repeat

So for example, in my CSS I added

#page-site-index #region-header {
    background-imageurl("/moodle24/theme/image.php?theme=fusion&component=theme&image=banner");
    background-positionleft top;
    background-repeatno-repeat;
}
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: -