Replacing Moodle static logo with a hover (mouse-over) logo

Replacing Moodle static logo with a hover (mouse-over) logo

by Winston D'Souza -
Number of replies: 7

Hi,

I use Moodle 18.8 and need a bit of help in changing the Moodle static logo at the bottom of the frontpage to a personalised hover (mouse over) logo. Reading some of the previous contibutions to this, the best I managed to understand was to replace the pix/moodlelogo.gif in the /lib/weblib.php page with a personalised one. But that is a static replacement of the logo. However, I tried to include a hover gif or jpg file there and it did not work.

Can anyone help in offering me a solution to replacing this pix with an interactive hover gif/jpg what changes images when the mouse moves over the logo?

Many thanks.

Average of ratings: -
In reply to Winston D'Souza

Re: Replacing Moodle static logo with a hover (mouse-over) logo

by Chris Collman -
Picture of Documentation writers
Hi,
I believe this question would be best placed in the Theme Forum and get a faster answer. In my limited experience in fiddling with logos and stuff, I use my browser's view source to check on locations, then place the "new" logo file in place of the old. Assume you looked at Themes in MoodleDocs along with the pages and pages of CSS settings smile

Moodle.org design forum is about the design of www.moodle.org not a specific Moodle site.

Best Chris
Average of ratings: Useful (1)
In reply to Chris Collman

Re: Replacing Moodle static logo with a hover (mouse-over) logo

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Just moving this discussion to the themes forum as suggested...
Average of ratings: -
In reply to Winston D'Souza

Re: Replacing Moodle static logo with a hover (mouse-over) logo

by Jon Witts -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
You would need to create a new class in the theme's css file for your hover logo and include the new image in the pix folder of the theme. You could then adjust the footer file in the theme and associate your new css class with the footer logo.

The css would not be hard to code if you have knowledge of HTML and css.
Average of ratings: -
In reply to Winston D'Souza

Re: Replacing Moodle static logo with a hover (mouse-over) logo

by Frank Ralf -
What exactly do you want to achieve with the hover effect? Shall the logo change or be hidden when hovering? (IMHO a strange use of a logo, though.)

The CSS pseudo class :hover can be applied to any element, so I think you could achieve the desired effect with plain CSS. (Can't say anything about browser support for :hover, though.)

hth
Frank
Average of ratings: -
In reply to Frank Ralf

Re: Replacing Moodle static logo with a hover (mouse-over) logo

by Winston D'Souza -

Hi Frank,

Thanks for coming back.

The effect I'm trying to achieve is to change the image of the moodle logo at the bottom of the frontpage to another when the mouse is hovered over it. The new image (when the mouse hovers over) will be the one that represents my website - and will link to it, if the mouse is clicked. Presently it is static one. I could easily replace this static one with my own site image by changing the code a little in the /lib/weblib.php page (if you search for the words moodlelogo and change the code about it a little) to point to a new image.

Unfortunately, the hover over code used in HTML does not work if inserted into this location in the above mentioned file. Hence the query of how to introduce an interactive button (mouseover one) where the moodle logo normally sits.

I'm not a programming expert but have learnt much from trying things out and seeing how others do things. So any help is most welcome and deeply appreciated.

Average of ratings: -
In reply to Winston D'Souza

CSS Rollover Background Images

by Frank Ralf -
Have a look at these sites:

"CSS Image Rollovers on hover"
http://www.webmasterworld.com/forum83/4224.htm
(using two different images)

"CSS Rollover Background Images"
http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp
(using only one image with changing positions; probably not needed in your case)

That should give you enough clues to get it work.

Cheers,
Frank
Average of ratings: -