How to add an image slider to Clean theme using CSS3

How to add an image slider to Clean theme using CSS3

by Mary Evans -
Number of replies: 8
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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

Attachment flower-sprite.jpg
Average of ratings: Useful (1)
In reply to Mary Evans

Re: How to add an image slider to Clean theme using CSS3

by Juan Manuel Vaca -

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

Best Regards.

In reply to Juan Manuel Vaca

Re: How to add an image slider to Clean theme using CSS3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

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

In reply to Mary Evans

Re: How to add an image slider to Clean theme using CSS3

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

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

In reply to Gareth J Barnard

Re: How to add an image slider to Clean theme using CSS3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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!

In reply to Mary Evans

Re: How to add an image slider to Clean theme using CSS3

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

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

In reply to Gareth J Barnard

Re: How to add an image slider to Clean theme using CSS3

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of 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.

In reply to Mary Evans

Re: How to add an image slider to Clean theme using CSS3

by James Cracknell -

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

J.

In reply to Mary Evans

Re: How to add an image slider to Clean theme using CSS3

by James Cracknell -

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

J.