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.

Where is the Morecandy settings page?

You can find the settings page for the Morecandy theme by navigating to it via the Administration block:

Administration > Site Administration > Appearance > Themes > Morecandy

How can I add a Logo?

First of all you will need to make sure that your logo image is the correct size. The area for the logo is 100% width ways, with a set height of 200px. But since the logo will be added via CSS as a background-image the width of it will not matter too much as it will fit the screen. However, the height will be the problem if it is less than or more than 200px. Whatever the case you will need to add some CSS to the Morecandy CSS Box. You will find there are instructions how to do all this on the Morecandy settings page.[1] which is where you add the Logo.

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:

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.
Save settings and return to Home page and 'Turn editing on'.
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.
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.
After adding your images save your work and sit back and watch how it works.
Once you are familiar with the editing part of this you can add your own captions.
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 -->

Documentation