Full width homepage hero image/slider like moodle.org?

Full width homepage hero image/slider like moodle.org?

by Paul Lindgreen -
Number of replies: 5

I've looked at themes More, Clean and Essential but do not know how to make a full width hero image/slider  appear on the homepage like moodle.org. Its a pretty common and popular design these days.

I see moodle.org uses something called spiffySlides (http://andrewnicols.github.io/moodle/docs/yui/3.13.0/docs/paginator/slideshow.html), is this a moodle theme using spiffySlides or a custom non-moodle page? Any other suggestions on easily integrating a full page width hero image on a template like Essential?

Thanks,

Paul L

Average of ratings: -
In reply to Paul Lindgreen

Re: Full width homepage hero image/slider like moodle.org?

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Adaptable has a setting to display the slideshow in full width or normal width.

Average of ratings: -
In reply to Paul Lindgreen

Re: Full width homepage hero image/slider like moodle.org?

by Mary Evans -

You need to  remove the padding on the container-fluid which is set to 20px left & right. Then remove any other padding from the .hero-unit CSS too.

Sorry for the spelling, which I have just corrected. The typos are the fault of my iPad but also the fact I got called away to an emergency. So I am back now to fix the errors.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Full width homepage hero image/slider like moodle.org?

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Mary, If you change the 'container-fluid' padding then will break the whole layout.

The trick used in Adaptable is remove the 'container' class from the slideshow region.


Average of ratings: -
In reply to Paul Lindgreen

Re: Full width homepage hero image/slider like moodle.org?

by Mary Evans -

Further to my last comment.

This is a link to the Bootstrap 2.3.2 Carousel

If you look at this website which I set up using that same code you will see the Carousel works OK and is full width.

Using the Firefox browser and the Add-On called Firebug, you can see that the container is a <div class="container"> and not <div class="container-fluid"> like it is in the Clean and More themes.

So what you need to do it really add a new container just above the <div id="page" class="container-fluid"> in the the columns3.php layout file in Clean theme for More theme to work.

The change in the layout would look like this...

</header>
<div id="page-top" class="container"></div>
<div id="page" class="container-fluid">

Adding the Carousel HTML, from the bootstrap link above, inside that container would give you the look you want.

Average of ratings: -