Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Ross Lovell -
Number of replies: 25

I'm trying to add a Bootstrap carousel to the Boost theme in Moodle 3.2.1 (Build: 20170109).

After searching the forum I came across the a post about Adding jQuery Slider to Moodle 2.9 Front Page. Following the instructions I managed to get the slideshow working. Unfortunately the User and Edit menus no longer appear when I click on their icons.

I found that if I removed the code I added to config.php the menu started working again, but this stopped the carousel from working.

 $THEME->javascripts_footer = array('yourthemename');

If anyone has any advice or suggestions it would be much appreciated.

Attachment menus.png
Average of ratings: -
In reply to Ross Lovell

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Hi,

Forget about adding all that jQuery etc., that you read about, becasue all the code you need is already in Moodle 3.2 Boost theme.

Try this after removing all the code you added...get back to the Boost theme that works with User menu and Edit icon.

Here is what you can try:

  1. In the front page of your site, click the Edit Cog and click Turn editing ON.
  2. In the Frontpage Site Topic area (assuming that this has NOT be disabled) you should see a small Gog icon
  3. Click that icon and add the following code (see below) into the HTML part of the Text Editor.
    (NB:if not already selected in your Profile > Preferences make TinyMCE your default Text Editor).
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="first-slide" src="http://placehold.it/1024x200" alt="">
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-left">
          <h1>Example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="second-slide" src="http://placehold.it/1024x200" alt="">
      <div class="container">
        <div class="carousel-caption d-none d-md-block">
          <h1>Another example headline.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <img class="third-slide" src="http://placehold.it/1024x200" alt="">
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-right">
          <h1>One more for good measure.</h1>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Once added save the changes and view the result.

An example can be seen on my website:

http://vle.bylazydaisy.co.uk/

This example shows you that you only need to add the code as listed above changinf the captions text and images.

Hope this simple example helps?

Cheers

Mary

Average of ratings: Useful (2)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Chris Kenniburg -
Picture of Plugin developers

So this could easily be turned into a mustache template and populated with content by a theme admin page.

This might make its way into Fordson.  

Are there any other built in tricks like this?

Average of ratings: -
In reply to Chris Kenniburg

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Hi Chris,

I cannot believe you of all people have not looked at the latest Bootstrap 4 docs/examples?

https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.zip

This contains all the layouts examples and CSS pertinent to the latest Alpha 6 version

Hope this helps?

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Chris Kenniburg -
Picture of Plugin developers

I've really just been spending time trying to get Fordson ready, but we are waiting until summer to officially upgrade.

Thank you.  I gotta see if any of this would benefit Fordson!

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Damyon Wiese -
Picture of Core developers Picture of Moodle HQ Picture of Plugin developers Picture of Testers

Just note that we are still on Alpha 4 for now.

Average of ratings: -
In reply to Damyon Wiese

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Yes, I realise that, but there is nothing stopping a theme designer adding extra code to overcome the differences...is there?

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Ross Lovell -

Hi Mary

Thank you for your post it's really useful.

After pasting the text into the HTML part of the text editor I switched back to the visual view and could see the carousel working. After saving and going back to the frontpage the carousel seems to get stuck on the first slide.

I also noticed that in your example page the slides have a 100% width, where as my slides don't on the frontpage but do in the text editor.

Attachment example-slide.png
Average of ratings: -
In reply to Ross Lovell

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

SORRY I FORGOT THE STYLES!

Just copy and paste the following into the 2nd Raw SCSS text box in 

Site Administration > Appearance > Themes > Boost > Advanced settings

That should fix the layout.

Cheers

Mary

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

Average of ratings: Useful (4)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Ross Lovell -

Thank you Mary. That fixed everything and the carousel is now working.

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Francis Kneebone -

YesYesYes this is really nice work Mary.

Average of ratings: -
In reply to Francis Kneebone

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Thank you Francis!

I am going to take a look at your book now, as cognitive science is something I am interested in.

Thanks for sharing.

Kind regards

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Bob Ridge-Stearn -

Hi Mary, 

The link you give (http://vle.bylazydaisy.co.uk/ ) seems to be broken. Is this now redundant? if so perhaps a quick edit might be useful. Otherwise can you give me the correct url?

Many thanks,

Bob

Average of ratings: -
In reply to Bob Ridge-Stearn

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Hi, 

I removed it when I upgraded to Moodle. You can view my website https://bylazydaisy.co.uk but there is no slider there yet if that is what you are looking for. I can add it if you want to see.How it works?

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -

Hi Mary


I've used the slider code and inserted CSS, thanks very much for sharing this.. I have a couple of questions?


1. Background is grey and dispite entering URL for the Images - it still stays grey.. any ideas on why that my be?


2. And, When viewed on the moodle app the css is totally stripped out and it only displays HTML. I'm wondering if this is a moodle setting or is the carrosel not responsive? I pasted the CSS into the first box and I just noted you said put the second box so it could be that..


Any advice would be much appreciated.

Many Thaks

James

Average of ratings: -
In reply to James Bradshaw

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Hi.

In responce to your questions:

  1. How did you add the images?
  2. Sounds like the changes you made have not been styled as you added the CSS into the wrong text area. Raw SCSS in the bottom box. The one at the top is named differently as that is the initial area for variables, hence Raw Initia; SCSS, which can be used to adjust the way the colors, fonts and other complex elements are generated.
    The second box is just called Raw SCSS which is for SCSS or CSS.

Cheers

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -

Thanks Mary.


I added the image as a url link from our moodle server to the html code - here is the first slider there are six in total:

URLS HAVE BEEN REDACTED TO http://moodle3...uk/17-18_preview/draftfile.php

----------------------------------------------------------------

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="first-slide" src="http://moodle3...uk/17-18_preview/draftfile.php/144796/user/draft/559814453/Elearning%20support.png" alt="">
      <div class="container">
        <div class="carousel-caption d-none d-md-block text-left">
          <h1>E-Learning Support</h1>
          <p>Staff & Student E-Learning Resources.</p>
          <p><a class="btn btn-lg btn-primary" href="http://moodle3...uk/17-18_preview/course/view.php?id=2065" role="button">Find Out More</a></p>
        </div>
      </div>
    </div>

----------------------------------------------------------

Average of ratings: -
In reply to James Bradshaw

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

The background is comming from the CSS

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}

Change it to:
/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #fff;
}
which is white.
Average of ratings: Useful (1)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -

Thanks for the prompt responses Mary. Still quite new to CSS so hacking my way through it currently. Very much appreciated.


That does indeed change the background to white thanks but im still not getting the images ive linked to in the html. I wonder if i need to change or add to the background property:

background-image: url(); background-repeat: no-repeat;



I am in the process of resizing all my images to fit the slider but out of interest if i wanted to make sure my images filled the panes of the slider and the slider responded to the device browser - i presume i the function to do that in the css property is still "absolute"?


And the slider overall size is controlled by the "rem" variables in the CSS?


Thanks once again.

James



Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Toni Suhendra -

Dear Mary,

Different topic, i wanna ask you how can you create this layout .



Best regards

Toni (Indonesia)

Average of ratings: -
In reply to Toni Suhendra

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

If it helps here is the actual code I used:

<div class="container-fluid">
<div class="row-fluid">
<div class="span4 col-md-4">
<h3></h3>
<h3></h3>
<h3>What's new?</h3>
<p><img src=" Upload image using TinyMCE Editor " style="float: left; margin: 0 10px 10px 0;" width="70" height="78" />Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui</p>
<p><a class="btn btn-primary" href="https://moodle.com">View details</a></p>
</div>
<div class="span4 col-md-4">
<h3>Is it free?</h3>
<p><img src=" Upload image using TinyMCE Editor " style="float: left; margin: 0 10px 10px 0;" width="70" height="79" />Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-primary" href="https://moodle.com">View details<i class="fa fa forward"></i></a></p>
</div>
<div class="span4 col-md-4">
<h3>Where do I sign up?</h3>
<p><img src=" Upload image using TinyMCE Editor " style="float: left; margin: 0 10px 10px 0;" width="70" height="79" />Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-primary" href="https://moodle.com">View details<i class="fa fa forward"></i></a></p>
</div>
</div>
</div>

Regards

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -

Hi Mary


Your response to this solved the image issue for me too - i reuploaded images using tinyMCE instead of coding the links in html and it works now. smile)


Have also found this and it is helping get the basics.

https://v4-alpha.getbootstrap.com/components/carousel/#with-captions


Thanks for all your help on this.


James

Average of ratings: -
In reply to James Bradshaw

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Mary Evans -

Oh great stuff!!!

Thanks for the link I will add it to my LOOK & LEARN pages.

Glad you got it all working at last.

Cheers

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -

Hi Mary


So still have a couple of things i cant seem to work out on the carosell.


Ive tried pasting the css into a text file and hosting that on google drive for the ccs url for the Moodle App. This doesnt seem to be working and wondered if you could shine any light on why that may be? I named the file SimpleCSS.css and placed it in a public folder on gdrive to obtain the url:

https://drive.google.com/file/d/0B5Hl19hwkeM1WWVaRV9LWE91bnM/view?usp=sharing


On mobile device browers the background grey/white box of the carosell becomes responsive to the screen while the images stay as banners leaving a big grey space or blank space if the BG colour is set to white - This is great if there is text in the heading and caption as it sits nicely on the phone browser - however on the desktop browser this information is messy and confused by the graphics and text in the image so weve decided to ommit the captions and titles and just have a call to action button. Is there a way to make this background area smaller so there isnt so much of a gap but retail the image sizes acccross all browers sizes? Please see attached:

Scrgrab2




Also been trying to add the navigation arrows into the carosell but cant seem to get them to work. do you know if it is one or the other (arrows or dots)?

Look foraward to hearing from you.

James


Average of ratings: -
In reply to James Bradshaw

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Denis Featherstone -

Hi,

I have been trying to add a carousel to our Moodle 3.3 system using the code from your earlier replies and the information on https://v4-alpha.getbootstrap.com/components/carousel/#with-captions.  The images display but they do not slide.  The following is the code used:

<div class="carousel slide" id="myCarousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li class="active" data-target="#myCarousel" data-slide-to="2"></li>
 
  </ol>
 
  <div class="carousel-inner" role="listbox">

    <div class="carousel-item">
      <img class="first-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/new%2023.png">
    </div>

    <div class="carousel-item">
    <img class="second-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/IDcardslider.png">
     </div>
 
   <div class="carousel-item active">
    <a href="https://vle.hrc.ac.uk/mod/forum/discuss.php?d=1444"><img width="335" class="third-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/FRESHERSFAIRS2017.jpg"> </a>
    </div>

  </div>

  <a class="carousel-control-prev" role="button" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" role="button" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

and this is the Raw SCSS in the Boost configuration:

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 1rem;
  margin-top: 1 rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 16rem;
  background-color: #A7469A;
}
.carousel-item img {
  margin-left:auto;
  margin-right:auto;
  max-width: 100%;
  height: 16rem;
}

I have played around with this on our test system and apart from occasionally seeing it slide when in editing mode have not got it to display correctly.  I would appreciate any help you could give me with this.

Yours

Denis

Average of ratings: -