Morecandy

Morecandy
Type	Theme
Set	N/A
Downloads	coming soon
Issues	coming soon
Discussion	coming soon
Maintainer(s)	Mary Evans

This is a contributed (third party) theme for Moodle written by Mary Evans and shared on Moodle.org

Customising Morecandy

Listed below are some simple steps to help you customize your Moodle site using Morecandy.

How to add a slideshow.

This is all the HTML you will need to add this carousel to your Moodle site. Here are some simple steps:

1. Go to the Home page of your Moodle site and choose 'Frontpage settings' from the Administration block, and proceed to enable 'Site topics' if not already enabled.
2. Save settings and return to Home page and 'Turn editing on'.
3. Open the 'Site topic' area and then 'Copy and Paste' the Carousel HTML from the bottom of this page, to the HTML part of the Editor, and save it.
4. Now switch back to normal view in your editor and you should see four place-holder images. By just selecting each image in turn with your mouse you can edit it by clicking on the Image icon in your editor. Here you can choose an image of your own to upload. Any size will work but do take into consideration the size of your site topic area especially if you have blocks.
5. After adding your images save your work and sit back and watch how it works.
6. Once you are familiar with the editing part of this you can add your own captions.
7. Remember too that this is only a prototype and as such is very basic, but it does demonstrate what can be done with the minimum of fuss.

<!-- COPY AND PASTE THIS CODE TO YOUR SITE TOPIC OR COURSE TOPIC -->
<div id="frontpage-slider" class="carousel slide"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>First caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Second caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Third caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Fourth caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#frontpage-slider" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#frontpage-slider" data-slide="next">›</a>
</div>
<!-- / END -->