Morecandy

From MoodleDocs
Revision as of 21:46, 7 April 2015 by Mary Evans 2 (talk | contribs) (→‎How to add a slideshow.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 marketing spots to the footer of your frontpage

How to add a seperate menu to the front page

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 -->