Hi Rick,
I think it is a brilliant idea to promote the More theme that is on Moodle Cloud.
Sadly I forgot to update my site and so lost the account, but I was experimenting quite a bit and got it looking quite nice. At least I thought so!
Just as a matter of interest, have you ever tried adding the Bootstrap 2.3.2 Carousel into the Site topic area of the Frontpage? You can do it via the HTML editor using TinyMCE, as this works better for this kind of thing,
Here is the HTML & CSS (both normal & responsive) for the Carousel:
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 1">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="<!-- insert image here via TinyMCE Image file-picker -->" alt="Slide 3">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<!--<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> -->
<!--<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> -->
</div><!-- /.carousel -->
CSS is as follows:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
Responsive CSS is as follows:
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
@media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
}
Hope this is helpful?
Will you be recording your presentation?
Cheers
Mary
