Themes

How to add an image slider to Clean theme using CSS3

 
 
It's only an avatar...
How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I discovered that if I added a logo to Clean theme via the Clean custom setting page and added some CSS3 to animate it, it actually looks like a slider.

Here is what you need to do:

  1. Download and save the attached flower-sprite.jpg image to your desktop.
  2. Login to your Moodle 2.5 test site
  3. Select the Clean theme
  4. Click Clean theme's custom setting page from the links under Site Administration > Appearance > Themes in the side block
  5. Now Add or drag-n-drop the flower-sprite.jpg into the image loader.
  6. Next add the following CSS3 to the Custom CSS box provided in the Clean settings page:
    a.logo {
    width:100%;
    height:110px;
    position:relative;
    animation: imageSlider 5s infinite ease-in-out;
    }

    @keyframes imageSlider {
    from {background-position: 0 0;}
    to {background-position: -1024px 0;}
    }
  7. SAVE Settiings

That's it. smile

Enjoy!

cheers


 
Average of ratings:Useful (1)
Picture of Juan Manuel Vaca
Re: How to add an image slider to Clean theme using CSS3
 

It's nice. It works in Explorer and Firefox, however it doesn't work in Chrome.

Best Regards.

 
Average of ratings: -
It's only an avatar...
Re: How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You need to add -web-kit to make it work in Chrome.

 
Average of ratings: -
Gareth J Barnard
Re: How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Particularly helpful Moodlers

Nice one Mary, it would be cool if the YUI port of the Bootstrap JS version of Carousel http://jshirley.github.io/bootstrap/javascript.html#myCarousel could be placed in Bootstrap base and made to work smile

 
Average of ratings: -
It's only an avatar...
Re: How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Is the Carousel not working? It probably would be better. I have been reading about YUI, I did not realise it was a more robust framework, and better suited to large CMS sites like Moodle.

I have obviously been away from Uni too long and need a refresher...all this new technology is doing my head in.

I'd love to have a go converting jQuery to YUI as per the jsrosettastone method. Looks like my kind of thing. LOL

rosettastone! humph!

 
Average of ratings: -
Gareth J Barnard
Re: How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Particularly helpful Moodlers

Dear Mary,

I mean that the collapsing toggle is not working -> https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/yui/src/bootstrap/js/bootstrap.js#L21

The other link I have posted refers to the other Bootstrap jQuery based JS that has already been ported to YUI and could be placed in core.

Cheers,

Gareth

 
Average of ratings: -
It's only an avatar...
Re: How to add an image slider to Clean theme using CSS3
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

This is another similar idea the works on the same principle I discovered.

http://demosthenes.info/blog/495/Make-A-CSS3-Animated-Image-Slider

although this uses <img> tags in the page which are not cached in Moodle, so you end up downloading them to your PC everytime you click on the page.

 
Average of ratings: -
Not me
Re: How to add an image slider to Clean theme using CSS3
 

If anyone wanted to pay for one - this is also available as PHP code.  I use it in Joomla.

J.

 
Average of ratings: -
Not me
Re: How to add an image slider to Clean theme using CSS3
 

If anyone wanted to pay for one - this is also available as PHP code.  I use it in Joomla.

J.

 
Average of ratings: -